@hzab/map-combine 0.3.1-alpha.1 → 0.4.1

package/src/mine/MineEvent.ts

@@ -1,42 +1,46 @@
-import { MineMap } from "./MineMap";
-
-export function bindEvent(map: MineMap) {
-  const { event, viewer, container } = map;
-
-  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.canvas = [e.point.x, e.point.y];
-    event.geography = [e.lngLat.lng, e.lngLat.lat, 0];
-  });
-  container.addEventListener("pointermove", (e) => {
-    event.trigger("pointer-move");
-  });
-  viewer.on("move", () => {
-    event.trigger("view-change");
-  });
-  viewer.on("mouseup", () => {
-    event.trigger("pointer-up");
-  });
-  viewer.on("mousedown", () => {
-    event.trigger("pointer-down");
-  });
-  viewer.on("click", () => {
-    event.trigger("left-click");
-  });
-
-  event.on("destroy", () => {
-    viewer.remove();
-  });
-}
+import { MineMap } from "./MineMap";
+
+export function bindEvent(map: MineMap) {
+  const { event, viewer, container } = map;
+
+  viewer.on("moveend", (e) => {
+    event.trigger("view-moveEnd");
+  });
+
+  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.canvas = [e.point.x, e.point.y];
+    event.geography = [e.lngLat.lng, e.lngLat.lat, 0];
+  });
+  container.addEventListener("pointermove", (e) => {
+    event.trigger("pointer-move");
+  });
+  viewer.on("move", () => {
+    event.trigger("view-change");
+  });
+  viewer.on("mouseup", () => {
+    event.trigger("pointer-up");
+  });
+  viewer.on("mousedown", () => {
+    event.trigger("pointer-down");
+  });
+  viewer.on("click", () => {
+    event.trigger("left-click");
+  });
+
+  event.on("destroy", () => {
+    viewer.remove();
+  });
+}

package/src/mine/MineMap.ts

@@ -1,5 +1,6 @@
 import { MapCombine } from "../basic/MapCombine";
 import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
 import { PolygonOption, Polygon } from "../basic/Polygon";
 import { PolylineOption, Polyline } from "../basic/Polyline";
 import { Tile3DOption, Tile3D } from "../basic/Tile3D";
@@ -67,6 +68,11 @@ export class MineMap extends MapCombine {
     return e;
   }
 
+  createPointAggregation(option?: PointAggregationOption): PointAggregation {
+    const e = new PointAggregation(this, option);
+    return e;
+  }
+
   createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
     const e = new Polyline(this, option);
     drawPolyline(this, e);

package/src/openlayer/OpenlayerEvent.ts

