@hzab/map-combine 0.4.2-alpha.7 → 0.4.2-alpha.8

package/src/cesium/CesiumMap.ts

@@ -145,8 +145,25 @@ export class CesiumMap extends MapCombine {
     map.center = center;
     map.zoom = zoom;
 
+    // 目标层级范围
+    const { minZoom = 4, maxZoom = 18 } = opt || {};
+
+    // 限制相机距离
+    const controller = viewer.scene.screenSpaceCameraController;
+    controller.maximumZoomDistance = this.levelToDistance(minZoom);
+    controller.minimumZoomDistance = this.levelToDistance(maxZoom);
+
     return map;
   }
+  /**
+   * 层级转距离的近似公式 (基于地球周长)
+   * @param level
+   * @returns
+   */
+  levelToDistance(level) {
+    const earthRadius = 6378137; // 地球半径，单位米
+    return (earthRadius * 2 * Math.PI) / Math.pow(2, level);
+  }
 
   private _initParamsEvent(viewer) {
     if (!viewer) {

package/src/cesium/CesiumTile3D.ts

@@ -1,225 +1,225 @@
-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;
-}
-
-function updateMatrix(tileset: any, tile3d: Tile3D, origin: any) {
-  const options = tile3d._option;
-  // 中心点移动到指定经纬度
-  if (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;
-  }
-  // 旋转
-  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;
-
-  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");
-
-    // (window as any).getCenter = () => {
-    //   const center = tileset.boundingSphere.center
-    //   const cartographic = Cesium.Cartographic.fromCartesian(center)
-    //   console.info(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
-    // }
-  });
-
-  const onUpdate = (e: Set<string>) => {
-    e.forEach((key) => {
-      switch (key) {
-        case "show":
-          tileset.show = tile3d.show;
-          break;
-        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");
-          });
-          break;
-        case "coordinates":
-          if (!e.has("src")) {
-            updateMatrix(tileset, tile3d, origin);
-          }
-          break;
-
-        case "quality":
-          tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality);
-          break;
-        default:
-          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);
-  };
-
-  tile3d.tileset = tileset;
-  tile3d.translate = function (x: number, y: number, z: number, _tileset) {
-    return tileset.readyPromise.then((argument) => {
-      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.info("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) {
-  if (dx === 0 && dy === 0 && dz === 0) return;
-
-  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);
-  }
-}
-
-/** 基于本地的 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) {
-  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());
-}
+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;
+}
+
+function updateMatrix(tileset: any, tile3d: Tile3D, origin: any) {
+  const options = tile3d._option;
+  // 中心点移动到指定经纬度
+  if (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;
+  }
+  // 旋转
+  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;
+
+  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");
+
+    // (window as any).getCenter = () => {
+    //   const center = tileset.boundingSphere.center
+    //   const cartographic = Cesium.Cartographic.fromCartesian(center)
+    //   console.info(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
+    // }
+  });
+
+  const onUpdate = (e: Set<string>) => {
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          tileset.show = tile3d.show;
+          break;
+        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");
+          });
+          break;
+        case "coordinates":
+          if (!e.has("src")) {
+            updateMatrix(tileset, tile3d, origin);
+          }
+          break;
+
+        case "quality":
+          tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality);
+          break;
+        default:
+          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);
+  };
+
+  tile3d.tileset = tileset;
+  tile3d.translate = function (x: number, y: number, z: number, _tileset) {
+    return tileset.readyPromise.then((argument) => {
+      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.info("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) {
+  if (dx === 0 && dy === 0 && dz === 0) return;
+
+  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);
+  }
+}
+
+/** 基于本地的 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) {
+  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/mine/MineEvent.ts

@@ -45,8 +45,23 @@ export function bindEvent(map: MineMap) {
   viewer.on("mousedown", () => {
     event.trigger("pointer-down");
   });
-  viewer.on("click", () => {
+  viewer.on("click", (e) => {
     event.trigger("left-click");
+
+    // "drill-pick"
+    // 获取点击位置的屏幕坐标
+    const point = [e.point.x, e.point.y];
+    // 执行拾取查询
+    var pickedObjects = viewer.queryRenderedFeatures(point);
+    // 处理查询结果
+    if (pickedObjects && pickedObjects.length > 0 && pickedObjects[0].properties) {
+      event.trigger("drill-pick", {
+        event: e,
+        pickedTargets: pickedObjects.map((it) => map.elements.get(it.properties?.id)),
+        sourceObjects: pickedObjects,
+        position: [e.lngLat.lng, e.lngLat.lat],
+      });
+    }
   });
 
   event.on("destroy", () => {