Cesium交互绘图组件[email protected]使用说明

cesium-draw 3.x已发布，相比2.x这个版本将图形和操作进行了分离，所有图形的事件使用同一个句柄，性能大幅提升。

组件优势

1.支持各种模式的图形绘制（贴地、贴模型、空间线/面）
2.支持图形编辑，可以移动或删除节点
3.支持导入导出（Geojson,Shp）
4.图层管理。

Github 地址

码云 地址

Install

npm i cesium-draw --save

Usage

//you-component.js
<templete>
<div>
<div id='cesiumContainer'></div>
<cesiumDrawViewer :viewer="viewer"></cesiumDrawViewer>
</div>
</templete>
<script>
import cesiumDrawHandler from 'cesium-draw'
import 'cesium-draw/dist/theme/dark.css'
export default {
 name: "my-component",
 data(){

 },
 components:{cesiumDrawHandler},
 mounted(){
     this.viewer=new Cesium.Viewer('cesiumContainer')
 }

}
</scrip

如果你没有将Viewer对象存储到Vue data对象中，需要显式调用init方法初始化组件

//you-component.js
<templete>
<div>
<div id='cesiumContainer'></div>
<cesiumDrawViewer ref='markerManager'></cesiumDrawViewer>
</div>
</templete>
<script>
import cesiumDrawHandler from 'cesium-draw'
import 'cesium-draw/dist/theme/dark.css'
export default {
  name: "my-component",
  components:{cesiumDrawHandler},
  mounted(){
      const viewer=new Cesium.Viewer('cesiumContainer')
      this.$refs.markerManager.init(viewer)
  }

}
</scrip

Development&Build

npm install
npm run build

Build Lib

npm run lib

效果图