@hzab/map-combine 0.4.2-alpha.2 → 0.4.2-alpha.3

package/src/cesium/CesiumModel.ts

@@ -0,0 +1,60 @@
+import { BasicModel, type BasicModelOption } from "../basic/BasicModel";
+import { objHasKeys } from "../utils";
+import { type CesiumMap } from "./CesiumMap";
+
+export class CesiumModel extends BasicModel {
+  private readonly _map: CesiumMap;
+  private _shape: any;
+  constructor(map: CesiumMap, option?: Partial<BasicModelOption>) {
+    super(option);
+    this._map = map;
+
+    this._shape = map.viewer.scene.primitives.add(
+      Cesium.Model.fromGltf({
+        show: this.option.show,
+        url: this.option.model,
+        modelMatrix: this._initMatrix(),
+        scale: this.option.scale,
+        allowPicking: !this.option.silent,
+        minimumPixelSize: this.option.minSize,
+      }),
+    );
+  }
+
+  private _initMatrix() {
+    const { lon, lat, alt, heading, pitch, roll } = this.option;
+    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
+    const origin = Cesium.Cartesian3.fromDegrees(lon, lat, alt);
+    const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, hpr);
+    return modelMatrix;
+  }
+
+  protected _onUpdate(option: Partial<BasicModelOption>): void {
+    const { _shape } = this;
+    if (objHasKeys(option, ["model"])) {
+      this._map.viewer.scene.primitives.remove(this._shape, true);
+      this._shape = this._map.viewer.scene.primitives.add(
+        Cesium.Model.fromGltf({
+          url: this.option.model,
+          modelMatrix: this._initMatrix(),
+          scale: this.option.scale,
+          minimumPixelSize: this.option.minSize,
+        }),
+      );
+    } else {
+      if (objHasKeys(option, ["show"])) {
+        _shape.show = option.show;
+      }
+      if (objHasKeys(option, ["lon", "lat", "alt", "heading", "pitch", "roll"])) {
+        this._shape.modelMatrix = this._initMatrix();
+      }
+      if (objHasKeys(option, ["scale"])) {
+        this._shape.scale = option.scale;
+      }
+    }
+  }
+
+  destroy(): void {
+    this._map.viewer.scene.primitives.remove(this._shape, true);
+  }
+}

package/src/cesium/CesiumPoint.ts

