Cesium 绘制可编辑点
Cesium Point点
实现可编辑的pointEntity 实体
文章目录
- Cesium Point点
- 前言
- 一、使用步骤
- 二、使用方法
- 二、具体实现
- 1. 开始绘制
- 2.绘制事件监听
- 三、 完整代码
前言
支持 鼠标按下 拖动修改点，释放修改完成。
一、使用步骤
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