cesium-xs-sdk 1.0.12 → 1.0.14

package/dist/cesium-xs-sdk.cjs.js

@@ -9198,17 +9198,38 @@ class ControlModule {
   }
 }
 
-const toDataUri = (svg) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
-
-/**
- * 军标内置默认图标。
- * SDK 内置常见军标类型的默认图标，业务层可通过 imgUrl / useDefaultIcon 参数覆盖或追加。
- */
-const DEFAULT_SYMBOL_IMAGES = {
-  'small-radio': toDataUri(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><circle cx="36.93" cy="48.5" r="22" style="fill:none;stroke:red;stroke-miterlimit:10;stroke-width:4.535433070866142px"/><polyline points="42.56 25.87 53.06 9.51 54.06 27.5 65.07 10.37" style="fill:none;stroke:red;stroke-linejoin:bevel;stroke-width:4.535433070866142px"/><rect width="80" height="80" style="fill:red;opacity:0"/></g></g></svg>`),
-  'large-radio': toDataUri(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon points="39.96 28.87 51.18 48.3 62.4 67.73 39.96 67.73 17.53 67.73 28.75 48.3 39.96 28.87" style="fill:none;stroke:red;stroke-miterlimit:10;stroke-width:4.535433070866142px"/><polyline points="39.96 28.64 50.46 12.27 51.46 30.27 62.47 13.14" style="fill:none;stroke:red;stroke-linejoin:bevel;stroke-width:4.535433070866142px"/><rect width="80" height="80" style="fill:red;opacity:0"/></g></g></svg>`),
+/**
+ * 军标内置默认图标。
+ * SDK 内置常见军标类型的默认图标，业务层可通过 imgUrl / useDefaultIcon 参数覆盖或追加。
+ */
+const DEFAULT_SYMBOL_SVGS = {
+    'small-radio': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><circle cx="36.93" cy="48.5" r="22" style="fill:none;stroke:red;stroke-miterlimit:10;stroke-width:4.535433070866142px"/><polyline points="42.56 25.87 53.06 9.51 54.06 27.5 65.07 10.37" style="fill:none;stroke:red;stroke-linejoin:bevel;stroke-width:4.535433070866142px"/><rect width="80" height="80" style="fill:red;opacity:0"/></g></g></svg>`,
+    'large-radio': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80"><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon points="39.96 28.87 51.18 48.3 62.4 67.73 39.96 67.73 17.53 67.73 28.75 48.3 39.96 28.87" style="fill:none;stroke:red;stroke-miterlimit:10;stroke-width:4.535433070866142px"/><polyline points="39.96 28.64 50.46 12.27 51.46 30.27 62.47 13.14" style="fill:none;stroke:red;stroke-linejoin:bevel;stroke-width:4.535433070866142px"/><rect width="80" height="80" style="fill:red;opacity:0"/></g></g></svg>`,
 };
 
+/** Blob URL 缓存，避免重复创建 */
+const blobUrlCache = new Map();
+
+/**
+ * 获取内置军标图标的 Blob URL（比 data URI 更利于 Cesium 材质加载）
+ * @param {string} type 军标类型
+ * @returns {string | null}
+ */
+function getDefaultSymbolImage(type) {
+    const svg = DEFAULT_SYMBOL_SVGS[type];
+    if (!svg) return null;
+    if (blobUrlCache.has(type)) return blobUrlCache.get(type);
+    try {
+        const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        blobUrlCache.set(type, url);
+        return url;
+    } catch (e) {
+        console.warn('生成军标图标 Blob URL 失败', e);
+        return null;
+    }
+}
+
 const Cesium$2 = getCesium();
 
 /**
@@ -9227,10 +9248,21 @@ class MilitarySymbolModule {
         this.eventModule = null;
 
         this._editMode = false;
+        this._editSymbolId = null;
+        /** @type {Map<string, {move: Cesium.Entity, scale: Cesium.Entity, rotate: Cesium.Entity}>} */
+        this._editHandles = new Map();
         this._draggingId = null;
+        this._draggingHandle = null;
+        this._dragStartScreen = null;
+        this._dragStartScale = 1;
+        this._dragStartRotation = 0;
+        this._dragStartDist = 0;
+        this._dragStartAngle = 0;
         this._dragObserverIds = [];
         /** @type {Set<Function>} */
         this._positionChangedCallbacks = new Set();
+        /** @type {Set<Function>} */
+        this._transformChangedCallbacks = new Set();
     }
 
     /**
@@ -9287,7 +9319,7 @@ class MilitarySymbolModule {
     _resolveImage(id, options) {
         const globalMode = this._defaultIconMode || this.config.militarySymbol?.defaultIconMode;
         const mode = options.iconMode || globalMode || 'default';
-        const defaultImage = DEFAULT_SYMBOL_IMAGES[options.type];
+        const defaultImage = getDefaultSymbolImage(options.type);
         const registeredImage = this.defaultImageMap.get(options.type);
         const imgUrl = options.imgUrl || registeredImage || null;
 
@@ -9330,7 +9362,10 @@ class MilitarySymbolModule {
     _loadImage(url) {
         return new Promise((resolve, reject) => {
             const img = new Image();
-            img.crossOrigin = 'anonymous';
+            // data URI / blob URL 等同源资源不需要 crossOrigin；跨域 http 资源需要
+            if (url && /^https?:\/\//.test(url)) {
+                img.crossOrigin = 'anonymous';
+            }
             img.onload = () => resolve(img);
             img.onerror = (e) => reject(e);
             img.src = url;
@@ -9384,6 +9419,131 @@ class MilitarySymbolModule {
         return this.symbolMap.has(id) ? id : null;
     }
 
+    /**
+     * 根据鼠标拾取结果判断是否为编辑控制点
+     * @private
+     */
+    _getHandleType(pickedEntity) {
+        if (!pickedEntity) return null;
+        const id = typeof pickedEntity.id === 'string' ? pickedEntity.id : pickedEntity.id?.id;
+        if (!id) return null;
+        if (id.endsWith('_move')) return 'move';
+        if (id.endsWith('_scale')) return 'scale';
+        if (id.endsWith('_rotate')) return 'rotate';
+        return null;
+    }
+
+    /**
+     * 计算编辑控制点的三维坐标
+     * @private
+     */
+    _getHandlePositions(position) {
+        const center = Cesium$2.Cartesian3.fromDegrees(position[0], position[1], position[2] || 0);
+        const matrix = Cesium$2.Transforms.eastNorthUpToFixedFrame(center);
+        const offsetMeters = 120;
+        const scaleOffset = Cesium$2.Matrix4.multiplyByPoint(
+            matrix,
+            new Cesium$2.Cartesian3(offsetMeters, 0, 0),
+            new Cesium$2.Cartesian3()
+        );
+        const rotateOffset = Cesium$2.Matrix4.multiplyByPoint(
+            matrix,
+            new Cesium$2.Cartesian3(0, offsetMeters, 0),
+            new Cesium$2.Cartesian3()
+        );
+        return { center, scale: scaleOffset, rotate: rotateOffset };
+    }
+
+    /**
+     * 为指定军标创建编辑控制点
+     * @private
+     */
+    _createEditHandles(symbolId) {
+        this._removeEditHandles(symbolId);
+        const symbol = this.symbolMap.get(symbolId);
+        if (!symbol) return;
+
+        const positions = this._getHandlePositions(symbol.metadata.position);
+        const commonPoint = {
+            pixelSize: 14,
+            outlineColor: Cesium$2.Color.WHITE,
+            outlineWidth: 2,
+            heightReference: Cesium$2.HeightReference.CLAMP_TO_GROUND,
+        };
+        const commonLabel = {
+            font: '12px Microsoft YaHei',
+            fillColor: Cesium$2.Color.WHITE,
+            outlineColor: Cesium$2.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium$2.LabelStyle.FILL_AND_OUTLINE,
+            verticalOrigin: Cesium$2.VerticalOrigin.BOTTOM,
+            horizontalOrigin: Cesium$2.HorizontalOrigin.CENTER,
+            pixelOffset: new Cesium$2.Cartesian2(0, -10),
+            heightReference: Cesium$2.HeightReference.CLAMP_TO_GROUND,
+        };
+
+        const handles = {};
+        handles.move = this.viewer.entities.add({
+            id: `${symbolId}_move`,
+            position: positions.center,
+            point: { ...commonPoint, color: Cesium$2.Color.LIME },
+            label: { ...commonLabel, text: '移动' },
+        });
+        handles.scale = this.viewer.entities.add({
+            id: `${symbolId}_scale`,
+            position: positions.scale,
+            point: { ...commonPoint, color: Cesium$2.Color.DEEPSKYBLUE },
+            label: { ...commonLabel, text: '缩放' },
+        });
+        handles.rotate = this.viewer.entities.add({
+            id: `${symbolId}_rotate`,
+            position: positions.rotate,
+            point: { ...commonPoint, color: Cesium$2.Color.RED },
+            label: { ...commonLabel, text: '旋转' },
+        });
+
+        this._editHandles.set(symbolId, handles);
+    }
+
+    /**
+     * 移除指定军标的编辑控制点
+     * @private
+     */
+    _removeEditHandles(symbolId) {
+        const handles = this._editHandles.get(symbolId);
+        if (!handles) return;
+        Object.values(handles).forEach((entity) => {
+            if (entity) this.viewer.entities.remove(entity);
+        });
+        this._editHandles.delete(symbolId);
+    }
+
+    /**
+     * 更新控制点位置以跟随军标
+     * @private
+     */
+    _updateHandlePositions(symbolId) {
+        const symbol = this.symbolMap.get(symbolId);
+        const handles = this._editHandles.get(symbolId);
+        if (!symbol || !handles) return;
+        const positions = this._getHandlePositions(symbol.metadata.position);
+        handles.move.position = positions.center;
+        handles.scale.position = positions.scale;
+        handles.rotate.position = positions.rotate;
+    }
+
+    /**
+     * 将 WGS84 坐标转换为屏幕坐标
+     * @private
+     */
+    _cartesianToScreen(cartesian) {
+        if (!cartesian) return null;
+        try {
+            return Cesium$2.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, cartesian);
+        } catch (e) {
+            return null;
+        }
+    }
     /**
      * 创建军标图元
      * @param {string} id 军标唯一ID
@@ -9394,6 +9554,7 @@ class MilitarySymbolModule {
      * @param {string} [options.imgUrl] 自定义图标 URL
      * @param {'default'|'custom'|'overlay'} [options.iconMode] 图标模式，默认 'default'
      * @param {number} [options.scale] billboard 缩放，默认 0.6
+     * @param {number} [options.rotation] billboard 旋转角度（度），默认 0
      * @param {boolean} [options.visible] 是否可见，默认 true
      * @returns {{id: string, entity: Cesium.Entity, metadata: object}}
      */
