@hzab/map-combine 0.3.0-beta → 0.3.0

package/src/amap/AMapEvent.ts

@@ -1,42 +1,49 @@
-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();
-
-  container.addEventListener("mousedown", (e) => {
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", (e) => {
-    event.trigger("pointer-up");
-  });
-
-  viewer.on("mousemove", () => {
-    event.trigger("pointer-move");
-  });
-
-  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");
+    }
+  };
+  frame();
+
+  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/AMapPolygon.ts

@@ -13,7 +13,6 @@ export function drawPolygon(map: AMap, polygon: Polygon<unknown>) {
     cursor: polygon.cursor,
     silent: polygon.silent,
     onPointerIn() {
-      console.log("onPointerIn", status);
       status == 2 && polygon.event.trigger("pointer-in");
     },
     onPointerOut() {

package/src/amap/AMapPolyline.ts

@@ -13,7 +13,6 @@ export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
     cursor: polyline.cursor,
     silent: polyline.silent,
     onPointerIn() {
-      console.log("onPointerIn", status);
       status == 2 && polyline.event.trigger("pointer-in");
     },
     onPointerOut() {
@@ -69,7 +68,7 @@ export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
     bindEvent(target);
     // polygon.event.trigger("data-loaded");
   });
-  
+
   if (polyline.coordinates) {
     status = 2;
     target = new LbsAMap.Polyline({

package/src/basic/MapCombine.ts

@@ -1,92 +1,94 @@
-import { ContextMenu } from "./ContextMenu";
-import { MapElement } from "./MapElement";
-import { MapEvent } from "./MapEvent";
-import { Point, PointOption } from "./Point";
-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);
-
-  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 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 { 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 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");
+  }
+}

package/src/basic/ReactPoint.tsx

@@ -169,6 +169,7 @@ export class ReactPoint<K = undefined> extends MapElement<ReactPointOption<K>> {
 
 export function drawReactPoint(map: MapCombine, point: ReactPoint<unknown>) {
   const { event, htmllayer } = map;
+  /** 当前点位的状态 0:初始态  1:编辑态  2:显示态  3:拖动态   */
   let status = 0;
   let skip = 0;
 

package/src/cesium/CesiumEvent.ts

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

@@ -166,7 +166,6 @@ export class CesiumMap extends MapCombine {
   private _createLayer() {
     const { url, subdomains, proj, minZoomLevel, maxZoomLevel } = this.option;
     let layer: any;
-    console.log("url", url);
     let options = {
       ...this.option,
     };