@hzab/map-combine 0.4.2-alpha.1 → 0.4.2-alpha.12

package/src/cesium/CesiumLayer.ts

@@ -0,0 +1,365 @@
+import { Layer } from "../basic/Layer";
+import { CesiumMap } from "./CesiumMap";
+import { arrayFillByLen } from "../utils";
+import { LayerOption } from "../basic/Layer";
+
+/**
+ * 创建影像提供器
+ * @param layer
+ * @returns
+ */
+function createImageryProvider(layer: Layer) {
+  const options = layer._option as LayerOption;
+
+  // 创建 URL 模板影像提供器
+  const imageryProvider = new Cesium.UrlTemplateImageryProvider({
+    url: options.src,
+    maximumLevel: options.maxZoom || 22,
+    minimumLevel: options.minZoom || 0,
+  });
+
+  return imageryProvider;
+}
+
+/**
+ * 更新变换矩阵
+ * @param imageryProvider
+ * @param layer
+ * @param origin
+ * @returns
+ */
+function updateTransform(imageryProvider: any, layer: Layer, origin: any) {
+  const options = layer._option as LayerOption;
+
+  // 获取影像提供器的边界球中心作为变换原点
+  let transformOrigin = origin;
+  if (!transformOrigin) {
+    const cartographic = Cesium.Cartographic.fromCartesian(imageryProvider.boundingSphere.center);
+    transformOrigin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
+  }
+
+  // 重置模型矩阵
+  imageryProvider.modelMatrix = Cesium.Matrix4.IDENTITY.clone();
+
+  // 1. 位移到目标位置（如果有坐标）
+  if (layer.coordinates && layer.coordinates.length >= 2) {
+    const [lng, lat, height = 0] = layer.coordinates;
+    const target = Cesium.Cartesian3.fromDegrees(lng, lat, height);
+    const offset = Cesium.Cartesian3.subtract(target, transformOrigin, new Cesium.Cartesian3());
+    const translateMatrix = Cesium.Matrix4.fromTranslation(offset);
+    imageryProvider.modelMatrix = Cesium.Matrix4.multiply(
+      translateMatrix,
+      imageryProvider.modelMatrix,
+      new Cesium.Matrix4(),
+    );
+  }
+
+  // 2. 应用旋转（本地 ENU 坐标系）
+  if (Array.isArray(options.rotates)) {
+    const rotates: [number, number, number] = arrayFillByLen([...options.rotates], 3, 0);
+    const [rx, ry, rz] = rotates;
+    if (rx !== 0 || ry !== 0 || rz !== 0) {
+      applyRotation(rx, ry, rz, imageryProvider, transformOrigin);
+    }
+  }
+
+  // 3. 应用平移（本地 ENU 坐标系）
+  if (options.translates) {
+    const translates: [number, number, number] = arrayFillByLen([...options.translates], 3, 0);
+    const [dx, dy, dz] = translates;
+    if (dx !== 0 || dy !== 0 || dz !== 0) {
+      applyTranslation(dx, dy, dz, imageryProvider, transformOrigin);
+    }
+  }
+
+  // 4. 应用缩放（本地 ENU 坐标系）
+  if (options.scales) {
+    const scales: [number, number, number] = arrayFillByLen([...options.scales], 3, 1);
+    const [sx, sy, sz] = scales;
+    if (sx !== 1 || sy !== 1 || sz !== 1) {
+      applyScale(sx, sy, sz, imageryProvider, transformOrigin);
+    }
+  }
+
+  return imageryProvider.modelMatrix;
+}
+
+// ============= 变换函数 =============
+
+/**
+ * 基于本地 ENU 坐标系的平移
+ * ENU: E(东) - X, N(北) - Y, U(上) - Z
+ */
+function applyTranslation(dx: number, dy: number, dz: number, entity: any, origin: any) {
+  if (dx === 0 && dy === 0 && dz === 0) return;
+
+  const { Cartesian3, Matrix4, Transforms } = Cesium;
+
+  const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
+  const translatePosition = new Cartesian3(dx, dy, dz);
+  const worldPosition = Matrix4.multiplyByPoint(toWorldMatrix, translatePosition, new Cartesian3());
+  const offset = Cartesian3.subtract(worldPosition, origin, new Cartesian3());
+  const translateMatrix = Matrix4.fromTranslation(offset);
+
+  entity.modelMatrix = Matrix4.multiply(translateMatrix, entity.modelMatrix, new Matrix4());
+}
+
+/**
+ * 基于本地 ENU 坐标系的旋转
+ */
+function applyRotation(rx: number, ry: number, rz: number, entity: any, origin: any) {
+  if (rx === 0 && ry === 0 && rz === 0) return;
+
+  const { Matrix3, Matrix4, Transforms, Math: CesiumMath } = Cesium;
+
+  const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
+  const toLocalMatrix = Matrix4.inverse(toWorldMatrix, new Matrix4());
+
+  let rotateMatrix = Matrix4.clone(Matrix4.IDENTITY);
+  if (rx !== 0) {
+    const m = Matrix4.fromRotationTranslation(Matrix3.fromRotationX(CesiumMath.toRadians(rx)));
+    Matrix4.multiply(m, rotateMatrix, rotateMatrix);
+  }
+  if (ry !== 0) {
+    const m = Matrix4.fromRotationTranslation(Matrix3.fromRotationY(CesiumMath.toRadians(ry)));
+    Matrix4.multiply(m, rotateMatrix, rotateMatrix);
+  }
+  if (rz !== 0) {
+    const m = Matrix4.fromRotationTranslation(Matrix3.fromRotationZ(CesiumMath.toRadians(rz)));
+    Matrix4.multiply(m, rotateMatrix, rotateMatrix);
+  }
+
+  const localResult = Matrix4.multiply(rotateMatrix, toLocalMatrix, new Matrix4());
+  const worldResult = Matrix4.multiply(toWorldMatrix, localResult, new Matrix4());
+
+  entity.modelMatrix = Matrix4.multiply(worldResult, entity.modelMatrix, new Matrix4());
+}
+
+/**
+ * 基于本地 ENU 坐标系的缩放
+ */
+function applyScale(sx: number, sy: number, sz: number, entity: any, origin: any) {
+  if (sx <= 0 || sy <= 0 || sz <= 0) throw Error("缩放倍数必须大于0");
+  if (sx === 1 && sy === 1 && sz === 1) return;
+
+  const { Cartesian3, Matrix4, Transforms } = Cesium;
+
+  const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
+  const toLocalMatrix = Matrix4.inverse(toWorldMatrix, new Matrix4());
+  const scaleMatrix = Matrix4.fromScale(new Cartesian3(sx, sy, sz));
+
+  const localResult = Matrix4.multiply(scaleMatrix, toLocalMatrix, new Matrix4());
+  const worldResult = Matrix4.multiply(toWorldMatrix, localResult, new Matrix4());
+
+  entity.modelMatrix = Matrix4.multiply(worldResult, entity.modelMatrix, new Matrix4());
+}
+
+// ============= 计算边界球中心 =============
+function getTransformOrigin(imageryProvider: any) {
+  try {
+    if (imageryProvider.boundingSphere) {
+      const cartographic = Cesium.Cartographic.fromCartesian(imageryProvider.boundingSphere.center);
+      return Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height || 0);
+    }
+
+    if (imageryProvider.rectangle) {
+      const rect = imageryProvider.rectangle;
+      const centerLng = (rect.west + rect.east) / 2;
+      const centerLat = (rect.south + rect.north) / 2;
+      return Cesium.Cartesian3.fromRadians(centerLng, centerLat, 0);
+    }
+
+    return Cesium.Cartesian3.ZERO;
+  } catch (e) {
+    console.warn("获取变换原点失败，使用默认原点", e);
+    return Cesium.Cartesian3.ZERO;
+  }
+}
+
+// ============= 安全获取 readyPromise =============
+function getReadyPromise(provider: any): Promise<any> {
+  // 如果 provider 有 readyPromise，使用它
+  if (provider.readyPromise && typeof provider.readyPromise.then === "function") {
+    return provider.readyPromise;
+  }
+  // 如果 provider 已经 ready，立即返回
+  if (provider.ready) {
+    return Promise.resolve(provider);
+  }
+  // 否则轮询等待
+  return new Promise((resolve, reject) => {
+    const checkReady = () => {
+      if (provider.ready) {
+        resolve(provider);
+      } else if (provider._error) {
+        reject(provider._error);
+      } else {
+        setTimeout(checkReady, 100);
+      }
+    };
+    checkReady();
+  });
+}
+
+// ============= 主绘制函数 =============
+export function drawLayer(map: CesiumMap, layer: Layer) {
+  const { viewer } = map;
+  let imageryProvider = createImageryProvider(layer);
+  let origin;
+  let initialMatrix;
+  let isReady = false;
+
+  // 添加到影像图层
+  const imageryLayer = viewer.scene.imageryLayers.addImageryProvider(imageryProvider);
+
+  // ============= 初始化函数 =============
+  function initialize() {
+    try {
+      origin = getTransformOrigin(imageryProvider);
+      initialMatrix = Cesium.Matrix4.clone(imageryProvider.modelMatrix || Cesium.Matrix4.IDENTITY);
+      updateTransform(imageryProvider, layer, origin);
+      isReady = true;
+      layer.event.trigger("ready");
+    } catch (error) {
+      console.error("影像初始化失败:", error);
+    }
+  }
+
+  // 等待影像加载完成
+  getReadyPromise(imageryProvider)
+    .then(() => {
+      initialize();
+    })
+    .catch((error: any) => {
+      console.error("影像加载失败:", error);
+      // 即使加载失败，也尝试初始化（可能部分显示）
+      initialize();
+    });
+
+  // ============= 更新事件 =============
+  const onUpdate = (e: Set<string>) => {
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          imageryLayer.show = layer.show !== false;
+          break;
+
+        case "src":
+          // 重新加载影像
+          viewer.scene.imageryLayers.remove(imageryLayer);
+          imageryProvider = createImageryProvider(layer);
+          const newLayer = viewer.scene.imageryLayers.addImageryProvider(imageryProvider);
+
+          getReadyPromise(imageryProvider)
+            .then(() => {
+              origin = getTransformOrigin(imageryProvider);
+              initialMatrix = Cesium.Matrix4.clone(imageryProvider.modelMatrix || Cesium.Matrix4.IDENTITY);
+              updateTransform(imageryProvider, layer, origin);
+              isReady = true;
+              layer.event.trigger("ready");
+            })
+            .catch((error: any) => {
+              console.error("重新加载影像失败:", error);
+            });
+          break;
+
+        case "coordinates":
+          if (!e.has("src") && isReady) {
+            updateTransform(imageryProvider, layer, origin);
+          }
+          break;
+
+        case "quality":
+          const quality = layer.quality || 0.5;
+          if (imageryProvider.maximumScreenSpaceError !== undefined) {
+            imageryProvider.maximumScreenSpaceError = 18 * (1 - quality * 0.8);
+          }
+          break;
+
+        case "opacity":
+          imageryLayer.alpha = layer.opacity || 1.0;
+          break;
+
+        default:
+          console.warn(`属性 ${key} 暂不支持动态修改`);
+      }
+    });
+  };
+
+  // ============= 聚焦 =============
+  const onFocus = () => {
+    if (imageryProvider.rectangle) {
+      viewer.camera.flyTo({
+        destination: imageryProvider.rectangle,
+        duration: 2.0,
+      });
+    } else if (imageryProvider.boundingSphere) {
+      viewer.camera.flyTo({
+        destination: imageryProvider.boundingSphere.center,
+        duration: 2.0,
+        offset: new Cesium.HeadingPitchRange(0, -Math.PI / 4, 1000),
+      });
+    }
+  };
+
+  // ============= 销毁 =============
+  const onDestroy = () => {
+    viewer.scene.imageryLayers.remove(imageryLayer);
+    layer.event.off("update", onUpdate);
+    layer.event.off("focus", onFocus);
+    layer.event.off("destroy", onDestroy);
+  };
+
+  // ============= 暴露变换方法 =============
+  layer.tileset = imageryProvider;
+
+  const ensureReady = (fn: Function) => {
+    return getReadyPromise(imageryProvider)
+      .then(() => {
+        if (!initialMatrix) {
+          initialMatrix = Cesium.Matrix4.clone(imageryProvider.modelMatrix || Cesium.Matrix4.IDENTITY);
+        }
+        // 重置到初始状态
+        imageryProvider.modelMatrix = Cesium.Matrix4.clone(initialMatrix);
+        // 应用变换
+        fn();
+        // 更新初始矩阵
+        initialMatrix = Cesium.Matrix4.clone(imageryProvider.modelMatrix);
+        isReady = true;
+      })
+      .catch((error: any) => {
+        console.error("变换失败:", error);
+        throw error;
+      });
+  };
+
+  layer.translate = function (dx: number, dy: number, dz: number, _tileset?: any) {
+    return ensureReady(() => {
+      applyTranslation(dx, dy, dz, _tileset || imageryProvider, origin);
+    });
+  };
+
+  layer.rotate = function (rx: number, ry: number, rz: number, _tileset?: any) {
+    return ensureReady(() => {
+      applyRotation(rx, ry, rz, _tileset || imageryProvider, origin);
+    });
+  };
+
+  layer.scale = function (sx: number, sy: number, sz: number, _tileset?: any) {
+    return ensureReady(() => {
+      applyScale(sx, sy, sz, _tileset || imageryProvider, origin);
+    });
+  };
+
+  // ============= 注册事件 =============
+  layer.event.on("update", onUpdate);
+  layer.event.on("focus", onFocus);
+  layer.event.on("destroy", onDestroy);
+
+  // ============= 设置初始透明度 =============
+  if (layer.opacity !== undefined) {
+    imageryLayer.alpha = layer.opacity;
+  }
+
+  return imageryLayer;
+}