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-ignore
    this.viewer._container.style.cursor = "crosshair"; //修改鼠标样式 ，精确选择

    this.addEventListener();
  }

2.绘制事件监听

    //鼠标 左键点击
    this.handler.setInputAction((e) => {
   
      const target = this.viewer.scene.pick(e.position);

      // && target.collection
      if (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