快速入门

本部分内容主要介绍前端项目如何快速集成中望云CAD SDK，按照语言或框架划分为以下四个部分，html 集成、vue 项目集成、angular 项目集成、react 项目集成。

# html 集成 SDK

本节内容将介绍如何使用 html 集成中望云CAD SDK，实现查看图纸的功能。

1.在项目根目录下新建 src 目录，在 src 目录下新建 assets 文件夹用于存放静态资源，将前端 sdk 包中的 ZwCloud2DSDK 文件夹放置在该目录下。

2.在项目根目录下新建 index.html 文件，引用 ZwCloud2D.js 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html demo</title>
  </head>
  <body></body>
  <script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2D.js"></script>
</html>

3.设置后端服务地址，分为私有化部署后端地址和 Cloud2D 公网服务地址。

//设置后端服务地址
ZwCloud2D.setConnectUrl("http://192.168.56.176:8888");

//使用Cloud2D公网服务时,需要设置请求token
//ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
//ZwCloud2D.setToken('');

4.设置加载图纸的 docId。

ZwCloud2D.ZwEditor.setDocId("1606196943661817856");

5.创建一个 dom 元素作为 sdk 的容器。

<div id="container"></div>

6.初始化前端组件，异步操作。

await ZwCloud2D.ZwEditor.init(document.getElementById("container"));

7.加载图纸，需要在初始化前端组件完成后执行。

ZwCloud2D.ZwEditor.load();

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html demo</title>
  </head>
  <body>
    <div id="container"></div>

    <script
      type="text/javascript"
      src="/assets/ZwCloud2DSDK/ZwCloud2D.js"
    ></script>

    <script>
      //设置后端服务地址
      ZwCloud2D.setConnectUrl('http://192.168.56.176:8888');

      //使用Cloud2D公网服务时,需要设置请求token
      //ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
      //ZwCloud2D.setToken('');

      //设置加载图纸的docId
      ZwCloud2D.ZwEditor.setDocId('1606196943661817856');

      //初始化前端组件
      await ZwCloud2D.ZwEditor.init(document.getElementById('container'));

      //加载图纸
      ZwCloud2D.ZwEditor.load();
    </script>
  </body>
</html>

# vue 集成 SDK

本节内容将介绍如何在 vue 项目中集成中望云CAD SDK，实现查看图纸的功能。

1.在项目根目录下新建 src 目录，在 src 目录下新建 assets 文件夹用于存放静态资源，将前端 sdk 包中的 ZwCloud2DSDK 文件夹放置在该目录下。

2.在项目中的 index.html 文件中引用 ZwCloud2D.js 文件。

<script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2D.js"></script>

3.在项目中新建一个组件。

<template>
</template>

<script>
export default {
  name: "cloud2d",

  data() {
    return {};
  },
  props: [],

  components: {},

  mounted() {},

  methods: {},
};
</script>

4.在 mouted 钩子函数执行后续操作，设置后端服务地址，分为私有化部署后端地址和 Cloud2D 公网服务地址。

//设置后端服务地址
ZwCloud2D.setConnectUrl("http://192.168.56.176:8888");

//使用Cloud2D公网服务时,需要设置请求token
//ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
//ZwCloud2D.setToken('');

5.设置加载图纸的 docId。

ZwCloud2D.ZwEditor.setDocId("1606196943661817856");

6.创建一个 dom 元素作为 sdk 的容器。

<div id="container"></div>

7.初始化前端组件，异步操作。

await ZwCloud2D.ZwEditor.init(document.getElementById("container"));

8.加载图纸，需要在初始化前端组件完成后执行。

ZwCloud2D.ZwEditor.load();

完整代码

<template>
  <div id="container"></div>
</template>

<script>
export default {
  name: "cloud2d",

  data() {
    return {};
  },
  props: [],

  components: {},

  mounted() {
    //设置后端服务地址
      ZwCloud2D.setConnectUrl('http://192.168.56.176:8888');

      //使用Cloud2D公网服务时,需要设置请求token
      //ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
      //ZwCloud2D.setToken('');

      //设置加载图纸的docId
      ZwCloud2D.ZwEditor.setDocId('1606196943661817856');

      //初始化前端组件
      await ZwCloud2D.ZwEditor.init(document.getElementById('container'));

      //加载图纸
      ZwCloud2D.ZwEditor.load();
  },

  methods: {},
};
</script>
<style>
#container {
  width: 100vw;
  height: 100vh;
}
</style>

# angular 集成 SDK

本节内容将介绍如何在 angular 项目中集成中望云CAD SDK，实现查看图纸的功能。

1.在项目根目录下新建 src 目录，在 src 目录下新建 assets 文件夹用于存放静态资源，将前端 sdk 包中的 ZwCloud2DSDK 文件夹放置在该目录下。

2.在项目中的 index.html 文件中引用 ZwCloud2D.js 文件。

<script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2D.js"></script>

3.在项目中新建一个组件

