常宁网站建设常宁网站建设,世界交互设计最好的前10大学,网络信息科技公司经营范围,商务网站制作语言基础Cesium
第一章 绘制可编辑线 Screen-2024-09-17-202059的副本 文章目录 Cesium一、绘制线二、编辑线三、使用 一、绘制线
1、方法 //场景相机控制viewer.scene.screenSpaceCameraController.enableRotate false; //cesium相机控制 绘制和编辑时 禁止转动场景// 鼠标样式修改…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)
}
提示完整实现方式 99元 付费获取实现不易感谢支持私信联系 看到回