cesium-xs-sdk 1.0.0

package/src/modules/EditorModule.js

@@ -0,0 +1,370 @@
+import { Config } from '../core/Config.js';
+import { DrawTool, DrawType } from './tools/DrawTool.js';
+import { EditTool, EditMode } from './tools/EditTool.js';
+import { SelectTool, SelectType } from './tools/SelectTool.js';
+import { DeleteTool, DeleteMode } from './tools/DeleteTool.js';
+
+/**
+ * 工具名称枚举
+ */
+export const ToolName = {
+  DRAW: 'draw',
+  EDIT: 'edit',
+  SELECT: 'select',
+  DELETE: 'delete'
+};
+
+/**
+ * 编辑器模块
+ * 负责工具的注册、切换、激活管理
+ */
+export class EditorModule {
+  constructor(viewer, options = {}) {
+    this.viewer = viewer;
+    this.config = Config.getInstance().getConfig();
+    this.graphicModule = null;  // 依赖注入
+    this.eventModule = null;     // 依赖注入
+    this.toolMap = new Map();   // 工具缓存
+    this.currentTool = null;    // 当前激活的工具
+    this.currentToolName = null;
+    this._isActive = false;
+  }
+
+  /**
+   * 设置依赖模块
+   * @param {object} deps 依赖模块 { graphicModule, eventModule }
+   */
+  setDependencies(deps) {
+    this.graphicModule = deps.graphicModule;
+    this.eventModule = deps.eventModule;
+    return this;
+  }
+
+  /**
+   * 初始化编辑器，注册所有内置工具
+   */
+  init() {
+    // 注册内置工具
+    this.registerTool(ToolName.DRAW, new DrawTool(this));
+    this.registerTool(ToolName.EDIT, new EditTool(this));
+    this.registerTool(ToolName.SELECT, new SelectTool(this));
+    this.registerTool(ToolName.DELETE, new DeleteTool(this));
+
+    return this;
+  }
+
+  /**
+   * 注册工具
+   * @param {string} name 工具名称
+   * @param {BaseTool} tool 工具实例
+   * @returns {EditorModule}
+   */
+  registerTool(name, tool) {
+    this.toolMap.set(name, tool);
+    return this;
+  }
+
+  /**
+   * 获取工具
+   * @param {string} name 工具名称
+   * @returns {BaseTool|undefined}
+   */
+  getTool(name) {
+    return this.toolMap.get(name);
+  }
+
+  /**
+   * 获取当前激活的工具
+   * @returns {BaseTool|null}
+   */
+  getCurrentTool() {
+    return this.currentTool;
+  }
+
+  /**
+   * 获取当前激活的工具名称
+   * @returns {string|null}
+   */
+  getCurrentToolName() {
+    return this.currentToolName;
+  }
+
+  /**
+   * 激活指定工具
+   * @param {string} name 工具名称
+   * @returns {EditorModule}
+   */
+  activateTool(name) {
+    const tool = this.toolMap.get(name);
+    if (!tool) {
+      console.warn(`工具 ${name} 未注册`);
+      return this;
+    }
+
+    // 停用当前工具
+    if (this.currentTool) {
+      this.currentTool.deactivate();
+    }
+
+    // 激活新工具
+    this.currentTool = tool;
+    this.currentToolName = name;
+    this.currentTool.activate();
+    this._isActive = true;
+
+    console.log(`工具 ${name} 已激活`);
+    return this;
+  }
+
+  /**
+   * 停用当前工具
+   * @returns {EditorModule}
+   */
+  deactivateTool() {
+    if (this.currentTool) {
+      this.currentTool.deactivate();
+    }
+    this.currentTool = null;
+    this.currentToolName = null;
+    this._isActive = false;
+
+    return this;
+  }
+
+  /**
+   * 激活绘制工具并设置类型
+   * @param {string} type 绘制类型 DrawType
+   * @returns {EditorModule}
+   */
+  activateDrawTool(type = DrawType.POINT) {
+    const drawTool = this.toolMap.get(ToolName.DRAW);
+    if (drawTool) {
+      drawTool.setDrawType(type);
+    }
+    return this.activateTool(ToolName.DRAW);
+  }
+
+  /**
+   * 激活选择工具并设置类型
+   * @param {string} type 选择类型 SelectType
+   * @returns {EditorModule}
+   */
+  activateSelectTool(type = SelectType.POINT) {
+    const selectTool = this.toolMap.get(ToolName.SELECT);
+    if (selectTool) {
+      selectTool.setSelectType(type);
+    }
+    return this.activateTool(ToolName.SELECT);
+  }
+
+  /**
+   * 激活编辑工具并设置模式
+   * @param {string} mode 编辑模式 EditMode
+   * @returns {EditorModule}
+   */
+  activateEditTool(mode = EditMode.VERTEX) {
+    const editTool = this.toolMap.get(ToolName.EDIT);
+    if (editTool) {
+      editTool.setEditMode(mode);
+    }
+    return this.activateTool(ToolName.EDIT);
+  }
+
+  /**
+   * 激活删除工具并设置模式
+   * @param {string} mode 删除模式 DeleteMode
+   * @returns {EditorModule}
+   */
+  activateDeleteTool(mode = DeleteMode.SINGLE) {
+    const deleteTool = this.toolMap.get(ToolName.DELETE);
+    if (deleteTool) {
+      deleteTool.setDeleteMode(mode);
+    }
+    return this.activateTool(ToolName.DELETE);
+  }
+
+  /**
+   * 获取绘制工具（快捷方法）
+   * @returns {DrawTool}
+   */
+  getDrawTool() {
+    return this.toolMap.get(ToolName.DRAW);
+  }
+
+  /**
+   * 获取选择工具（快捷方法）
+   * @returns {SelectTool}
+   */
+  getSelectTool() {
+    return this.toolMap.get(ToolName.SELECT);
+  }
+
+  /**
+   * 获取编辑工具（快捷方法）
+   * @returns {EditTool}
+   */
+  getEditTool() {
+    return this.toolMap.get(ToolName.EDIT);
+  }
+
+  /**
+   * 获取删除工具（快捷方法）
+   * @returns {DeleteTool}
+   */
+  getDeleteTool() {
+    return this.toolMap.get(ToolName.DELETE);
+  }
+
+  // ========== 公开回调 setter ==========
+
+  /**
+   * 设置绘制完成回调
+   * @param {Function} callback
+   */
+  onDrawComplete(callback) {
+    this.getDrawTool()._options.onGraphicCreated = callback;
+    return this;
+  }
+
+  /**
+   * 设置绘制进度回调
+   * @param {Function} callback
+   */
+  onDrawProgress(callback) {
+    this.getDrawTool()._options.onDrawProgress = callback;
+    return this;
+  }
+
+  /**
+   * 设置绘制取消回调
+   * @param {Function} callback
+   */
+  onDrawCancel(callback) {
+    this.getDrawTool()._options.onDrawCancel = callback;
+    return this;
+  }
+
+  /**
+   * 设置编辑完成回调
+   * @param {Function} callback
+   */
+  onEditComplete(callback) {
+    this.getEditTool()._options.onEditComplete = callback;
+    return this;
+  }
+
+  /**
+   * 设置编辑选中回调
+   * @param {Function} callback
+   */
+  onEditSelect(callback) {
+    this.getEditTool()._options.onSelect = callback;
+    return this;
+  }
+
+  /**
+   * 设置选择回调
+   * @param {Function} callback
+   */
+  onSelect(callback) {
+    this.getSelectTool()._options.onSelect = callback;
+    return this;
+  }
+
+  /**
+   * 设置选择变化回调
+   * @param {Function} callback
+   */
+  onSelectionChange(callback) {
+    this.getSelectTool()._options.onSelectionChange = callback;
+    return this;
+  }
+
+  /**
+   * 设置框选完成回调
+   * @param {Function} callback
+   */
+  onSelectionComplete(callback) {
+    this.getSelectTool()._options.onSelectionComplete = callback;
+    return this;
+  }
+
+  /**
+   * 设置删除前回调
+   * @param {Function} callback
+   */
+  onBeforeDelete(callback) {
+    this.getDeleteTool()._options.onBeforeDelete = callback;
+    return this;
+  }
+
+  /**
+   * 设置删除完成回调
+   * @param {Function} callback
+   */
+  onDelete(callback) {
+    this.getDeleteTool()._options.onDelete = callback;
+    return this;
+  }
+
+  /**
+   * 设置批量删除完成回调
+   * @param {Function} callback
+   */
+  onDeleteMultiple(callback) {
+    this.getDeleteTool()._options.onDeleteMultiple = callback;
+    return this;
+  }
+
+  /**
+   * 获取所有已选择的图元 ID（需要先使用选择工具）
+   * @returns {string[]}
+   */
+  getSelectedIds() {
+    const selectTool = this.getSelectTool();
+    if (selectTool) {
+      return selectTool.getSelectedIds();
+    }
+    return [];
+  }
+
+  /**
+   * 删除所有已选择的图元
+   * @returns {object} { deleted, failed }
+   */
+  deleteSelected() {
+    const selectTool = this.getSelectTool();
+    if (selectTool) {
+      const ids = selectTool.getSelectedIds();
+      const deleteTool = this.getDeleteTool();
+      if (deleteTool) {
+        return deleteTool.deleteMultiple(ids);
+      }
+    }
+    return { deleted: [], failed: [] };
+  }
+
+  /**
+   * 检查编辑器是否处于激活状态
+   * @returns {boolean}
+   */
+  isActive() {
+    return this._isActive;
+  }
+
+  /**
+   * 销毁编辑器
+   */
+  destroy() {
+    this.deactivateTool();
+    this.toolMap.clear();
+    this.graphicModule = null;
+    this.eventModule = null;
+  }
+}
+
+// 导出工具类型枚举
+export { DrawType } from './tools/DrawTool.js';
+export { EditMode } from './tools/EditTool.js';
+export { SelectType } from './tools/SelectTool.js';
+export { DeleteMode } from './tools/DeleteTool.js';

