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

package/src/basic/MapCombine.ts

@@ -1,98 +1,105 @@
-import { ContextMenu } from "./ContextMenu";
-import { MapElement } from "./MapElement";
-import { MapEvent } from "./MapEvent";
-import { Point, PointOption } from "./Point";
-import { PointAggregation, PointAggregationOption } from "./PointAggregation";
-import { Polygon, PolygonOption } from "./Polygon";
-import { Polyline, PolylineOption } from "./Polyline";
-import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
-import { Tile3D, Tile3DOption } from "./Tile3D";
-import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
-
-import { getBounds } from "../utils/points-viewer";
-
-export abstract class MapCombine {
-  /* 用于挂载html元素的根节点 */
-  readonly htmllayer = document.createElement("div");
-  readonly elements = new Map<string, MapElement>();
-  readonly event = new MapEvent();
-  readonly menu: ContextMenu;
-  abstract get cursor(): string;
-  abstract set cursor(val: string);
-
-  abstract get moveable(): boolean;
-  abstract set moveable(val: boolean);
-
-  abstract get center(): number[];
-  abstract set center(val);
-
-  abstract get zoom(): number;
-  abstract set zoom(val);
-
-  loadPromise: Promise<this> = Promise.resolve(this);
-
-  bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
-
-  /** 地图是否存在 */
-  isAlive = true;
-  constructor() {
-    const { htmllayer } = this;
-    htmllayer.style.zIndex = "1000";
-    htmllayer.style.position = "absolute";
-    htmllayer.style.width = "0";
-    htmllayer.style.height = "0";
-    htmllayer.style.left = "0";
-    htmllayer.style.top = "0";
-    this.menu = new ContextMenu(this);
-    (window as any).map = this;
-    setTimeout(() => {
-      this.bussinesses.forEach((e) => e.show && e.onMapLoaded?.());
-    }, 100);
-  }
-
-  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
-    const e = new ReactPoint(this, option);
-    drawReactPoint(this, e);
-    return e;
-  }
-
-  /**
-   * 设置地图视图
-   * @param option 视图参数
-   * @param time 设置时间会动画形式调整视图
-   */
-  abstract createPoint<K>(option?: Partial<PointOption<K>>): Point<K>;
-
-  /** 聚合点 */
-  abstract createPointAggregation(option?: PointAggregationOption): PointAggregation;
-
-  abstract createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>;
-
-  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>;
-
-  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D;
-
-  abstract canvasTgeography(p: number[]): number[];
-
-  abstract geographyTcanvas(p: number[]): number[];
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @param points
-   */
-  abstract flyToViewer(points: number[][], opt?: Object): void;
-
-  /**
-   * 移动点位到中心点
-   * @param points
-   */
-  abstract flyTo(point: number[], opt?: Object): void;
-
-  getBounds = getBounds;
-
-  destroy() {
-    this.isAlive = false;
-    this.htmllayer.remove();
-    this.event.trigger("destroy");
-  }
-}
+import { ContextMenu } from "./ContextMenu";
+import { MapElement } from "./MapElement";
+import { MapEvent } from "./MapEvent";
+import { Point, PointOption } from "./Point";
+import { PointAggregation, PointAggregationOption } from "./PointAggregation";
+import { Polygon, PolygonOption } from "./Polygon";
+import { Polyline, PolylineOption } from "./Polyline";
+import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
+import { Tile3D, Tile3DOption } from "./Tile3D";
+import { BasicModel, BasicModelOption } from "./BasicModel";
+import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
+
+import { getBounds } from "../utils/points-viewer";
+import { Layer, LayerOption } from "./Layer";
+
+export abstract class MapCombine {
+  /* 用于挂载html元素的根节点 */
+  readonly htmllayer = document.createElement("div");
+  readonly elements = new Map<string, MapElement>();
+  readonly event = new MapEvent();
+  readonly menu: ContextMenu;
+  abstract get cursor(): string;
+  abstract set cursor(val: string);
+
+  abstract get moveable(): boolean;
+  abstract set moveable(val: boolean);
+
+  abstract get center(): number[];
+  abstract set center(val);
+
+  abstract get zoom(): number;
+  abstract set zoom(val);
+
+  loadPromise: Promise<this> = Promise.resolve(this);
+
+  bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
+
+  /** 地图是否存在 */
+  isAlive = true;
+  constructor() {
+    const { htmllayer } = this;
+    htmllayer.style.zIndex = "1000";
+    htmllayer.style.position = "absolute";
+    htmllayer.style.width = "0";
+    htmllayer.style.height = "0";
+    htmllayer.style.left = "0";
+    htmllayer.style.top = "0";
+    this.menu = new ContextMenu(this);
+    (window as any).map = this;
+    setTimeout(() => {
+      this.bussinesses.forEach((e) => e.show && e.onMapLoaded?.());
+    }, 100);
+  }
+
+  createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
+    const e = new ReactPoint(this, option);
+    drawReactPoint(this, e);
+    return e;
+  }
+
+  /**
+   * 设置地图视图
+   * @param option 视图参数
+   * @param time 设置时间会动画形式调整视图
+   */
+  abstract createPoint<K>(option?: Partial<PointOption<K>>): Point<K>;
+
+  /** 聚合点 */
+  abstract createPointAggregation(option?: PointAggregationOption): PointAggregation;
+
+  abstract createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K>;
+
+  abstract createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K>;
+
+  abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D;
+
+  abstract createLayer(option?: Partial<LayerOption>): Layer;
+
+  /** 创建模型 */
+  createModel?(option?: Partial<BasicModelOption>): BasicModel;
+
+  abstract canvasTgeography(p: number[]): number[];
+
+  abstract geographyTcanvas(p: number[]): number[];
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   */
+  abstract flyToViewer(points: number[][], opt?: Object): void;
+
+  /**
+   * 移动点位到中心点
+   * @param points
+   */
+  abstract flyTo(point: number[], opt?: Object): void;
+
+  getBounds = getBounds;
+
+  destroy() {
+    this.isAlive = false;
+    this.htmllayer.remove();
+    this.event.trigger("destroy");
+  }
+}

