@hzab/map-combine 0.0.1 → 0.1.0

package/src/cesium/CesiumTile3D.ts

@@ -1,100 +1,229 @@
+import { fill } from "lodash";
+
 import { Tile3D } from "../basic/Tile3D";
 import { CesiumMap } from "./CesiumMap";
 
+import { arrayFillByLen } from "../utils";
+
 function create3DTile(tile3d: Tile3D) {
   const tileset = new Cesium.Cesium3DTileset({
     show: tile3d.show,
     url: tile3d.src,
   });
-  tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality)
-  tileset.readyPromise
-  return tileset
+  tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality);
+  tileset.readyPromise;
+  return tileset;
 }
 
 function updateMatrix(tileset: any, tile3d: Tile3D, origin: any) {
-
+  const options = tile3d._option;
+  // 中心点移动到指定经纬度
   if (tile3d.coordinates) {
-    // const center = Cesium.Matrix4.multiplyByPoint(tileset.modelMatrix, tileset.boundingSphere.center, new Cesium.Cartesian3())
-    // const cartographic = Cesium.Cartographic.fromCartesian(center)
-    // console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
-    // cartographic.height = 0
-    // const transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude));
-    // const res = Cesium.Matrix4.inverse(transform, new Cesium.Matrix4());
-    // console.log(inverse);
-
-    const target = Cesium.Cartesian3.fromDegrees(...tile3d.coordinates)
+    const target = Cesium.Cartesian3.fromDegrees(...tile3d.coordinates);
     tileset.modelMatrix = Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.subtract(target, origin, target));
   } else {
-    tileset.modelMatrix = Cesium.Matrix4.IDENTITY
+    tileset.modelMatrix = Cesium.Matrix4.IDENTITY;
+  }
+  // 旋转
+  if (Array.isArray(options.rotates)) {
+    const rotates: [number, number, number] = arrayFillByLen([...options.rotates], 3, 0);
+    rotate(...rotates, tileset);
+  }
+  // 平移
+  if (options.translates) {
+    const translates: [number, number, number] = arrayFillByLen([...options.translates], 3, 0);
+    translate(...translates, tileset);
+  }
+  // 缩放
+  if (options.scales) {
+    const scales: [number, number, number] = arrayFillByLen([...options.scales], 3, 1);
+    scale(...scales, tileset);
   }
-
-
 }
 
 export function drawTile3D(map: CesiumMap, tile3d: Tile3D) {
-  const { viewer } = map
-  let tileset = create3DTile(tile3d)
-  let origin
+  const { viewer } = map;
+  let tileset = create3DTile(tile3d);
+  let origin;
+
   viewer.scene.primitives.add(tileset).readyPromise.then(() => {
-    const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
-    origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude)
-    updateMatrix(tileset, tile3d, origin)
-    tile3d.event.trigger('ready');
+    const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+    origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude);
+    updateMatrix(tileset, tile3d, origin);
+    tile3d.event.trigger("ready");
 
     // (window as any).getCenter = () => {
     //   const center = tileset.boundingSphere.center
     //   const cartographic = Cesium.Cartographic.fromCartesian(center)
     //   console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
     // }
-
   });
 
   const onUpdate = (e: Set<string>) => {
-
-    e.forEach(key => {
+    e.forEach((key) => {
       switch (key) {
-        case 'show':
-          tileset.show = tile3d.show
+        case "show":
+          tileset.show = tile3d.show;
           break;
-        case 'src':
-          viewer.scene.primitives.remove(tileset)
-          tileset = create3DTile(tile3d)
+        case "src":
+          viewer.scene.primitives.remove(tileset);
+          tileset = create3DTile(tile3d);
           viewer.scene.primitives.add(tileset).readyPromise.then(() => {
-            const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
-            origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude)
-            updateMatrix(tileset, tile3d, origin)
-            tile3d.event.trigger('ready');
-
+            const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+            origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude);
+            updateMatrix(tileset, tile3d, origin);
+            tile3d.event.trigger("ready");
           });
           break;
-        case 'coordinates':
-          if (!e.has('src')) {
-            updateMatrix(tileset, tile3d, origin)
+        case "coordinates":
+          if (!e.has("src")) {
+            updateMatrix(tileset, tile3d, origin);
           }
           break;
 
-        case 'quality':
-          tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality)
+        case "quality":
+          tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality);
           break;
         default:
-          throw new Error(`${key} 还不支持修改`)
+          throw new Error(`${key} 还不支持修改`);
       }
-    })
-
-
-  }
+    });
+  };
   const onFocus = () => {
     viewer.flyTo(tileset);
-  }
+  };
 
   const onDestroy = () => {
-    viewer.scene.primitives.remove(tileset)
-    tile3d.event.off('update', onUpdate)
-    tile3d.event.off('focus', onFocus)
-    tile3d.event.off('destroy', onDestroy)
+    viewer.scene.primitives.remove(tileset);
+    tile3d.event.off("update", onUpdate);
+    tile3d.event.off("focus", onFocus);
+    tile3d.event.off("destroy", onDestroy);
+  };
+
+  tile3d.tileset = tileset;
+  tile3d.translate = function (x: number, y: number, z: number, _tileset) {
+    return tileset.readyPromise.then((argument) => {
+      console.log("debug translate tileset.readyPromise");
+      test();
+      translate(x, y, z, _tileset || tileset);
+    });
+  };
+  tile3d.rotate = function (x: number, y: number, z: number, _tileset) {
+    return tileset.readyPromise.then((argument) => {
+      rotate(x, y, z, _tileset || tileset);
+    });
+  };
+  tile3d.scale = function (x: number, y: number, z: number, _tileset) {
+    return tileset.readyPromise.then((argument) => {
+      scale(x, y, z, _tileset || tileset);
+    });
+  };
+
+  tile3d.event.on("update", onUpdate);
+  tile3d.event.on("focus", onFocus);
+  tile3d.event.on("destroy", onDestroy);
+}
+
+function test() {
+  console.log("debug test");
+}
+
+/** 基于本地的 ENU 坐标系的偏移，也就是垂直于地表向上为 Z，东为 X，北为 Y
+ * @param dx x轴偏移量。单位：米
+ * @param dy y轴偏移量。单位：米
+ * @param dz z轴偏移量。单位：米
+ * @param tileset Cesium3DTileset
+ */
+function translate(dx: number, dy: number, dz: number, tileset) {
+  console.log("debug translate", dx, dy, dz);
+  if (dx === 0 && dy === 0 && dz === 0) return;
+  console.log("debug translate", dx, dy, dz);
+
+  try {
+    const { Cartesian3, Matrix4, Transforms } = Cesium;
+    // 对于3DTileset，我们需要的结果是一个模型矩阵，那么平移就是计算一个世界坐标下的平移矩阵。
+    // 获取中心点
+    const origin = tileset.boundingSphere.center;
+    // 以该点建立ENU坐标系
+    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);
+    // 应用平移矩阵。这里应该与原本的模型矩阵点乘，而不是直接赋值
+    tileset.modelMatrix = Matrix4.multiply(translateMatrix, tileset.modelMatrix, new Matrix4());
+  } catch (error) {
+    console.error(error);
   }
