# 项目使用

# 类库引入

目前vis3d.js支持cdn以及模块化两种方式引入。

# cdn方式引入

步骤如下：

下载vis3d.js；
通过script标签引入；

<script src="vis3d.js"></script>

# 模块化方式引入

步骤如下：

安装vis3d依赖；

npm i vis3d --save

在 src/main.js 中，按照如下方式引入

import "vis3d/vis3d.css"
import vis3d from "vis3d/vis3d.min.js" 
Vue.prototype.vis3d = window.vis3d = vis3d // 为了方便调用，同时绑定到window对象上

注：vis3d引入之前，先以cdn方式引入Cesium.js及其css文件。

# 代码示例

初始化viewer对象

// 根据配置文件初始化viewer
let mapViewer = (window.mapViewer = new this.vis3d.MapViewer(
    "mapContainer",
    mapConfig
));
window.viewer = mapViewer._viewer;

mapConfig属性说明：详细说明

创建标绘对象并绑定事件

window.plotDrawTool = new this.vis3d.plot.Tool(window.viewer, {
    canEdit: true, // 绘制的对象是否可编辑
});
window.plotDrawTool.on("endCreate", function (entObj, ent) {
    // 创建完成后 打开控制面板
});
window.plotDrawTool.on("startEdit", function (entObj, ent) {
    // 开始编辑
});
window.plotDrawTool.on("endEdit", function (entObj, ent) {
    // 编辑完成后
});

开始标绘

window.plotDrawTool.start({
    "type": "polyline",
    "style": {
        "clampToGround": true,
        "color": "#ffff00"
    }
});

# 开发文档

以上介绍了标绘工具的使用方式，更多功能请参阅：api开发文档 (opens new window)

← 说明核心对象 →