@@ -18,6 +18,7 @@ export function drawPoint(map: CesiumMap, point: Point<unknown>) {
     height: size[1],
     image: point.src,
     rotation: point.rotation,
+    allowPicking: !point.silent,
     id: {
       cursor: point.cursor,
       silent: point.silent,

package/src/mine/MineEvent.ts

@@ -1,46 +1,55 @@
-import { MineMap } from "./MineMap";
-
-export function bindEvent(map: MineMap) {
-  const { event, viewer, container } = map;
-
-  viewer.on("moveend", (e) => {
-    event.trigger("view-moveEnd");
-  });
-
-  container.addEventListener("mousedown", (e) => {
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", (e) => {
-    event.trigger("pointer-up");
-  });
-
-  // 解决 ReactPoint 点击事件无法触发的问题
-  container.addEventListener("click", (e) => {
-    event.trigger("left-click");
-  });
-
-  viewer.on("mousemove", (e) => {
-    event.canvas = [e.point.x, e.point.y];
-    event.geography = [e.lngLat.lng, e.lngLat.lat, 0];
-  });
-  container.addEventListener("pointermove", (e) => {
-    event.trigger("pointer-move");
-  });
-  viewer.on("move", () => {
-    event.trigger("view-change");
-  });
-  viewer.on("mouseup", () => {
-    event.trigger("pointer-up");
-  });
-  viewer.on("mousedown", () => {
-    event.trigger("pointer-down");
-  });
-  viewer.on("click", () => {
-    event.trigger("left-click");
-  });
-
-  event.on("destroy", () => {
-    viewer.remove();
-  });
-}
+import { MineMap } from "./MineMap";
+
+export function bindEvent(map: MineMap) {
+  const { event, viewer, container } = map;
+
+  const frame = () => {
+    if (map.isAlive) {
+      requestAnimationFrame(frame);
+      event.trigger("view-preRender");
+      map.bussinesses.forEach((e) => e.show && e.onFrame?.());
+    }
+  };
+  frame();
+
+  viewer.on("moveend", (e) => {
+    event.trigger("view-moveEnd");
+  });
+
+  container.addEventListener("mousedown", (e) => {
+    event.trigger("pointer-down");
+  });
+
+  container.addEventListener("mouseup", (e) => {
+    event.trigger("pointer-up");
+  });
+
+  // 解决 ReactPoint 点击事件无法触发的问题
+  container.addEventListener("click", (e) => {
+    event.trigger("left-click");
+  });
+
+  viewer.on("mousemove", (e) => {
+    event.canvas = [e.point.x, e.point.y];
+    event.geography = [e.lngLat.lng, e.lngLat.lat, 0];
+  });
+  container.addEventListener("pointermove", (e) => {
+    event.trigger("pointer-move");
+  });
+  viewer.on("move", () => {
+    event.trigger("view-change");
+  });
+  viewer.on("mouseup", () => {
+    event.trigger("pointer-up");
+  });
+  viewer.on("mousedown", () => {
+    event.trigger("pointer-down");
+  });
+  viewer.on("click", () => {
+    event.trigger("left-click");
+  });
+
+  event.on("destroy", () => {
+    viewer.remove();
+  });
+}

package/src/openlayer/OpenlayerEvent.ts

@@ -1,87 +1,88 @@
-import { OpenlayerMap } from "./OpenlayerMap";
-
-export function bindEvent(map: OpenlayerMap) {
-  const { event, viewer, container } = map;
-  let target: any;
-  let moving = false;
-
-  const frame = () => {
-    if (map.isAlive) {
-      requestAnimationFrame(frame);
-      event.trigger("view-preRender");
-    }
-  };
-  frame();
-
-  viewer.on("moveend", (e) => {
-    event.trigger("view-moveEnd");
-  });
-
-  viewer.on("pointermove", (e) => {
-    event.canvas = e.pixel;
-    event.geography = map.canvasTgeography(event.canvas);
-    let _target: any;
-    if (moving) {
-      event.trigger("pointer-move");
-      return;
-    }
-    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
-    _target = res ? res.get("event") : undefined;
-    if (_target?.silent) {
-      _target = undefined;
-    }
-    if (_target !== target) {
-      target?.onPointerOut?.();
-      _target?.onPointerIn?.();
-      target = _target;
-    }
-    event.trigger("pointer-move");
-  });
-
-  container.addEventListener("mousedown", () => {
-    if (target) {
-      moving = true;
-      target.onPointerDown?.();
-    }
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", () => {
-    if (target) {
-      moving = false;
-      target.onPointerUp?.();
-    }
-    event.trigger("pointer-up");
-  });
-
-  container.addEventListener("contextmenu", (e) => {
-    e.preventDefault();
-    if (target) {
-      target.onRClick?.();
-    }
-  });
-
-  viewer.on("click", () => {
-    if (target) {
-      target.onLClick?.();
-    }
-    event.trigger("left-click");
-  });
-
-  viewer.on("dblclick", () => {
-    if (target) {
-      target.onDbClick?.();
-    }
-    map.event.trigger("double-click");
-  });
-
-  let key = 0;
-
-  viewer.on("precompose", () => {
-    const _key = map.center.reduce((a, b) => a + b, map.zoom);
-    if (key != _key) {
-      key = _key;
-      event.trigger("view-change");
-    }
-  });
-}
+import { OpenlayerMap } from "./OpenlayerMap";
+
+export function bindEvent(map: OpenlayerMap) {
+  const { event, viewer, container } = map;
+  let target: any;
+  let moving = false;
+
+  const frame = () => {
+    if (map.isAlive) {
+      requestAnimationFrame(frame);
+      event.trigger("view-preRender");
+      map.bussinesses.forEach((e) => e.show && e.onFrame?.());
+    }
+  };
+  frame();
+
+  viewer.on("moveend", (e) => {
+    event.trigger("view-moveEnd");
+  });
+
+  viewer.on("pointermove", (e) => {
+    event.canvas = e.pixel;
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any;
+    if (moving) {
+      event.trigger("pointer-move");
+      return;
+    }
+    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
+    _target = res ? res.get("event") : undefined;
+    if (_target?.silent) {
+      _target = undefined;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+    event.trigger("pointer-move");
+  });
+
+  container.addEventListener("mousedown", () => {
+    if (target) {
+      moving = true;
+      target.onPointerDown?.();
+    }
+    event.trigger("pointer-down");
+  });
+
+  container.addEventListener("mouseup", () => {
+    if (target) {
+      moving = false;
+      target.onPointerUp?.();
+    }
+    event.trigger("pointer-up");
+  });
+
+  container.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    if (target) {
+      target.onRClick?.();
+    }
+  });
+
+  viewer.on("click", () => {
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger("left-click");
+  });
+
+  viewer.on("dblclick", () => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    map.event.trigger("double-click");
+  });
+
+  let key = 0;
+
+  viewer.on("precompose", () => {
+    const _key = map.center.reduce((a, b) => a + b, map.zoom);
+    if (key != _key) {
+      key = _key;
+      event.trigger("view-change");
+    }
+  });
+}

