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

package/CHANGELOG.md

@@ -3,6 +3,8 @@
 feat: 点线面 height 设置
 fix: openlayer getFromLonLat this 指向修复
 break: PointAggregation datas 改为数组对象
+fix: cesium flyTo height 计算
+feat: map.bussinesses onFrame 事件回调
 
 # @hzab/map-combine@0.4.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.2",
+  "version": "0.4.2-alpha.3",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/amap/AMapEvent.ts

@@ -1,54 +1,55 @@
-import { AMap } from "./AMap";
-
-/**
- * 高德地图事件
- * 高德地图 元素事件由各自元素处理
- * @param map
- */
-export function bindEvent(map: AMap) {
-  const { event, viewer, container } = map;
-
-  const frame = () => {
-    if (map.isAlive) {
-      requestAnimationFrame(frame);
-      event.trigger("view-preRender");
-    }
-  };
-  frame();
-
-  viewer.on("moveend", (e) => {
-    event.trigger("view-moveEnd");
-    event.trigger("view-change");
-  });
-
-  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.trigger("pointer-move");
-    event.canvas = [e.pixel.x, e.pixel.y];
-    event.geography = [e.lnglat.lng, e.lnglat.lat];
-  });
-
-  viewer.on("mapmove", () => {
-    event.trigger("view-change");
-  });
-
-  viewer.on("click", (e) => {
-    event.trigger("left-click");
-  });
-
-  viewer.on("dblclick", (e) => {
-    map.event.trigger("double-click");
-  });
-}
+import { AMap } from "./AMap";
+
+/**
+ * 高德地图事件
+ * 高德地图 元素事件由各自元素处理
+ * @param map
+ */
+export function bindEvent(map: AMap) {
+  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");
+    event.trigger("view-change");
+  });
+
+  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.trigger("pointer-move");
+    event.canvas = [e.pixel.x, e.pixel.y];
+    event.geography = [e.lnglat.lng, e.lnglat.lat];
+  });
+
+  viewer.on("mapmove", () => {
+    event.trigger("view-change");
+  });
+
+  viewer.on("click", (e) => {
+    event.trigger("left-click");
+  });
+
+  viewer.on("dblclick", (e) => {
+    map.event.trigger("double-click");
+  });
+}

package/src/basic/BasicBusiness.ts

@@ -36,11 +36,11 @@ export abstract class BasicBusiness<T extends BasicBusinessOption> {
   constructor(map: MapCombine, option: T) {
     this._map = map;
     this._option = option;
-    // const oldElement = map.bussinesses.get(this.name);
-    // if (oldElement) {
-    //   oldElement.destroy();
-    // }
-    // map.bussinesses.set(this.name, this);
+    const oldElement = map.bussinesses.get(this.name);
+    if (oldElement) {
+      oldElement.destroy();
+    }
+    map.bussinesses.set(this.name, this);
   }
 
   /** 地图展示时触发一次 */

package/src/basic/BasicModel.ts

@@ -0,0 +1,48 @@
+import { BasicElement, type BasicElementOption } from "./BasicElement";
+
+export interface BasicModelOption extends BasicElementOption {
+  /** 经度 */
+  lon: number;
+  /** 纬度 */
+  lat: number;
+  /** 海拔 */
+  alt: number;
+  /** 模型地址 */
+  model: string;
+  /** 缩放 */
+  scale: number;
+  /** 朝向 */
+  heading: number;
+  /** 俯角 */
+  pitch: number;
+  /** 倾角 */
+  roll: number;
+  /** 最小尺寸 */
+  minSize: number;
+}
+
+export abstract class BasicModel extends BasicElement<BasicModelOption> {
+  constructor(option: Partial<BasicModelOption> = {}) {
+    super(
+      Object.assign(
+        {
+          show: true,
+          cursor: "pointer",
+          silent: false,
+          lon: 120,
+          lat: 30,
+          alt: 0,
+          scale: 1,
+          model: BasicModel.defualtModel,
+          heading: 0,
+          pitch: 0,
+          roll: 0,
+          minSize: 16,
+        },
+        option,
+      ),
+    );
+  }
+
+  static defualtModel = "./public/xiaoche.glb";
+}

package/src/basic/MapCombine.ts

@@ -7,6 +7,7 @@ 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";
@@ -72,6 +73,9 @@ export abstract class MapCombine {
 
   abstract createTile3D(option?: Partial<Tile3DOption>): Tile3D;
 
+  /** 创建模型 */
+  createModel?(option?: Partial<BasicModelOption>): BasicModel;
+
   abstract canvasTgeography(p: number[]): number[];
 
   abstract geographyTcanvas(p: number[]): number[];

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/ReactPopup.tsx

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

package/src/cesium/CesiumEvent.ts

@@ -1,84 +1,85 @@
-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");
+  }, 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();
+  });
+}