当前位置：首页 > news >正文

Cesium绘制可编辑线

news 2025/8/3 14:47:26

Cesium

第一章绘制可编辑线

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

文章目录

Cesium
一、绘制线
二、编辑线
三、使用

一、绘制线

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 ,// 是否编辑 默认为falsestyle:{} // 线的样式，详细可以参考cesium的api)
}