/** * 平滑曲线编辑器 * 功能根据经纬度生成平滑曲线支持点击曲线显示控制点并输出属性拖拽控制点修改曲线并输出最新坐标 */ class SmoothCurveEditor { /** * 构造函数 * param {Object} Cesium - Cesium 对象 * param {Object} viewer - Cesium Viewer 实例 * param {Array} lngLatArray - 经纬度二维数组例如 [[lng1, lat1], [lng2, lat2], ...] * param {Object} options - 配置项 * param {String} options.id - 曲线实体的 ID * param {Object} options.properties - 曲线的自定义属性 * param {Function} options.onLineClick - 点击曲线时的回调函数参数为线的属性 * param {Function} options.onEditEnd - 拖拽结束时的回调函数参数为(最新经纬度数组, 线的属性) */ constructor(Cesium, viewer, lngLatArray, options {}) { this.Cesium Cesium; this.viewer viewer; // 保存配置项 this.options options; this.lineId options.id || smooth-curve- Cesium.createGuid(); this.lineProperties options.properties || {}; // 存储控制点笛卡尔坐标 this.controlPoints lngLatArray.map(lngLat Cesium.Cartesian3.fromDegrees(lngLat[0], lngLat[1]) ); // 存储拖拽点实体 this.controlPointEntities []; // 存储曲线实体 this.curveEntity null; // 缓存平滑曲线的插值点 this.interpolatedPoints []; // 拖拽状态 this.isDragging false; this.draggingIndex -1; // 事件处理器 this.handler new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); this._init(); } /** * 初始化 */ _init() { this._calcInterpolatedPoints(); this._createCurveEntity(); this._createControlPoints(); this._bindEvents(); } /** * 仅计算平滑曲线插值点并更新缓存 */ _calcInterpolatedPoints() { const Cesium this.Cesium; const points this.controlPoints; if (points.length 2) return; const times []; for (let i 0; i points.length; i) { times.push(i / (points.length - 1)); } const spline new Cesium.CatmullRomSpline({ times: times, points: points }); const interpolatedPoints []; const segments 30; for (let i 0; i points.length - 1; i) { for (let j 0; j segments; j) { const t i j / segments; interpolatedPoints.push(spline.evaluate(t / (points.length - 1))); } } interpolatedPoints.push(points[points.length - 1]); this.interpolatedPoints interpolatedPoints; } /** * 创建曲线实体支持自定义 ID 和属性 */ _createCurveEntity() { const Cesium this.Cesium; const self this; this.curveEntity this.viewer.entities.add({ id: this.lineId, // 绑定自定义属性 properties: new Cesium.PropertyBag(this.lineProperties), polyline: { positions: new Cesium.CallbackProperty(() { return self.interpolatedPoints; }, false), width: 4, material: Cesium.Color.fromBytes(0, 255, 255, 255), clampToGround: new Cesium.ConstantProperty(true) } }); } /** * 创建拖拽控制点实体初始隐藏 */ _createControlPoints() { const Cesium this.Cesium; this.controlPointEntities this.controlPoints.map((position, index) { return this.viewer.entities.add({ id: curve-control-point- index - Cesium.createGuid(), position: position, point: { pixelSize: 12, color: Cesium.Color.fromCssColorString(#FF4500).withAlpha(1.0), outlineColor: Cesium.Color.WHITE, outlineWidth: 2, show: false } }); }); } /** * 绑定鼠标事件 */ _bindEvents() { const Cesium this.Cesium; const viewer this.viewer; // 鼠标左键按下 this.handler.setInputAction((movement) { const pickedObject viewer.scene.pick(movement.position); // 1. 判断是否点击到了控制点 if (Cesium.defined(pickedObject) Cesium.defined(pickedObject.id)) { const entityId pickedObject.id.id; const index this.controlPointEntities.findIndex(e e.id entityId); if (index ! -1) { this.isDragging true; this.draggingIndex index; this.curveEntity.polyline.clampToGround.setValue(false); viewer.scene.screenSpaceCameraController.enableRotate false; viewer.scene.screenSpaceCameraController.enableTranslate false; viewer.scene.screenSpaceCameraController.enableZoom false; viewer.scene.screenSpaceCameraController.enableTilt false; return; } } // 2. 判断是否点击到了曲线本身 if (Cesium.defined(pickedObject) pickedObject.id this.curveEntity) { this._showControlPoints(true); // 触发点击回调输出线的属性 if (this.options.onLineClick) { // 将 PropertyBag 转换为普通 JS 对象输出 const props {}; const propertyNames pickedObject.id.properties.propertyNames; propertyNames.forEach(name { props[name] pickedObject.id.properties[name].getValue(); }); this.options.onLineClick(props); } } else { // 3. 点击了空白区域隐藏控制点 this._showControlPoints(false); } }, Cesium.ScreenSpaceEventType.LEFT_DOWN); // 鼠标移动拖拽更新 this.handler.setInputAction((movement) { if (this.isDragging) { const cartesian viewer.camera.pickEllipsoid( movement.endPosition, viewer.scene.globe.ellipsoid ); if (cartesian) { this.controlPoints[this.draggingIndex] cartesian; this.controlPointEntities[this.draggingIndex].position new Cesium.ConstantProperty(cartesian); this._calcInterpolatedPoints(); viewer.scene.requestRender(); } } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 鼠标左键抬起结束拖拽 this.handler.setInputAction(() { if (this.isDragging) { this.isDragging false; this.draggingIndex -1; this.curveEntity.polyline.clampToGround.setValue(true); viewer.scene.screenSpaceCameraController.enableRotate true; viewer.scene.screenSpaceCameraController.enableTranslate true; viewer.scene.screenSpaceCameraController.enableZoom true; viewer.scene.screenSpaceCameraController.enableTilt true; viewer.scene.requestRender(); // 触发编辑完成回调输出最新坐标和属性 if (this.options.onEditEnd) { const latestCoords this.getLngLatPositions(); const props {}; const propertyNames this.curveEntity.properties.propertyNames; propertyNames.forEach(name { props[name] this.curveEntity.properties[name].getValue(); }); this.options.onEditEnd(latestCoords, props); } } }, Cesium.ScreenSpaceEventType.LEFT_UP); } /** * 控制拖拽点的显示与隐藏 */ _showControlPoints(show) { this.controlPointEntities.forEach(entity { entity.point.show new this.Cesium.ConstantProperty(show); }); this.viewer.scene.requestRender(); } /** * 获取当前控制点的经纬度数组 */ getLngLatPositions() { const Cesium this.Cesium; const cartographics this.controlPoints.map(point Cesium.Cartographic.fromCartesian(point) ); return cartographics.map(carto [ Cesium.Math.toDegrees(carto.longitude), Cesium.Math.toDegrees(carto.latitude) ]); } /** * 销毁实例释放资源 */ destroy() { if (this.handler) { this.handler.destroy(); this.handler null; } if (this.curveEntity) { this.viewer.entities.remove(this.curveEntity); this.curveEntity null; } if (this.controlPointEntities.length 0) { this.controlPointEntities.forEach(entity { this.viewer.entities.remove(entity); }); this.controlPointEntities []; } this.interpolatedPoints []; } } export default SmoothCurveEditor;使用实例const coordsArray [ [116.39, 39.90], [116.42, 39.92], [116.45, 39.89], [116.48, 39.91] ]; const editor new SmoothCurveEditor(Cesium, viewer, coordsArray, { id: my-custom-line-id, properties: { name: 测试路段, level: 高速 }, onLineClick: (props) { console.log(点击了线属性为:, props); // 输出: 点击了线属性为: { name: 测试路段, level: 高速 } }, onEditEnd: (newCoords, props) { console.log(拖拽结束最新坐标为:, newCoords); console.log(线的属性为:, props); } });
)