@@ -1,83 +1,87 @@
-import { OpenlayerMap } from "./OpenlayerMap";
-
-export function bindEvent(map: OpenlayerMap) {
-  const { event, viewer, container } = map;
-  let target: any;
-  let moving = false;
-
-  const frame = () => {
-    if (map.isAlive) {
-      requestAnimationFrame(frame);
-      event.trigger("view-preRender");
-    }
-  };
-  frame();
-
-  viewer.on("pointermove", (e) => {
-    event.canvas = e.pixel;
-    event.geography = map.canvasTgeography(event.canvas);
-    let _target: any;
-    if (moving) {
-      event.trigger("pointer-move");
-      return;
-    }
-    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
-    _target = res ? res.get("event") : undefined;
-    if (_target?.silent) {
-      _target = undefined;
-    }
-    if (_target !== target) {
-      target?.onPointerOut?.();
-      _target?.onPointerIn?.();
-      target = _target;
-    }
-    event.trigger("pointer-move");
-  });
-
-  container.addEventListener("mousedown", () => {
-    if (target) {
-      moving = true;
-      target.onPointerDown?.();
-    }
-    event.trigger("pointer-down");
-  });
-
-  container.addEventListener("mouseup", () => {
-    if (target) {
-      moving = false;
-      target.onPointerUp?.();
-    }
-    event.trigger("pointer-up");
-  });
-
-  container.addEventListener("contextmenu", (e) => {
-    e.preventDefault();
-    if (target) {
-      target.onRClick?.();
-    }
-  });
-
-  viewer.on("click", () => {
-    if (target) {
-      target.onLClick?.();
-    }
-    event.trigger("left-click");
-  });
-
-  viewer.on("dblclick", () => {
-    if (target) {
-      target.onDbClick?.();
-    }
-    map.event.trigger("double-click");
-  });
-
-  let key = 0;
-
-  viewer.on("precompose", () => {
-    const _key = map.center.reduce((a, b) => a + b, map.zoom);
-    if (key != _key) {
-      key = _key;
-      event.trigger("view-change");
-    }
-  });
-}
+import { OpenlayerMap } from "./OpenlayerMap";
+
+export function bindEvent(map: OpenlayerMap) {
+  const { event, viewer, container } = map;
+  let target: any;
+  let moving = false;
+
+  const frame = () => {
+    if (map.isAlive) {
+      requestAnimationFrame(frame);
+      event.trigger("view-preRender");
+    }
+  };
+  frame();
+
+  viewer.on("moveend", (e) => {
+    event.trigger("view-moveEnd");
+  });
+
+  viewer.on("pointermove", (e) => {
+    event.canvas = e.pixel;
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any;
+    if (moving) {
+      event.trigger("pointer-move");
+      return;
+    }
+    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
+    _target = res ? res.get("event") : undefined;
+    if (_target?.silent) {
+      _target = undefined;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+    event.trigger("pointer-move");
+  });
+
+  container.addEventListener("mousedown", () => {
+    if (target) {
+      moving = true;
+      target.onPointerDown?.();
+    }
+    event.trigger("pointer-down");
+  });
+
+  container.addEventListener("mouseup", () => {
+    if (target) {
+      moving = false;
+      target.onPointerUp?.();
+    }
+    event.trigger("pointer-up");
+  });
+
+  container.addEventListener("contextmenu", (e) => {
+    e.preventDefault();
+    if (target) {
+      target.onRClick?.();
+    }
+  });
+
+  viewer.on("click", () => {
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger("left-click");
+  });
+
+  viewer.on("dblclick", () => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    map.event.trigger("double-click");
+  });
+
+  let key = 0;
+
+  viewer.on("precompose", () => {
+    const _key = map.center.reduce((a, b) => a + b, map.zoom);
+    if (key != _key) {
+      key = _key;
+      event.trigger("view-change");
+    }
+  });
+}

package/src/openlayer/OpenlayerMap.ts

@@ -15,6 +15,7 @@ import * as olExtent from "ol/extent";
 
 import { MapCombine } from "../basic/MapCombine";
 import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
 import { Projection } from "../utils/Projection";
 import { bindEvent } from "./OpenlayerEvent";
 import { PolylineOption, Polyline } from "../basic/Polyline";
@@ -156,6 +157,11 @@ export class OpenlayerMap extends MapCombine {
     return e;
   }
 
+  createPointAggregation(option?: PointAggregationOption): PointAggregation {
+    const e = new PointAggregation(this, option);
+    return e;
+  }
+
   createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
     const e = new Polyline(this, option);
     drawPolyline(this, e);
@@ -255,6 +261,10 @@ export class OpenlayerMap extends MapCombine {
   }
   canvasTspace(p: number[]): number[] {
     const coordinates = this.viewer.getCoordinateFromPixel(p);
+    // 解决 coordinates 为 null 异常情况
+    if (!coordinates) {
+      return [];
+    }
     return [coordinates[0] - this.offset[0], coordinates[1] - this.offset[1], 0];
   }
 
@@ -264,6 +274,10 @@ export class OpenlayerMap extends MapCombine {
 
   canvasTgeography(p: number[]): number[] {
     const coordinates = this.viewer.getCoordinateFromPixel(p);
+    // 解决 coordinates 为 null 异常情况
+    if (!coordinates) {
+      return [];
+    }
     return [Projection.xToLon(coordinates[0]), Projection.yToLat(coordinates[1]), 0];
   }