cesium-xs-sdk 1.0.0

package/src/modules/tools/BaseTool.js

@@ -0,0 +1,155 @@
+/**
+ * 工具基类
+ * 所有编辑工具的抽象基类
+ */
+export class BaseTool {
+  constructor(editorModule, options = {}) {
+    this._editor = editorModule;
+    this._viewer = editorModule.viewer;
+    this._graphicModule = editorModule.graphicModule;
+    this._eventModule = editorModule.eventModule;
+    this._options = options;
+    this._isActive = false;
+    this._handlers = []; // 注册的事件处理器 ID
+  }
+
+  /**
+   * 激活工具
+   */
+  activate() {
+    if (this._isActive) return;
+    this._isActive = true;
+    this.onActivate();
+  }
+
+  /**
+   * 停用工具
+   */
+  deactivate() {
+    if (!this._isActive) return;
+    this._isActive = false;
+    this.onDeactivate();
+    this.clearHandlers();
+  }
+
+  /**
+   * 激活时的回调，子类重写
+   */
+  onActivate() { }
+
+  /**
+   * 停用时的回调，子类重写
+   */
+  onDeactivate() { }
+
+  /**
+   * 注册事件观察者
+   * @param {string} eventType 事件类型
+   * @param {Function} callback 回调函数
+   * @returns {string} 观察者 ID
+   */
+  registerObserver(eventType, callback) {
+    const observerId = this._eventModule.registerObserver(eventType, (lngLat, entity, movement) => {
+      // mouse:move 事件没有 lngLat，直接传递 movement 对象
+      if (eventType === 'mouse:move') {
+        callback(movement);
+      } else {
+        callback(lngLat, entity, movement);
+      }
+    });
+    this._handlers.push({ eventType, observerId });
+    return observerId;
+  }
+
+  /**
+   * 清除所有已注册的事件处理器
+   */
+  clearHandlers() {
+    this._handlers.forEach(({ eventType, observerId }) => {
+      this._eventModule.unregisterObserver(eventType, observerId);
+    });
+    this._handlers = [];
+  }
+
+  /**
+   * 获取屏幕坐标对应的地理坐标
+   * @param {object} screenPos 屏幕坐标 {x, y}
+   * @returns {Array} 经纬度高度 [lon, lat, height]
+   */
+  screenToLonLat(screenPos) {
+    if (!screenPos || screenPos.x == null || screenPos.y == null) return null;
+
+    let cartesian = null;
+
+    // 优先尝试拾取地形/物体表面位置
+    try {
+      cartesian = this._viewer.scene.pickPosition(screenPos);
+    } catch (e) {
+      // ignore
+    }
+
+    // 如果拾取失败（空白区域），fallback 到椭球体表面
+    if (!cartesian) {
+      cartesian = this._viewer.camera.pickEllipsoid(
+        new Cesium.Cartesian3(screenPos.x, screenPos.y),
+        this._viewer.scene.globe.ellipsoid
+      );
+    }
+
+    if (!cartesian) return null;
+
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+    return [
+      Cesium.Math.toDegrees(cartographic.longitude),
+      Cesium.Math.toDegrees(cartographic.latitude),
+      cartographic.height
+    ];
+  }
+
+  /**
+   * 获取地形高度
+   * @param {Array} lonLat 经纬度 [lon, lat]
+   * @returns {Promise<number>} 地形高度
+   */
+  async getTerrainHeight(lonLat) {
+    const cartographic = Cesium.Cartographic.fromDegrees(lonLat[0], lonLat[1]);
+    const result = await Cesium.sampleTerrainMostDetailed(
+      this._viewer.terrainProvider,
+      [cartographic]
+    );
+    return result[0].height;
+  }
+
+  /**
+   * 创建临时图元（不被 GraphicModule 管理，工具内部使用）
+   * @param {string} id 临时 ID
+   * @param {object} options 图元配置
+   * @returns {Cesium.Entity}
+   */
+  createTempEntity(id, options) {
+    const entity = this._viewer.entities.add({
+      id: `${id}`,
+      ...options
+    });
+    return entity;
+  }
+
+  /**
+   * 移除临时图元
+   * @param {Cesium.Entity} entity
+   */
+  removeTempEntity(entity) {
+    if (entity) {
+      this._viewer.entities.remove(entity);
+    }
+  }
+
+  /**
+   * 获取唯一 ID
+   * @param {string} prefix 前缀
+   * @returns {string}
+   */
+  generateId(prefix = 'tool') {
+    return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  }
+}