package/src/basic/MapElement.ts

@@ -16,7 +16,8 @@ export abstract class MapElement<T extends MapElementOption = MapElementOption>
     this.map = map;
     this._option = option;
     if (map.elements.has(option.name)) {
-      throw new Error(`已存在同名元素 ${option.name}`);
+      console.error(new Error(`已存在同名元素 ${option.name}`));
+      return;
     }
     map.elements.set(option.name, this);
   }

package/src/basic/MapEvent.ts

@@ -5,6 +5,11 @@ export class MapEvent extends Eventful<{
   "pointer-move": () => void;
   "pointer-up": () => void;
   "left-click": () => void;
+  /**
+   * 获取当前点击位置的所有元素
+   * @returns
+   */
+  "drill-pick": (elements) => void;
   "right-click": () => void;
   "double-click": () => void;
   "view-change": () => void;

package/src/basic/Point.ts

@@ -10,6 +10,7 @@ export interface PointOption<K> extends MapElementOption {
   src: string;
   center: number[];
   size: number[];
+  /** 角度制 */
   rotation: number;
   editable: boolean;
   userdata: K;

package/src/basic/PointAggregation.tsx

@@ -1,24 +1,27 @@
 import { ReactElement } from "react";
-import { throttle } from "lodash";
 
 import { LATTOONE, LONTOONE } from "../utils/static";
 import { getUUID, setValue } from "../utils";
 import { MapCombine } from "../basic/MapCombine";
 import { ReactPoint } from "./ReactPoint";
 
+export interface PointOption {
+  coordinates: number[];
+  props?: any;
+}
 export interface PointAggregationOption {
   /** 组件名，唯一标识 */
   name: string;
   /** 组件是否显示 */
   show: boolean;
   /** 数据点 */
-  datas: any[];
+  datas: PointOption[];
   /** 小于该值的等级下会聚合 */
   maxZoomLevel?: number;
   /** 值越大聚合点的间距越小 */
   density?: number;
   /** 点的展示元素 */
-  element(datas: any[], p: number[]): ReactElement;
+  element(datas: PointOption[], p: number[]): ReactElement;
   /** 坐标处理回调 */
   location(lonlat: number[]): number[];
 }
@@ -28,10 +31,12 @@ class TileNode {
   private _element: any;
   marker: ReactPoint | undefined;
   private _map: MapCombine;
-  constructor(map: MapCombine, location: number[], element: ReactElement) {
+  option;
+  constructor(map: MapCombine, location: number[], element: ReactElement, option = {}) {
     this._map = map;
     this._location = location;
     this._element = element;
+    this.option = option;
   }
   test(east: number, south: number, west: number, north: number) {
     if (
@@ -42,6 +47,7 @@ class TileNode {
     ) {
       if (!this.marker) {
         const option = {
+          ...this.option,
           show: true,
           name: getUUID(),
           element: () => this._element,
@@ -94,6 +100,8 @@ export class PointAggregation {
     this._onAfterViewChange = this.onAfterViewChange.bind(this);
     this.onAfterViewChange();
     event.on("view-moveEnd", this._onAfterViewChange);
+    // 初始化没有渲染，移动之后才渲染点位
+    this._update();
   }
 
   private _turnon(zoom: number) {
@@ -106,10 +114,12 @@ export class PointAggregation {
         const grid = new Map();
         const max = Math.pow(2, zoom) * (_option.density ?? 1);
         _option.datas.forEach((data) => {
-          const location = typeof _option.location === "function" ? _option.location(data) : data;
+          const location =
+            typeof _option.location === "function" ? _option.location(data.coordinates) : data.coordinates;
           const x = Math.floor(LONTOONE.forward(location[0]) * max * 2);
           const y = Math.floor(LATTOONE.forward(location[1]) * max);
           const k = `${x}_${y}`;
+          // 对数据进行分组
           const group = grid.get(k);
           if (group) {
             group.push(data);
@@ -118,10 +128,11 @@ export class PointAggregation {
           }
         });
         // 处理聚合点坐标
-        grid.forEach((e) => {
-          const { lon, lat } = e.reduce(
+        grid.forEach((group) => {
+          const { lon, lat } = group?.reduce(
             (a, b) => {
-              const loaction = typeof _option.location === "function" ? _option.location(b) : b;
+              const { coordinates } = b;
+              const loaction = typeof _option.location === "function" ? _option.location(coordinates) : coordinates;
               a.lon += loaction[0];
               a.lat += loaction[1];
               return a;
@@ -131,8 +142,8 @@ export class PointAggregation {
           cache.push(
             new TileNode(
               this._map,
-              [lon / e.length, lat / e.length],
-              _option.element(e, [lon / e.length, lat / e.length]),
+              [lon / group.length, lat / group.length],
+              _option.element(group, [lon / group.length, lat / group.length]),
             ),
           );
         });
@@ -140,7 +151,7 @@ export class PointAggregation {
       } else {
         const cache: TileNode[] = [];
         _option.datas.forEach((e) => {
-          const location = _option.location(e);
+          const location = _option.location(e.coordinates);
           cache.push(new TileNode(this._map, location, _option.element([e], location)));
         });
         _cache.set(zoom, cache);

package/src/basic/ReactPopup.tsx

@@ -1,3 +1,6 @@
+/**
+ * WARM: 后续将废弃该功能，使用 ReactPoint 替换！！！
+ */
 import { ReactElement } from "react";
 import ReactDOM from "react-dom";
 import { MapCombine } from "./MapCombine";

package/src/basic/Tile3D.ts

@@ -105,7 +105,6 @@ export class Tile3D extends MapElement<Tile3DOption> {
     console.info("TileD translate");
   }
   /** 基于本地的 ENU 坐标系的旋转，也就是垂直于地表向上为 Z，东为 X，北为 Y
-   * https://blog.csdn.net/weixin_70945905/article/details/142419968
    * @param rx 绕X轴旋转的角度。单位：度
    * @param ry 绕Y轴旋转的角度。单位：度
    * @param rz 绕Z轴旋转的角度。单位：度

package/src/cesium/CesiumEvent.ts

@@ -1,84 +1,97 @@
-import { CesiumMap } from "./CesiumMap";
-
-export function bindEvent(map: CesiumMap) {
-  const { event, viewer, container } = map;
-  viewer.camera.percentageChanged = 0.0001;
-
-  viewer.scene.preRender.addEventListener(() => {
-    event.trigger("view-preRender");
-  });
-
-  viewer.camera.changed.addEventListener(() => {
-    event.trigger("view-change");
-  });
-  viewer.camera.moveEnd.addEventListener(() => {
-    event.trigger("view-moveEnd");
-  });
-  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
-  let target: any;
-  handler.setInputAction((e: any) => {
-    event.canvas = [e.endPosition.x, e.endPosition.y];
-    event.geography = map.canvasTgeography(event.canvas);
-    let _target: any = undefined;
-    const res = viewer.scene.pick(e.endPosition);
-    const a = res ? (res.id ? res.id : res.primitive ? res.primitive : undefined) : undefined;
-
-    if (a && !a.silent) {
-      _target = a;
-    }
-    if (_target !== target) {
-      target?.onPointerOut?.();
-      _target?.onPointerIn?.();
-      target = _target;
-    }
-
-    if (target) {
-      map.cursor = target.cursor;
-    } else {
-      map.cursor = "";
-    }
-    event.trigger("pointer-move");
-  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
-  handler.setInputAction(() => {
-    if (target) {
-      target.onPointerDown?.();
-    }
-    event.trigger("pointer-down");
-  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-
-  // 解决 ReactPoint 点击事件无法触发的问题
-  container.addEventListener("click", () => {
-    event.trigger("left-click");
-  });
-  container.addEventListener("pointerup", () => {
-    if (target) {
-      target.onPointerUp?.();
-    }
-    event.trigger("pointer-up");
-  });
-
-  handler.setInputAction((e) => {
-    if (target) {
-      target.onLClick?.();
-    }
-    event.trigger("left-click");
-  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-  handler.setInputAction(() => {
-    if (target) {
-      target.onRClick?.();
-    }
-    event.trigger("right-click");
-  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-
-  handler.setInputAction(() => {
-    if (target) {
-      target.onDbClick?.();
-    }
-    event.trigger("double-click");
-  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-
-  event.on("destroy", () => {
-    viewer.destroy();
-  });
-}
+import { CesiumMap } from "./CesiumMap";
+
+export function bindEvent(map: CesiumMap) {
+  const { event, viewer, container } = map;
+  viewer.camera.percentageChanged = 0.0001;
+
+  viewer.scene.preRender.addEventListener(() => {
+    event.trigger("view-preRender");
+    map.bussinesses.forEach((e) => e.show && e.onFrame?.());
+  });
+
+  viewer.camera.changed.addEventListener(() => {
+    event.trigger("view-change");
+  });
+  viewer.camera.moveEnd.addEventListener(() => {
+    event.trigger("view-moveEnd");
+  });
+  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+  let target: any;
+  handler.setInputAction((e: any) => {
+    event.canvas = [e.endPosition.x, e.endPosition.y];
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any = undefined;
+    const res = viewer.scene.pick(e.endPosition);
+
+    const a = res ? (res.id ? res.id : res.primitive ? res.primitive : undefined) : undefined;
+
+    if (a && !a.silent) {
+      _target = a;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+
+    if (target) {
+      map.cursor = target.cursor;
+    } else {
+      map.cursor = "";
+    }
+    event.trigger("pointer-move");
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+  handler.setInputAction(() => {
+    if (target) {
+      target.onPointerDown?.();
+    }
+    event.trigger("pointer-down");
+  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+  // 解决 ReactPoint 点击事件无法触发的问题
+  container.addEventListener("click", () => {
+    event.trigger("left-click");
+  });
+  container.addEventListener("pointerup", () => {
+    if (target) {
+      target.onPointerUp?.();
+    }
+    event.trigger("pointer-up");
+  });
+
+  handler.setInputAction((e) => {
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger("left-click");
+
+    // 穿透拾取，获取点击位置的所有对象
+    const pickedObjects = viewer.scene.drillPick(e.position);
+    if (pickedObjects && pickedObjects.length > 0) {
+      event.trigger("drill-pick", {
+        event: e,
+        pickedTargets: pickedObjects.map((it) => it.id?.target),
+        sourceObjects: pickedObjects,
+        position: e.position,
+      });
+    }
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  handler.setInputAction(() => {
+    if (target) {
+      target.onRClick?.();
+    }
+    event.trigger("right-click");
+  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+  handler.setInputAction(() => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    event.trigger("double-click");
+  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+  event.on("destroy", () => {
+    viewer.destroy();
+  });
+}