-  tile3d.event.on('update', onUpdate)
-  tile3d.event.on('focus', onFocus)
-  tile3d.event.on('destroy', onDestroy)
+}
 
-}
+/** 基于本地的 ENU 坐标系的旋转，也就是垂直于地表向上为 Z，东为 X，北为 Y
+ * https://blog.csdn.net/weixin_70945905/article/details/142419968
+ * @param rx 绕X轴旋转的角度。单位：度
+ * @param ry 绕Y轴旋转的角度。单位：度
+ * @param rz 绕Z轴旋转的角度。单位：度
+ * @param tileset Cesium3DTileset
+ */
+function rotate(rx: number, ry: number, rz: number, tileset) {
+  console.log("debug rotate ", rx, ry, rz);
+  if (rx === 0 && ry === 0 && rz === 0) return;
+  const { Matrix3, Matrix4, Transforms, Math: CesiumMath } = Cesium;
+  // 获取中心点。
+  const origin = tileset.boundingSphere.center;
+  // 以该点建立 ENU 坐标系
+  const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
+  // 获取 ENU 矩阵的逆矩阵。也就是可以将世界坐标重新转为 ENU 坐标系的矩阵
+  const toLocalMatrix = Matrix4.inverse(toWorldMatrix, new Matrix4());
+  // 计算旋转矩阵
+  const rotateMatrix = Matrix4.clone(Matrix4.IDENTITY);
+  if (rx !== 0) {
+    const rotateXMatrix = Matrix4.fromRotationTranslation(Matrix3.fromRotationX(CesiumMath.toRadians(rx)));
+    Matrix4.multiply(rotateXMatrix, rotateMatrix, rotateMatrix);
+  }
+  if (ry !== 0) {
+    const rotateYMatrix = Matrix4.fromRotationTranslation(Matrix3.fromRotationY(CesiumMath.toRadians(ry)));
+    Matrix4.multiply(rotateYMatrix, rotateMatrix, rotateMatrix);
+  }
+  if (rz !== 0) {
+    const rotateZMatrix = Matrix4.fromRotationTranslation(Matrix3.fromRotationZ(CesiumMath.toRadians(rz)));
+    Matrix4.multiply(rotateZMatrix, rotateMatrix, rotateMatrix);
+  }
+  // ENU 坐标系下的结果矩阵
+  const localResultMatrix = Matrix4.multiply(rotateMatrix, toLocalMatrix, new Matrix4());
+  // 世界坐标系下的结果矩阵
+  const worldResultMatrix = Matrix4.multiply(toWorldMatrix, localResultMatrix, new Matrix4());
+  // 应用结果
+  tileset.modelMatrix = Matrix4.multiply(worldResultMatrix, tileset.modelMatrix, new Matrix4());
+}
+
+/** 基于本地的 ENU 坐标系的缩放，也就是垂直于地表向上为 Z，东为 X，北为 Y
+ * @param sx x 轴缩放倍数
+ * @param sy y 轴缩放倍数
+ * @param sz z 轴缩放倍数
+ * @param tileset Cesium3DTileset
+ */
+function scale(sx: number, sy: number, sz: number, tileset) {
+  if (sx <= 0 || sy <= 0 || sz <= 0) throw Error("缩放倍数必须大于0");
+  if (sx === 1 && sy === 1 && sz === 1) return;
+  const { Cartesian3, Matrix4, Transforms } = Cesium;
+  // 具体步骤是将 3DTileset 先转为 ENU 坐标系，再在 ENU 坐标系下计算缩放后的结果，再转回世界坐标系。一个步骤代表一个矩阵
+
+  // 获取中心点。
+  const origin = tileset.boundingSphere.center;
+  // 以该点建立 ENU 坐标系
+  const toWorldMatrix = Transforms.eastNorthUpToFixedFrame(origin);
+  // 获取ENU矩阵的逆矩阵。也就是可以将世界坐标重新转为 ENU 坐标系的矩阵
+  const toLocalMatrix = Matrix4.inverse(toWorldMatrix, new Matrix4());
+  // 计算缩放矩阵
+  const scaleMatrix = Matrix4.fromScale(new Cartesian3(sx, sy, sz));
+  // ENU 坐标系下的结果矩阵
+  const localResultMatrix = Matrix4.multiply(scaleMatrix, toLocalMatrix, new Matrix4());
+  // 世界坐标系下的结果矩阵
+  const worldResultMatrix = Matrix4.multiply(toWorldMatrix, localResultMatrix, new Matrix4());
+  // 应用结果
+  tileset.modelMatrix = Matrix4.multiply(worldResultMatrix, tileset.modelMatrix, new Matrix4());
+}

