Cesium-Draw-hnx

基于Vue开发的Cesium基础标绘插件，支持交互式添加BillBoard、Polyline、Polygon、Label和Model

核心功能:

• 鼠标交互绘图
• 对于Billboard、Label、Model支持图标，名称的编辑，图标可以任意扩展.
• 对于Polyline和Polygon支持顶点、颜色等常见图形属性的编辑.
• 支持导入、导出功能
• 可以通过图层管理器管理通过该插件添加的所有图形.

安装

npm i cesium-draw-hnx

自定义新改动的地方

 增加了加点图标（1-10，还有默认图标）
 增加了折线或者多边形的的 绘制点个数限制
 增加了编辑删除逻辑优化
 移除了del删除的逻辑，删除不能重启绘制的状态，把删除的逻辑交给整体的删除

使用

<template>
    <div>
     <div id='map'></div>
     <cesium-draw ref='drwaManager' :drawOptions="drawOptions"></cesium-draw>
    </div>
</template>
<script>
import cesiumDraw from 'cesium-draw-hnx'
import 'cesium-draw-hnx/dist/theme/default.css'
//import 'cesium-draw/dist/theme/dark.css'
export default{
    name:'your-component',
    data(){
        return {
            viewer:null,
            drawOptions: {
                //折线最多点个数 0代表不限制
                polylineMaxPointNum: 0,
                //多边形最多点的个数 0代表不限制
                polygonMaxPointNum: 0,
            },
        }
    }
    components:{cesiumDraw},
    mounted(){
        this.viewer=new Cesium.Viewer('map')
    }
}
</script>

如果你没有将Cesium Viewer对象保存到Vue data中，你必须显式调用init函数初始化组件。

const viewer=new Cesium.Viewer('map')
this.$refs.drawManager.init(viewer)

怎么扩展标记图标

<cesium-draw ref='drwaManager' :extendMarkerImage="images"></cesium-draw>

data(){
    return{
        images:["./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"
      ]
    }
}

Methods

• getById(mid) 根据id返回图形要素

Events

事件|说明|回调 ---|---|--- deleteEvent|要素删除事件|参数为删除要素的id locateEvent|要素定位事件|定位要素的id editEvent|要素编辑事件|要素的id renameEvent|要素重命名事件|两个参数,依次为要素id,要素更新前的名称 selectEvent|checkbox点击事件|两个参数,依次为要素id,checkbox状态 closeEvent|标绘面板关闭事件|无

开发&打包

npm install
npm run build

打包成组件

npm run lib

效果