Cesium交互绘图组件Cesium-Draw使用说明

[email protected]已发布，该文档仅适用于v 2.x，新版使用方法请访问Cesium交互绘图组件[email protected]使用说明

Github地址:https://github.com/xtfge/vue-cesium-draw.git

特色功能

• 仿百度地图添加marker，支持自定义样式，支持编辑和删除。
• 动态绘制线和多边形，支持图形编辑，可以修改和删除节点。
• 支持属性修改。
• 支持导入导出。
  
  

1.安装

npm install cesium-draw
npm i cesium-draw

2.Vue引入

在main.js中引用cesium-draw组件

import cesiumDrawViewer from 'cesium-draw'
Vue.use(cesiumDrawViewer)

在App.vue中使用它

• viewer指的是Cesium.Viewer对象

3.效果

4.按需引入

你可能不用不到上面所有功能~~

你可能觉得我的界面TCL ~~

你可以想把部分功能和自己的组件结合起来~~

感谢作者吧，你可以只引入自己想要的部分

4.1引入marker

(1) 引入marker

<template>
...
<markerViewer ref="marker" :viewer="viewer"></markerViewer>
...
</template>
<script>
import markerViewer from "cesium-draw/src/components/marker";
export default{
  name:'myComponent'
  components:[markerViewer]
}
</script>

markerViewer默认只有一种标记样式，但是你可以利用extendImage属性扩展它，如下：

<template>
...
<markerViewer ref="marker" :viewer="viewer" :extendImage="imageArr"></markerViewer>
...
</template>
<script>
import markerViewer from "cesium-draw/src/components/marker";
export default{
  name:'myComponent',
  data(){
    return{
      imageArr: [
        "static/images/markers/1.png",
        "static/images/markers/2.png",
        "static/images/markers/3.png",
        "static/images/markers/4.png",
        "static/images/markers/5.png"
      ]
    }
  }
  components:[markerViewer]
}
</script>

(2) 初始化markerViewer
初始化可以通过markerViewer的init方法完成，init定义如下：

/**
* viewer{Viewer} viewer对象
* mode{String} 定义添加标记的模式
*/
init(viewer,mode)

export default{
 methods:{
    initMarker(){
      this.$refs.marker.init(viewer,'single')
	}
  }
}
</script>

(2) 开始/停止添加marker
开始/停止添加marker通过isDrawing属性（true/false）控制

export default{
 methods:{
    initMarker(){
      this.$refs.marker.init(viewer,'single')
	},
	startPickMarker(){
	  //true-开始标注，false-结束标注
	  //如果init时将mode设为single，则添加完一个marker后会自动停止拾取
	  //否则可以连续摄取
	  this.$refs.marker.isDrawing=true
	}
  }
}
</script>

（3）移除所有marker
markerViewer的marker可以但个删除，但是如果你需要一键删除所有marker可以通过removeAll()方法实现。

export default{
 methods:{
    removeAll(){
      this.$refs.marker.removeAll()
    }
  }
}
</script>

（4）销毁markerViewer
markerViewer提供了destroy方法用于销毁整个组件

export default{
 methods:{
    destroy(){
      this.$refs.marker.destroy()
    }
  }
}
</script>

（5）完整代码

```js
<template>
  <div id='app'>
    <markerViewer ref="marker" :viewer="viewer" :extendImage="imageArr"></markerViewer>
  </div>
</template>
<script>
import markerViewer from "cesium-draw/src/components/marker";
export default{
  name:'myComponent',
  data(){
    return{
      imageArr: [
        "static/images/markers/1.png",
        "static/images/markers/2.png",
        "static/images/markers/3.png",
        "static/images/markers/4.png",
        "static/images/markers/5.png"
      ]
    }
  }
  components:[markerViewer],
   methods:{
    initMarker(){
      this.$refs.marker.init(viewer,'single')
	},
	startPickMarker(){
	  //true-开始标注，false-结束标注
	  //如果init时将mode设为single，则添加完一个marker后会自动停止拾取
	  //否则可以连续摄取
	  this.$refs.marker.isDrawing=true
	},
	removeAll(){
      this.$refs.marker.removeAll()
    },
    destroy(){
      this.$refs.marker.destroy()
    }
  }
}
</script>

效果

4.2引入polyline

（1）引入Polyline

import {Polyline} from "cesium-draw/src/components/commons";

（2）初始化Polyline

    //默认样式
    const options=Polyline.defaultStyle()
    //不初始化属性编辑面板
    options.editPanel=false
    const pl = new Polyline(this.viewer, options, name)
    //是否给线添加节点
    pl.initNodes()

（3）移除线

  pl.remove()

（4）缩放到当前要素

  pl.zoomTo()

4.3 引入PolylineCollection

（1）引入

import {PolylineCollection} from "cesium-draw/src/components/commons";

（2）初始化

const plCollection=new PolylineCollection(viewer)

（3）添加一条线

//不添加节点
const node=false
const name="pl1"
plCollection.add(node,name)

（4）根据名称删除

//和添加时的name对应
plCollection.removeByName('pl1')

（5）删除所有要素

plCollection.remove()

4.4 引入Polygon

多边形的使用方法和Polyline相似

4.5 引入PolygonCollection

多边形集合的使用方法和PolylineCollection相似