package/src/cesium/cesium-tile-covert/index.js

@@ -0,0 +1,48 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-18
+ */
+
+import {
+  AMapImageryProvider,
+  BaiduImageryProvider,
+  GeoVisImageryProvider,
+  GoogleImageryProvider,
+  TdtImageryProvider,
+  TencentImageryProvider,
+  CustomGeographicTilingScheme,
+  CustomMercatorTilingScheme,
+} from "./modules";
+
+if (window && window.Cesium) {
+  if (Object.isFrozen(window.Cesium)) {
+    window.AMapImageryProvider = AMapImageryProvider;
+    window.BaiduImageryProvider = BaiduImageryProvider;
+    window.GeoVisImageryProvider = GeoVisImageryProvider;
+    window.GoogleImageryProvider = GoogleImageryProvider;
+    window.TdtImageryProvider = TdtImageryProvider;
+    window.TencentImageryProvider = TencentImageryProvider;
+    window.CustomGeographicTilingScheme = CustomGeographicTilingScheme;
+    window.CustomMercatorTilingScheme = CustomMercatorTilingScheme;
+  } else {
+    window.Cesium.AMapImageryProvider = AMapImageryProvider;
+    window.Cesium.BaiduImageryProvider = BaiduImageryProvider;
+    window.Cesium.GeoVisImageryProvider = GeoVisImageryProvider;
+    window.Cesium.GoogleImageryProvider = GoogleImageryProvider;
+    window.Cesium.TdtImageryProvider = TdtImageryProvider;
+    window.Cesium.TencentImageryProvider = TencentImageryProvider;
+    window.Cesium.CustomGeographicTilingScheme = CustomGeographicTilingScheme;
+    window.Cesium.CustomMercatorTilingScheme = CustomMercatorTilingScheme;
+  }
+}
+
+export {
+  AMapImageryProvider,
+  BaiduImageryProvider,
+  GeoVisImageryProvider,
+  GoogleImageryProvider,
+  TdtImageryProvider,
+  TencentImageryProvider,
+  CustomGeographicTilingScheme,
+  CustomMercatorTilingScheme,
+};

package/src/cesium/cesium-tile-covert/modules/index.js

@@ -0,0 +1,12 @@
+/**
+ * @Author: Caven Chen
+ */
+
+export { default as AMapImageryProvider } from "./provider/AMapImageryProvider.js";
+export { default as BaiduImageryProvider } from "./provider/BaiduImageryProvider.js";
+export { default as GeoVisImageryProvider } from "./provider/GeoVisImageryProvider.js";
+export { default as GoogleImageryProvider } from "./provider/GoogleImageryProvider.js";
+export { default as TdtImageryProvider } from "./provider/TdtImageryProvider.js";
+export { default as TencentImageryProvider } from "./provider/TencentImageryProvider.js";
+export { default as CustomGeographicTilingScheme } from "./tiling-scheme/CustomGeographicTilingScheme.js";
+export { default as CustomMercatorTilingScheme } from "./tiling-scheme/CustomMercatorTilingScheme.js";