package/src/modules/EventModule.js

@@ -0,0 +1,211 @@
+import { Config } from '../core/Config.js';
+
+/**
+ * 事件模块（对应平台 IEventModule）
+ * 职责：注册/注销鼠标、键盘、场景事件观察者
+ */
+export class EventModule {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.config = Config.getInstance().getConfig();
+        this.observers = new Map(); // 观察者缓存（事件类型 -> 回调列表）
+        this.handlers = {}; // Cesium 事件处理器缓存
+    }
+
+    /**
+     * 注册事件观察者（对齐平台 Observer 模式）
+     * @param {string} eventType 事件类型
+     *                           - mouse:click/move/down/up
+     *                           - keyboard:keyup/keydown
+     *                           - scene:load/change/zoom
+     * @param {Function} callback 回调函数
+     * @returns {string} 观察者ID（用于注销）
+     * @example
+     * // 注册鼠标点击事件
+     * const observerId = eventModule.registerObserver('mouse:click', (position, entity) => {
+     *   console.log('点击位置：', position, '点击实体：', entity);
+     * });
+     */
+    registerObserver(eventType, callback) {
+        const observerId = `obs-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        const [baseType, subType] = eventType.split(':');
+
+        // 初始化观察者列表
+        if (!this.observers.has(eventType)) {
+            this.observers.set(eventType, new Map());
+            // 创建 Cesium 事件处理器
+            this.createEventHandler(baseType, subType);
+        }
+
+        // 存储观察者
+        this.observers.get(eventType).set(observerId, callback);
+        return observerId;
+    }
+
+    /**
+     * 注销事件观察者
+     * @param {string} eventType 事件类型
+     * @param {string} observerId 观察者ID
+     * @returns {boolean} 是否注销成功
+     */
+    unregisterObserver(eventType, observerId) {
+        if (!this.observers.has(eventType)) return false;
+        const typeObservers = this.observers.get(eventType);
+        if (!typeObservers.has(observerId)) return false;
+
+        typeObservers.delete(observerId);
+        // 无观察者时销毁事件处理器
+        if (typeObservers.size === 0) {
+            this.destroyEventHandler(eventType);
+            this.observers.delete(eventType);
+        }
+        return true;
+    }
+
+    /**
+     * 注销所有事件观察者
+     */
+    unregisterAllObservers() {
+        // 按处理器类型安全销毁
+        Object.keys(this.handlers).forEach(eventKey => {
+            const handler = this.handlers[eventKey];
+            if (!handler) return;
+
+            // 判断事件类型：mouse 处理器是 ScreenSpaceEventHandler；
+            // scene 处理器是 addEventListener 返回的移除函数；
+            // keyboard 处理器是 document 事件监听器，需通过存储的引用移除。
+            const [baseType] = eventKey.split(':');
+            if (baseType === 'mouse' && typeof handler.destroy === 'function') {
+                handler.destroy();
+            } else if (baseType === 'scene' && typeof handler === 'function') {
+                handler();
+            } else if (baseType === 'keyboard') {
+                const subType = eventKey.split(':')[1];
+                document.removeEventListener(subType, handler);
+            }
+        });
+        this.handlers = {};
+        this.observers.clear();
+    }
+
+    // ========== 内部方法：创建 Cesium 事件处理器 ==========
+    createEventHandler(baseType, subType) {
+        const eventKey = `${baseType}:${subType}`;
+        if (this.handlers[eventKey]) return;
+
+        switch (baseType) {
+            // 鼠标事件
+            case 'mouse':
+                this.handlers[eventKey] = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+                // 绑定鼠标事件
+                const mouseEventType = this.getCesiumMouseEventType(subType);
+                this.handlers[eventKey].setInputAction((movement) => {
+                    // 获取点击位置和实体
+                    const screenPos = movement.position || movement.endPosition;
+                    if (!screenPos) return;
+
+                    let position = null;
+                    let lngLat = null;
+
+                    try {
+                        position = this.viewer.scene.pickPosition(screenPos);
+                    } catch (e) {
+                        // pickPosition 可能在无效情况下抛出异常
+                        console.warn('获取点击位置失败：', e);
+                    }
+
+                    const pickedEntity = this.viewer.scene.pick(screenPos);
+
+                    if (position) {
+                        const cartographic = Cesium.Cartographic.fromCartesian(position);
+                        lngLat = [
+                            Cesium.Math.toDegrees(cartographic.longitude),
+                            Cesium.Math.toDegrees(cartographic.latitude),
+                            cartographic.height
+                        ];
+                    }
+
+                    // 触发所有观察者回调
+                    this.observers.get(eventKey).forEach(callback => {
+                        callback(lngLat, pickedEntity ? pickedEntity.id : null, movement);
+                    });
+                }, mouseEventType);
+                break;
+            // 场景事件
+            case 'scene':
+                if (subType === 'load') {
+                    // 一次性加载事件：第一次 postRender 触发后自动移除
+                    let removeListener = null;
+                    const listener = () => {
+                        if (removeListener) {
+                            removeListener();
+                            removeListener = null;
+                        }
+                        this.observers.get(eventKey)?.forEach(callback => callback());
+                    };
+                    removeListener = this.viewer.scene.postRender.addEventListener(listener);
+                    this.handlers[eventKey] = removeListener;
+                } else if (subType === 'zoom') {
+                    this.handlers[eventKey] = this.viewer.camera.changed.addEventListener(() => {
+                        const zoomLevel = this.getZoomLevel();
+                        this.observers.get(eventKey).forEach(callback => callback(zoomLevel));
+                    });
+                }
+                break;
+            // 键盘事件
+            case 'keyboard':
+                this.handlers[eventKey] = (e) => {
+                    if (e.type === subType) {
+                        this.observers.get(eventKey).forEach(callback => callback(e));
+                    }
+                };
+                document.addEventListener(subType, this.handlers[eventKey]);
+                break;
+        }
+    }
+
+    // ========== 内部方法：销毁事件处理器 ==========
+    destroyEventHandler(eventType) {
+        const [baseType, subType] = eventType.split(':');
+        const eventKey = eventType;
+
+        if (!this.handlers[eventKey]) return;
+        if (baseType === 'mouse') {
+            this.handlers[eventKey].destroy();
+        } else if (baseType === 'scene') {
+            // scene 事件返回的是移除函数
+            if (typeof this.handlers[eventKey] === 'function') {
+                this.handlers[eventKey]();
+            }
+        } else if (baseType === 'keyboard') {
+            document.removeEventListener(subType, this.handlers[eventKey]);
+        }
+        delete this.handlers[eventKey];
+    }
+
+    // ========== 工具方法：映射 Cesium 鼠标事件类型 ==========
+    getCesiumMouseEventType(subType) {
+        switch (subType) {
+            case 'click': return Cesium.ScreenSpaceEventType.LEFT_CLICK;
+            case 'rightclick': return Cesium.ScreenSpaceEventType.RIGHT_CLICK;
+            case 'move': return Cesium.ScreenSpaceEventType.MOUSE_MOVE;
+            case 'down': return Cesium.ScreenSpaceEventType.LEFT_DOWN;
+            case 'up': return Cesium.ScreenSpaceEventType.LEFT_UP;
+            default: return Cesium.ScreenSpaceEventType.LEFT_CLICK;
+        }
+    }
+
+    // ========== 工具方法：获取场景缩放级别 ==========
+    getZoomLevel() {
+        const camera = this.viewer.camera;
+        const positionCartographic = camera.positionCartographic;
+        const positionCartesian = Cesium.Cartesian3.fromRadians(
+            positionCartographic.longitude,
+            positionCartographic.latitude,
+            positionCartographic.height
+        );
+        const distance = Cesium.Cartesian3.distance(camera.position, positionCartesian);
+        // 映射为 0-20 级缩放（类似地图瓦片级别）
+        return Math.floor(Math.log2(6378137 * 2 * Math.PI / distance)) + 1;
+    }
+}