Cesium 绘制可编辑点

Cesium Point点

实现可编辑的pointEntity 实体

---

---

前言

支持 鼠标按下 拖动修改点，释放修改完成。

---

一、使用步骤

1、点击 按钮 开始 绘制，单击地图 绘制完成
2、编辑状态下（hasEdit = true）拖动修改位置，释放完成修改。
2、传入 hasEdit：true 绘制完成后自动激活编辑。默认为false
3、可以取消编辑、激活编辑

二、使用方法

引入

import Point from "@/utils/cesium/point";const point = new Point(map)point.startDraw({// hasEdit: true,style: {pixelSize: 10,color: Cesium.Color.RED,outlineColor: Cesium.Color.WHITE,outlineWidth: 2,}})
// 编辑状态控制point.hasEdit = [boolean]

二、具体实现

主要是对 ccesium 事件监听的灵活使用

1. 开始绘制

代码如下（示例）：

  startDraw(options: PolylineOptions) {this.clear();this.style = options.style;if (options.hasEdit) {this.enableEdit = options.hasEdit;}if (!this.handler) {this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);}// @ts-ignorethis.viewer._container.style.cursor = "crosshair"; //修改鼠标样式 ，精确选择this.addEventListener();}

2.绘制事件监听

    //鼠标 左键点击this.handler.setInputAction((e) => {const target = this.viewer.scene.pick(e.position);// && target.collectionif (target && this.enableEdit && this.drawEnd) {this.addEditEventListen(e);return;}// 非编辑状态if (!this.editState && !this.drawEnd) {const point: any = this.viewer.scene.pickPosition(e.position);this.polylinePostions.push(point);// 默认开启编辑 显示编辑点if (this.enableEdit) {const editPoints: any = this.creatPoint(point);this.pointList.push(editPoints);}if (this.polylinePostions.length === 1) {this.drawPolyline();}}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 鼠标移动this.handler