// dwg-editor.component.ts
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-dwg-editor",
  templateUrl: "./dwg-editor.component.html",
  styleUrls: ["./dwg-editor.component.scss"],
})
export class DwgEditorComponent implements OnInit {
  constructor() {}
  ngOnInit(): void { }
}

3.在 ngOnInit 生命周期执行后续操作，设置后端服务地址，分为私有化部署后端地址和 Cloud2D 公网服务地址。

//设置后端服务地址
ZwCloud2D.setConnectUrl("http://192.168.56.176:8888");

//使用Cloud2D公网服务时,需要设置请求token
//ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
//ZwCloud2D.setToken('');

4.设置加载图纸的 docId。

ZwCloud2D.ZwEditor.setDocId("1606196943661817856");

5.创建一个 dom 元素作为 sdk 的容器。

<!-- dwg-editor.component.html -->
<div id="container"></div>

6.初始化前端组件，异步操作。

await ZwCloud2D.ZwEditor.init(document.getElementById("container"));

7.加载图纸，需要在初始化前端组件完成后执行。

ZwCloud2D.ZwEditor.load();

完整代码

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-dwg-editor",
  templateUrl: "./dwg-editor.component.html",
  styleUrls: ["./dwg-editor.component.scss"],
})
export class DwgEditorComponent implements OnInit {
  constructor() {}
  ngOnInit(): void {
    //设置后端服务地址
    ZwCloud2D.setConnectUrl("http://192.168.56.176:8888");

    //使用Cloud2D公网服务时,需要设置请求token
    //ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
    //ZwCloud2D.setToken('');

    //设置加载图纸的docId
    ZwCloud2D.ZwEditor.setDocId("1606196943661817856");

    //初始化前端组件
    await ZwCloud2D.ZwEditor.init(document.getElementById("container"));

    //加载图纸
    ZwCloud2D.ZwEditor.load();
  }
}

# react 集成 SDK

本节内容将介绍如何在 react 项目中集成中望云CAD SDK，实现查看图纸的功能。

1.在项目根目录下新建 src 目录，在 src 目录下新建 assets 文件夹用于存放静态资源，将前端 sdk 包中的 ZwCloud2DSDK 文件夹放置在该目录下。

2.在项目中的 index.html 文件中引用 ZwCloud2D.js 文件。

<script type="text/javascript" src="/assets/ZwCloud2DSDK/ZwCloud2D.js"></script>

3.在项目中新建一个组件

import React, { useEffect } from "react";

const View = () => {
  useEffect(() => {
    // 清理函数（根据需要添加）
    return () => {
      // 如果需要清理资源，在此添加
    };
  }, []);

  return (
    <div></div>
  );
};

export default View;

4.在 useEffect 钩子函数执行后续操作，设置后端服务地址，分为私有化部署后端地址和 Cloud2D 公网服务地址。

//设置后端服务地址
ZwCloud2D.setConnectUrl("http://192.168.56.176:8888");

//使用Cloud2D公网服务时,需要设置请求token
//ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
//ZwCloud2D.setToken('');

5.设置加载图纸的 docId。

ZwCloud2D.ZwEditor.setDocId("1606196943661817856");

6.创建一个 dom 元素作为 sdk 的容器。

  return (
    <div
      id="container"
      style={{
        width: "100vw",
        height: "100vh",
        top: 0,
        left: 0,
      }}
    />
  );

6.初始化前端组件，异步操作。

await ZwCloud2D.ZwEditor.init(document.getElementById("container"));

7.加载图纸，需要在初始化前端组件完成后执行。

ZwCloud2D.ZwEditor.load();

完整代码

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const View = () => {
  useEffect(() => {
    //设置后端服务地址
    ZwCloud2D.setConnectUrl("http://192.168.56.176:8888");

    //使用Cloud2D公网服务时,需要设置请求token
    //ZwCloud2D.setConnectUrl('https://test2d.zwsoft.cn');
    //ZwCloud2D.setToken('');

    //设置加载图纸的docId
    ZwCloud2D.ZwEditor.setDocId("1606196943661817856");

    //初始化前端组件
    await ZwCloud2D.ZwEditor.init(document.getElementById("container"));

    //加载图纸
    ZwCloud2D.ZwEditor.load();

    // 清理函数（根据需要添加）
    return () => {
      // 如果需要清理资源，在此添加
    };
  }, []);

  return (
    <div
      id="container"
      style={{
        width: "100vw",
        height: "100vh",
        top: 0,
        left: 0,
      }}
    />
  );
};

export default View;

# 常见问题

1.如遇编译报错类似 Module is not defined，Module、ZwCloud2D 均为挂载到 window 上的全局对象，在对应的对象前添加 window 即可解决，如 window.Module、window.Zwcloud2D 等；

2.如遇报错 unexpected token '<'，请检查 js 文件引用路径是否正确。如引用路径错误，对于请求会返回 index.html 中的内容，可据此判断；

简介点

开放平台

快速入门

快速入门

# html 集成 SDK

# vue 集成 SDK

# angular 集成 SDK

# react 集成 SDK

# 常见问题