Cesium绘制可编辑线

Cesium

第一章 绘制可编辑线

Screen-2024-09-17-202059的副本

---

---

一、绘制线

1、方法

  //场景相机控制
  viewer.scene.screenSpaceCameraController.enableRotate = false; //cesium相机控制 绘制和编辑时 禁止转动场景
  // 鼠标样式修改
  viewer._container.style.cursor = "crosshair"; //修改鼠标样式 ，精确选择鼠标样式
  //事件监听
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //处理用户输入事件
    
  左键单击 开始绘制 双击绘制结束   
  1、点击事件
  handler.setInputAction((e) => {}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  2、鼠标移动
  handler.setInputAction((e) => {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  3、鼠标双击
  handler.setInputAction((e) => {}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

2、实现

    /* CallbackProperty 动态更新属性 
    * 可以实时地改变实体的状态而不需要频繁地重新设置整个属性
    */
     viewer.entities.add({
      id: generateUUID(),
      polyline: {
        positions: new Cesium.CallbackProperty((e) => {
          return  tempPositions;
        }, false),
        ...style, // style 为 线的样式
      },
    });

二、编辑线

线 是由两个以上点构成的，一条线绘制完成后 可以获取到 线上的 点。通过修改点的位置从而达到更新线的目的

1、找到点的位置 index
2、移动点修改位置

// 编辑 点 实体的坐标
const editPoint = this.viewer.entities.getById(target.id.id);
const position = this.editPoint?.position.getValue();

// selectEntity 为 选中的polyline实体
const polylinePostions = selectEntity._polyline.positions.getValue() // polyline 线上的点坐标

 //监听到鼠标移动后 将新的 坐标位置 赋值给 线上index的点 可实现编辑效果
  polylinePostions[index] = cartesian;
  selectEntity.polyline.positions = new Cesium.CallbackProperty((e) => {
            return polylinePostions;
     },false);

三、使用

const polyline = new Polyline(viewer)

const startDraw = () => {
  polyline.startDraw({ 
    hasEdit: true ,// 是否编辑 默认为false
    style:{} // 线的样式，详细可以参考cesium的api
  )
}