package/src/utils/turfjs-utils.ts

@@ -0,0 +1,52 @@
+/**
+ * 通用函数：提取所有坐标并扁平化为普通数组
+ * @param geojsonFeature
+ * @param geomType
+ * @returns
+ */
+export function extractCoordinatesToArr(coords, geomType) {
+  if (geomType === "Polygon") {
+    // 多边形：三维数组 [环1[点1,点2...], 环2[...]] -> 转为二维数组
+    return coords.map(
+      (ring) => ring.map((coord) => [coord[0], coord[1]]), // 提取经度、纬度
+    );
+  } else if (geomType === "MultiPolygon") {
+    // 多部件多边形：四维数组 -> 转为三维数组
+    return coords.map((polygon) => polygon.map((ring) => ring.map((coord) => [coord[0], coord[1]])));
+  } else if (geomType === "Point") {
+    // 点：返回一维数组
+    return [coords[0], coords[1]];
+  } else if (geomType === "LineString") {
+    // 线：返回二维数组
+    return coords.map((coord) => [coord[0], coord[1]]);
+  }
+
+  return coords;
+}
+
+/**
+ * 通用函数：提取所有坐标并扁平化为普通数组
+ * @param geojsonFeature
+ * @returns
+ */
+export function extractGeojsonCoordinatesToArr(geojsonFeature) {
+  const coords = geojsonFeature.geometry.coordinates;
+  const geomType = geojsonFeature.geometry.type;
+  if (geomType === "Polygon") {
+    // 多边形：三维数组 [环1[点1,点2...], 环2[...]] -> 转为二维数组
+    return coords.map(
+      (ring) => ring.map((coord) => [coord[0], coord[1]]), // 提取经度、纬度
+    );
+  } else if (geomType === "MultiPolygon") {
+    // 多部件多边形：四维数组 -> 转为三维数组
+    return coords.map((polygon) => polygon.map((ring) => ring.map((coord) => [coord[0], coord[1]])));
+  } else if (geomType === "Point") {
+    // 点：返回一维数组
+    return [coords[0], coords[1]];
+  } else if (geomType === "LineString") {
+    // 线：返回二维数组
+    return coords.map((coord) => [coord[0], coord[1]]);
+  }
+
+  return coords;
+}

package/src/utils/types.d.ts

@@ -0,0 +1,12 @@
+export enum HtmlPosition {
+  "auto",
+  "bottomright",
+  "bottom",
+  "bottomleft",
+  "right",
+  "top",
+  "left",
+  "topright",
+  "topleft" = 9,
+  "center",
+}