@hzab/map-combine 0.4.0-alpha.0 → 0.4.1

package/src/amap/AMapEvent.ts

@@ -1,54 +1,54 @@
-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");
+    }
+  };
+  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/MapCombine.ts

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

package/src/basic/PointAggregation.tsx

@@ -67,6 +67,7 @@ export class PointAggregation {
   private _current = 0;
   private _map: MapCombine;
   private _option: PointAggregationOption;
+  private _onAfterViewChange;
 
   /** 唯一标识 */
   get name() {
@@ -89,10 +90,10 @@ export class PointAggregation {
     this._map = map;
     this._option = option;
     const { event } = map;
+    // _onAfterViewChange 解决元素销毁 事件取消监听异常问题
+    this._onAfterViewChange = this.onAfterViewChange.bind(this);
     this.onAfterViewChange();
-    event.on("view-moveEnd", () => {
-      this.onAfterViewChange();
-    });
+    event.on("view-moveEnd", this._onAfterViewChange);
   }
 
   private _turnon(zoom: number) {
@@ -182,7 +183,7 @@ export class PointAggregation {
   /** 销毁组件 */
   destroy() {
     const { event } = this._map;
-    event.on("view-moveEnd", null);
+    event.off("view-moveEnd", this._onAfterViewChange);
     this._map.elements.delete(this.name);
     this._cache.forEach((e) => {
       e.forEach((f) => {