package/src/modules/tools/DeleteTool.js

@@ -0,0 +1,252 @@
+import { BaseTool } from './BaseTool.js';
+
+/**
+ * 删除模式枚举
+ */
+export const DeleteMode = {
+  SINGLE: 'single',     // 单个删除（点击删除）
+  SELECTED: 'selected'  // 删除已选择的图元
+};
+
+/**
+ * 删除工具
+ * 支持单个删除和批量删除已选择的图元
+ */
+export class DeleteTool extends BaseTool {
+  constructor(editorModule, options = {}) {
+    super(editorModule, options);
+    this._deleteMode = options.deleteMode || DeleteMode.SINGLE;
+    this._hoveredEntity = null;
+    this._hoverEntity = null; // 悬停高亮
+    this._originalStyles = new Map(); // 记录悬停前的原始样式
+  }
+
+  /**
+   * 设置删除模式
+   * @param {string} mode DeleteMode
+   */
+  setDeleteMode(mode) {
+    this._deleteMode = mode;
+    return this;
+  }
+
+  getDeleteMode() {
+    return this._deleteMode;
+  }
+
+  onActivate() {
+    this.registerObserver('mouse:click', this._onClick.bind(this));
+    this.registerObserver('mouse:move', this._onMove.bind(this));
+  }
+
+  onDeactivate() {
+    this._clearHoverHighlight();
+  }
+
+  _onClick(_lngLat, _entity, movement) {
+    const screenPos = movement.position || (movement && movement.endPosition);
+    if (!screenPos) return;
+
+    const picked = this._viewer.scene.pick({ x: screenPos.x, y: screenPos.y });
+
+    if (Cesium.defined(picked) && Cesium.defined(picked.id)) {
+      const entityId = picked.id.id;
+
+      // 忽略临时图元
+      if (entityId && entityId.startsWith('__temp_')) return;
+      if (entityId && entityId.startsWith('__edit_handle_')) return;
+
+      // 忽略编辑器自身的控制点
+      if (entityId && entityId.startsWith('__sel_')) return;
+
+      if (this._deleteMode === DeleteMode.SINGLE) {
+        this._deleteSingle(entityId);
+      }
+    }
+  }
+
+  _onMove(data) {
+    const screenPos = data.position || data.endPosition;
+    if (!screenPos) return;
+
+    const picked = this._viewer.scene.pick({ x: screenPos.x, y: screenPos.y });
+
+    let hoveredId = null;
+
+    if (Cesium.defined(picked) && Cesium.defined(picked.id)) {
+      const entityId = picked.id.id;
+      if (!entityId.startsWith('__temp_') && !entityId.startsWith('__edit_handle_')) {
+        hoveredId = entityId;
+      }
+    }
+
+    if (hoveredId !== this._hoveredEntity) {
+      this._clearHoverHighlight();
+      this._hoveredEntity = hoveredId;
+
+      if (hoveredId) {
+        this._highlightAsDeletable(hoveredId);
+      }
+    }
+  }
+
+  _deleteSingle(entityId) {
+    const entity = this._graphicModule.getGraphic(entityId);
+    if (!entity) return;
+
+    // 发送删除前事件（可撤销）
+    this._emitBeforeDelete({
+      entityId,
+      entity: entity
+    });
+
+    // 执行删除
+    this._graphicModule.removeGraphic(entityId);
+
+    // 发送删除完成事件
+    this._emitDelete({
+      entityId
+    });
+  }
+
+  /**
+   * 删除多个图元
+   * @param {string[]} entityIds 图元 ID 数组
+   */
+  deleteMultiple(entityIds) {
+    const deleted = [];
+    const failed = [];
+
+    entityIds.forEach(id => {
+      const success = this._graphicModule.removeGraphic(id);
+      if (success) {
+        deleted.push(id);
+      } else {
+        failed.push(id);
+      }
+    });
+
+    this._emitDeleteMultiple({ deleted, failed });
+
+    return { deleted, failed };
+  }
+
+  /**
+   * 删除所有图元
+   */
+  deleteAll() {
+    const allIds = [];
+    this._graphicModule.graphicMap.forEach((entity, id) => {
+      if (!id.startsWith('__temp_') && !id.startsWith('__edit_handle_')) {
+        allIds.push(id);
+      }
+    });
+
+    return this.deleteMultiple(allIds);
+  }
+
+  _highlightAsDeletable(entityId) {
+    const entity = this._graphicModule.getGraphic(entityId);
+    if (!entity) return;
+
+    this._hoverEntity = entity;
+    const styleKey = entityId;
+
+    // 红色高亮表示可删除，先保存原始样式
+    if (Cesium.defined(entity.point)) {
+      if (!this._originalStyles.has(styleKey)) {
+        this._originalStyles.set(styleKey, {
+          point: {
+            outlineColor: entity.point.outlineColor,
+            outlineWidth: entity.point.outlineWidth
+          }
+        });
+      }
+      entity.point.outlineColor = Cesium.Color.RED;
+      entity.point.outlineWidth = 3;
+    }
+
+    if (Cesium.defined(entity.polyline)) {
+      if (!this._originalStyles.has(styleKey)) {
+        this._originalStyles.set(styleKey, {
+          polyline: {
+            material: entity.polyline.material
+          }
+        });
+      }
+      entity.polyline.material = Cesium.Color.RED;
+    }
+
+    if (Cesium.defined(entity.polygon)) {
+      if (!this._originalStyles.has(styleKey)) {
+        this._originalStyles.set(styleKey, {
+          polygon: {
+            outlineColor: entity.polygon.outlineColor
+          }
+        });
+      }
+      entity.polygon.outlineColor = Cesium.Color.RED;
+    }
+
+    // 更改鼠标样式
+    if (this._viewer.container) {
+      this._viewer.container.style.cursor = 'pointer';
+    }
+  }
+
+  _clearHoverHighlight() {
+    if (!this._hoverEntity) return;
+
+    const entity = this._hoverEntity;
+    const styleKey = this._hoveredEntity;
+    const original = styleKey ? this._originalStyles.get(styleKey) : null;
+
+    // 恢复原始样式
+    if (Cesium.defined(entity.point)) {
+      if (original?.point) {
+        entity.point.outlineColor = original.point.outlineColor;
+        entity.point.outlineWidth = original.point.outlineWidth;
+      } else {
+        entity.point.outlineColor = Cesium.Color.WHITE;
+        entity.point.outlineWidth = 1;
+      }
+    }
+
+    if (Cesium.defined(entity.polyline)) {
+      entity.polyline.material = original?.polyline?.material || Cesium.Color.BLUE;
+    }
+
+    if (Cesium.defined(entity.polygon)) {
+      entity.polygon.outlineColor = original?.polygon?.outlineColor || Cesium.Color.WHITE;
+    }
+
+    // 恢复鼠标样式
+    if (this._viewer.container) {
+      this._viewer.container.style.cursor = 'default';
+    }
+
+    if (styleKey) {
+      this._originalStyles.delete(styleKey);
+    }
+    this._hoverEntity = null;
+    this._hoveredEntity = null;
+  }
+
+  _emitBeforeDelete(data) {
+    if (this._options.onBeforeDelete) {
+      this._options.onBeforeDelete(data);
+    }
+  }
+
+  _emitDelete(data) {
+    if (this._options.onDelete) {
+      this._options.onDelete(data);
+    }
+  }
+
+  _emitDeleteMultiple(data) {
+    if (this._options.onDeleteMultiple) {
+      this._options.onDeleteMultiple(data);
+    }
+  }
+}