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

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/amap/AMapPoint.ts

@@ -1,89 +1,76 @@
 import { Point } from "../basic/Point";
 import { AMap } from "./AMap";
 
-const RD = 0.017453292519943295;
-
 export function drawPoint(map: AMap, point: Point<unknown>) {
   const { viewer, event, LbsAMap } = map;
   let status = 0;
-  let marker = null;
-  const _event = {
-    onPointerIn() {
-      point.event.trigger("pointer-in");
-    },
-    onPointerOut() {
-      point.event.trigger("pointer-out");
-    },
-    onLClick() {
-      point.event.trigger("left-click");
-    },
-    onRClick(e) {
-      event.canvas = [e.pixel.x, e.pixel.y];
-      point.event.trigger("right-click");
-    },
-    onPointerDown() {
-      if (point.editable && status == 2) {
-        status = 3;
-        map.moveable = false;
-      }
-    },
-    onPointerUp() {
-      if (point.editable && status == 3) {
-        status = 2;
-        map.moveable = true;
-        point.coordinates = [event.geography[0], event.geography[1], point.coordinates[2] ?? point.height];
-        point.event.trigger("data-update");
-      }
+  let skip = 0;
+
+  const { size, center } = point;
+  const pointOffset = [-size[0] * center[0], -size[1] * center[1]];
+  const marker = new LbsAMap.Marker({
+    position: new LbsAMap.LngLat(0, 0),
+    height: point.height,
+    title: point._option.name,
+    icon: new LbsAMap.Icon({
+      image: point.src,
+      size: point.size,
+      imageSize: point.size,
+    }),
+    angle: point.rotation,
+    anchor: point.center,
+    draggable: point.editable,
+    extData: {
+      cursor: point.cursor,
+      silent: point.silent,
     },
-  };
+    offset: pointOffset,
+  });
+  setIcon();
+  viewer.add([marker]);
 
-  const bindEvent = (graphical) => {
-    graphical.on("click", _event.onLClick);
-    graphical.on("rightclick", _event.onRClick);
-    graphical.on("mouseover", _event.onPointerIn);
-    graphical.on("mouseout", _event.onPointerOut);
-  };
+  if (point.coordinates) {
+    status = 2;
+    marker.setPosition(point.coordinates);
+    if (point.show) {
+      marker.show();
+    } else {
+      marker.hide();
+    }
+  }
 
-  const darwMarker = (opt) => {
-    marker = new LbsAMap.Marker({
-      ...opt,
-      title: point._option.name,
-      icon: new LbsAMap.Icon({
-        image: point.src,
-        size: point.size,
-        imageSize: point.size,
-      }),
-      angle: point.rotation * RD,
-      anchor: point.center,
-      draggable: point.editable,
-      extData: {
-        cursor: point.cursor,
-        silent: point.silent,
-      },
-    });
-    bindEvent(marker);
-    viewer.add([marker]);
+  const onMouseMove = () => {
+    switch (status) {
+      case 0:
+        status = 1;
+        marker.setPosition(event.geography);
+        if (point.show) {
+          marker.show();
+        } else {
+          marker.hide();
+        }
+        break;
+      case 1:
+      case 3:
+        marker.setPosition(event.geography);
+        break;
+    }
   };
 
-  const eventMarker = (e) => {
-    darwMarker({
-      position: new LbsAMap.LngLat(e.lnglat.lng, e.lnglat.lat),
-      height: point.coordinates[2] ?? point.height,
-    });
-    viewer.off("click", eventMarker);
+  const onClick = () => {
+    if (status == 1) {
+      status = 2;
+      skip++;
+      point.coordinates = event.geography;
+      point.event.trigger("pointer-in");
+    }
   };
 
-  if (point.coordinates) {
-    darwMarker({
-      position: new LbsAMap.LngLat(point.coordinates[0], point.coordinates[1]),
-      height: point.coordinates[2] ?? point.height,
-    });
-  } else {
-    viewer.on("click", eventMarker);
-  }
-
   const onUpdate = (e: Set<string>) => {
-    const keys = new Set();
+    if (skip) {
+      skip--;
+      return;
+    }
     e.forEach((key) => {
       switch (key) {
         case "show":
@@ -110,40 +97,41 @@ export function drawPoint(map: AMap, point: Point<unknown>) {
           }
           break;
         case "src":
-          keys.add("icon");
+          setIcon();
           break;
         case "size":
-          keys.add("icon");
+          setIcon();
           break;
         case "center":
           marker.setAnchor(point.center);
           break;
         case "rotation":
-          marker.setAngle(point.rotation * RD);
+          marker.setAngle(point.rotation);
           break;
         default:
           throw new Error(`${key} 还不支持修改`);
       }
     });
-
-    keys.forEach((e) => {
-      switch (e) {
-        case "icon":
-          marker.setIcon(
-            new LbsAMap.Icon({
-              image: point.src,
-              size: point.size,
-              imageSize: point.size,
-            }),
-          );
-          break;
-      }
-    });
   };
 
+  function setIcon() {
+    marker.setIcon(
+      new LbsAMap.Icon({
+        image: point.src,
+        size: point.size,
+        imageSize: point.size,
+      }),
+    );
+  }
+
   const onDestroy = () => {
     marker.remove();
     point.event.off("update", onUpdate);
     point.event.off("destroy", onDestroy);
   };
+
+  event.on("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  point.event.on("update", onUpdate);
+  point.event.on("destroy", onDestroy);
 }

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();
+  });
+}

package/src/cesium/CesiumMap.ts

@@ -6,12 +6,14 @@ import { PointAggregationOption, PointAggregation } from "../basic/PointAggregat
 import { PolygonOption, Polygon } from "../basic/Polygon";
 import { PolylineOption, Polyline } from "../basic/Polyline";
 import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+import { type BasicModelOption, type BasicModel } from "../basic/BasicModel";
 
 import { bindEvent } from "./CesiumEvent";
 import { drawPoint } from "./CesiumPoint";
 import { drawPolygon } from "./CesiumPolygon";
 import { drawPolyline } from "./CesiumPolyline";
 import { drawTile3D } from "./CesiumTile3D";
+import { CesiumModel } from "./CesiumModel";
 
 const $m = 20037508.34278924;
 /**
@@ -236,6 +238,10 @@ export class CesiumMap extends MapCombine {
     return e;
   }
 
+  createModel(option?: Partial<BasicModelOption> | undefined): BasicModel {
+    return new CesiumModel(this, option);
+  }
+
   canvasTgeography(p: number[]): number[] {
     const { viewer } = this;
     const cartesian2 = new Cesium.Cartesian2(...p);
@@ -326,9 +332,14 @@ export class CesiumMap extends MapCombine {
    * @param point
    */
   flyTo(point, opt = {}) {
+    const height = this.zoomTdistance(this.zoom);
+    // 取消任何正在进行的飞行，防止排队
+    if (this.viewer.camera.cancelFlight) {
+      this.viewer.camera.cancelFlight();
+    }
     // 设置相机视角
     this.viewer.camera.flyTo({
-      destination: point,
+      destination: Cesium.Cartesian3.fromDegrees(point[0], point[1], height),
       ...opt,
     });
   }