@@ -9406,6 +9567,7 @@ class MilitarySymbolModule {
         const position = options.position || [0, 0, 0];
         const image = this._resolveImage(id, options);
         const scale = options.scale ?? 0.6;
+        const rotation = options.rotation ?? 0;
         const visible = options.visible !== false;
         const name = options.name ?? id;
         const iconMode = options.iconMode || 'default';
@@ -9416,10 +9578,10 @@ class MilitarySymbolModule {
             billboard: {
                 image,
                 scale,
+                rotation: Cesium$2.Math.toRadians(rotation),
                 verticalOrigin: Cesium$2.VerticalOrigin.BOTTOM,
                 horizontalOrigin: Cesium$2.HorizontalOrigin.CENTER,
                 heightReference: Cesium$2.HeightReference.CLAMP_TO_GROUND,
-                disableDepthTestDistance: 100000,
             },
             label: {
                 text: name,
@@ -9432,7 +9594,6 @@ class MilitarySymbolModule {
                 horizontalOrigin: Cesium$2.HorizontalOrigin.CENTER,
                 pixelOffset: new Cesium$2.Cartesian2(0, 4),
                 heightReference: Cesium$2.HeightReference.CLAMP_TO_GROUND,
-                disableDepthTestDistance: 100000,
                 show: true,
             },
             show: visible,
@@ -9444,6 +9605,7 @@ class MilitarySymbolModule {
             name,
             position: [position[0], position[1], position[2] || 0],
             scale,
+            rotation,
             visible,
             iconMode,
             imgUrl: options.imgUrl || null,
@@ -9465,6 +9627,10 @@ class MilitarySymbolModule {
             return false;
         }
         this.viewer.entities.remove(symbol.entity);
+        this._removeEditHandles(id);
+        if (this._editSymbolId === id) {
+            this.disableEditMode();
+        }
         this.symbolMap.delete(id);
         if (this._draggingId === id) {
             this._draggingId = null;
@@ -9477,6 +9643,11 @@ class MilitarySymbolModule {
      * 删除所有军标
      */
     removeAll() {
+        this._editHandles.forEach((_, id) => this._removeEditHandles(id));
+        this._editHandles.clear();
+        if (this._editMode) {
+            this.disableEditMode();
+        }
         this.symbolMap.forEach((symbol) => {
             this.viewer.entities.remove(symbol.entity);
         });
@@ -9488,7 +9659,7 @@ class MilitarySymbolModule {
     /**
      * 更新军标属性
      * @param {string} id 军标ID
-     * @param {Object} fields 支持 position / name / scale / imgUrl / visible
+     * @param {Object} fields 支持 position / name / scale / rotation / imgUrl / visible
      * @returns {boolean} 是否更新成功
      */
     update(id, fields = {}) {
@@ -9516,6 +9687,11 @@ class MilitarySymbolModule {
             metadata.scale = fields.scale;
         }
 
+        if (fields.rotation !== undefined) {
+            entity.billboard.rotation = Cesium$2.Math.toRadians(fields.rotation);
+            metadata.rotation = fields.rotation;
+        }
+
         if (fields.imgUrl !== undefined || fields.iconMode !== undefined) {
             const newIconMode = fields.iconMode || metadata.iconMode;
             const newImgUrl = fields.imgUrl !== undefined ? fields.imgUrl : metadata.imgUrl;
@@ -9595,13 +9771,14 @@ class MilitarySymbolModule {
         const pitch = options.pitch ?? -Cesium$2.Math.PI_OVER_TWO;
         const range = options.range ?? 5000;
 
-        return this.viewer.camera.flyTo({
-            destination: Cesium$2.Cartesian3.fromDegrees(position[0], position[1], (position[2] || 0) + range),
-            orientation: { heading: 0, pitch, roll: 0 },
-            duration,
-        }).then(() => true).catch((err) => {
-            console.error('军标定位失败', err);
-            return false;
+        return new Promise((resolve) => {
+            this.viewer.camera.flyTo({
+                destination: Cesium$2.Cartesian3.fromDegrees(position[0], position[1], (position[2] || 0) + range),
+                orientation: { heading: 0, pitch, roll: 0 },
+                duration,
+                complete: () => resolve(true),
+                cancel: () => resolve(false),
+            });
         });
     }
 
@@ -9627,49 +9804,115 @@ class MilitarySymbolModule {
     }
 
     /**
-     * 启用拖拽编辑模式
-     * 鼠标在军标上按下即可拖拽，拖拽结束后触发 onPositionChanged 回调。
+     * 启用军标编辑模式（生成移动/缩放/旋转控制点）
+     * @param {string} id 要编辑的军标ID
      */
-    enableEditMode() {
-        if (this._editMode) return;
+    enableEditMode(id) {
+        if (this._editMode) {
+            if (this._editSymbolId === id) return;
+            this.disableEditMode();
+        }
+        if (!this.symbolMap.has(id)) {
+            console.warn(`军标 ${id} 不存在，无法启用编辑`);
+            return;
+        }
         if (!this.eventModule) {
-            console.warn('MilitarySymbolModule 未注入 EventModule，无法启用拖拽编辑');
+            console.warn('MilitarySymbolModule 未注入 EventModule，无法启用编辑');
             return;
         }
 
         this._editMode = true;
+        this._editSymbolId = id;
+        this._createEditHandles(id);
+
+        const downId = this.eventModule.registerObserver('mouse:down', (lngLat, pickedEntity, movement) => {
+            const handleType = this._getHandleType(pickedEntity);
+            let symbolId = null;
+            if (handleType) {
+                symbolId = this._editSymbolId;
+            } else {
+                symbolId = this._getSymbolIdFromPick(pickedEntity);
+            }
+            if (!symbolId || symbolId !== this._editSymbolId) return;
+
+            const symbol = this.symbolMap.get(symbolId);
+            const centerScreen = this._cartesianToScreen(symbol.entity.position.getValue(Cesium$2.JulianDate.now()));
+            const mouseScreen = movement.position;
+            if (centerScreen && mouseScreen) {
+                const dx = mouseScreen.x - centerScreen.x;
+                const dy = mouseScreen.y - centerScreen.y;
+                this._dragStartDist = Math.hypot(dx, dy);
+                this._dragStartAngle = Math.atan2(dx, -dy);
+            } else {
+                this._dragStartDist = 0;
+                this._dragStartAngle = 0;
+            }
 
-        const downId = this.eventModule.registerObserver('mouse:down', (lngLat, pickedEntity) => {
-            const symbolId = this._getSymbolIdFromPick(pickedEntity);
-            if (!symbolId) return;
             this._draggingId = symbolId;
+            this._draggingHandle = handleType || 'move';
+            this._dragStartScale = symbol.metadata.scale;
+            this._dragStartRotation = symbol.metadata.rotation || 0;
             this.viewer.scene.screenSpaceCameraController.enableInputs = false;
         });
 
         const moveId = this.eventModule.registerObserver('mouse:move', (lngLat, pickedEntity, movement) => {
             if (!this._draggingId || !movement?.endPosition) return;
 
-            const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
-                || this.viewer.scene.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);
-            if (!cartesian) return;
-
-            const carto = Cesium$2.Cartographic.fromCartesian(cartesian);
-            const position = [
-                Cesium$2.Math.toDegrees(carto.longitude),
-                Cesium$2.Math.toDegrees(carto.latitude),
-                carto.height,
-            ];
-            this.update(this._draggingId, { position });
+            const symbol = this.symbolMap.get(this._draggingId);
+            if (!symbol) return;
+
+            if (this._draggingHandle === 'move') {
+                const cartesian = this.viewer.scene.pickPosition(movement.endPosition)
+                    || this.viewer.scene.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);
+                if (!cartesian) return;
+
+                const carto = Cesium$2.Cartographic.fromCartesian(cartesian);
+                const position = [
+                    Cesium$2.Math.toDegrees(carto.longitude),
+                    Cesium$2.Math.toDegrees(carto.latitude),
+                    carto.height,
+                ];
+                this.update(this._draggingId, { position });
+                this._updateHandlePositions(this._draggingId);
+            } else if (this._draggingHandle === 'scale') {
+                const centerScreen = this._cartesianToScreen(symbol.entity.position.getValue(Cesium$2.JulianDate.now()));
+                if (!centerScreen) return;
+                const dx = movement.endPosition.x - centerScreen.x;
+                const dy = movement.endPosition.y - centerScreen.y;
+                const dist = Math.hypot(dx, dy);
+                const ratio = this._dragStartDist > 0 ? dist / this._dragStartDist : 1;
+                const newScale = Math.max(0.1, this._dragStartScale * ratio);
+                this.update(this._draggingId, { scale: newScale });
+            } else if (this._draggingHandle === 'rotate') {
+                const centerScreen = this._cartesianToScreen(symbol.entity.position.getValue(Cesium$2.JulianDate.now()));
+                if (!centerScreen) return;
+                const dx = movement.endPosition.x - centerScreen.x;
+                const dy = movement.endPosition.y - centerScreen.y;
+                const angle = Math.atan2(dx, -dy);
+                const deltaDeg = Cesium$2.Math.toDegrees(angle - this._dragStartAngle);
+                let newRotation = this._dragStartRotation + deltaDeg;
+                newRotation = ((newRotation % 360) + 360) % 360;
+                this.update(this._draggingId, { rotation: newRotation });
+            }
         });
 
         const upId = this.eventModule.registerObserver('mouse:up', () => {
             if (!this._draggingId) return;
             const symbol = this.symbolMap.get(this._draggingId);
-            const payload = symbol ? { id: this._draggingId, position: [...symbol.metadata.position] } : null;
+            const payload = symbol
+                ? {
+                    id: this._draggingId,
+                    position: [...symbol.metadata.position],
+                    scale: symbol.metadata.scale,
+                    rotation: symbol.metadata.rotation,
+                }
+                : null;
             this._draggingId = null;
+            this._draggingHandle = null;
             this.viewer.scene.screenSpaceCameraController.enableInputs = true;
             if (payload) {
-                this._positionChangedCallbacks.forEach((callback) => callback(payload));
+                this._positionChangedCallbacks.forEach((callback) => callback({ id: payload.id, position: payload.position }));
+                this._transformChangedCallbacks.forEach((callback) => callback(payload));
             }
         });
 
@@ -9677,13 +9920,12 @@ class MilitarySymbolModule {
     }
 
     /**
-     * 禁用拖拽编辑模式
+     * 禁用军标编辑模式
      */
     disableEditMode() {
         if (!this._editMode) return;
         if (this.eventModule) {
             this._dragObserverIds.forEach((observerId) => {
-                // 每个观察者注册时的事件类型固定，分别注销
                 ['mouse:down', 'mouse:move', 'mouse:up'].forEach((eventType) => {
                     try {
                         this.eventModule.unregisterObserver(eventType, observerId);
@@ -9694,13 +9936,18 @@ class MilitarySymbolModule {
             });
         }
         this._dragObserverIds = [];
+        if (this._editSymbolId) {
+            this._removeEditHandles(this._editSymbolId);
+        }
+        this._editSymbolId = null;
         this._draggingId = null;
+        this._draggingHandle = null;
         this.viewer.scene.screenSpaceCameraController.enableInputs = true;
         this._editMode = false;
     }
 
     /**
-     * 注册位置变化回调
+     * 注册位置变化回调（仅位置）
      * @param {Function} callback 回调参数 { id, position }
      * @returns {Function} 注销函数
      */
@@ -9708,6 +9955,16 @@ class MilitarySymbolModule {
         this._positionChangedCallbacks.add(callback);
         return () => this._positionChangedCallbacks.delete(callback);
     }
+
+    /**
+     * 注册变换变化回调（位置、缩放、旋转）
+     * @param {Function} callback 回调参数 { id, position, scale, rotation }
+     * @returns {Function} 注销函数
+     */
+    onTransformChanged(callback) {
+        this._transformChangedCallbacks.add(callback);
+        return () => this._transformChangedCallbacks.delete(callback);
+    }
 }
 
 /**