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

package/src/mine/MineEvent.ts

@@ -1,46 +1,46 @@
-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();
-  });
-}
+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,125 +1,125 @@
-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";
-import { bindEvent } from "./MineEvent";
-import { drawPoint } from "./MinePoint";
-import { drawPolygon } from "./MinePolygon";
-import { drawPolyline } from "./MinePolyline";
-import { drawTile3D } from "./MineTile3D";
-
-const MAX_ZOOM = 18;
-
-export class MineMap extends MapCombine {
-  viewer: any;
-  container: HTMLDivElement;
-
-  get cursor(): string {
-    return this.viewer.getCursor();
-  }
-  set cursor(val: string) {
-    this.viewer.setCursor(val);
-  }
-
-  get moveable(): boolean {
-    return this.viewer.dragPan.isEnabled();
-  }
-  set moveable(val: boolean) {
-    val ? this.viewer.dragPan.enable() : this.viewer.dragPan.disable();
-  }
-  get center(): number[] {
-    const p = this.viewer.getCenter();
-    return [p.lng, p.lat];
-  }
-  set center(val: number[]) {
-    this.viewer.setCenter(val);
-  }
-
-  get zoom(): number {
-    return this.viewer.getZoom();
-  }
-  set zoom(val: number) {
-    this.viewer.setZoom(val);
-  }
-
-  constructor(viewer: any) {
-    super();
-    this.viewer = viewer;
-    this.container = viewer.getContainer();
-    this.container.children.item(1).appendChild(this.htmllayer);
-    this.cursor = "default";
-    bindEvent(this);
-  }
-
-  canvasTgeography(p: number[]): number[] {
-    const res = this.viewer.getTDSpaceCoord({ point: p, disableLayer: true });
-    return [res.lngLat.lng, res.lngLat.lat, 0];
-  }
-  geographyTcanvas(p: number[]): number[] {
-    const res = this.viewer.project([p[0], p[1]], p[2] ?? 0);
-    return [res.x, res.y];
-  }
-
-  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
-    const e = new Point(this, option);
-    drawPoint(this, e);
-    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);
-    return e;
-  }
-  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
-    const e = new Polygon(this, option);
-    drawPolygon(this, e);
-    return e;
-  }
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @param points
-   * @param opt
-   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
-   */
-  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
-    if (points?.length === 0) {
-      return this.flyTo(points[0], opt);
-    }
-    const rectangle = this.getBounds(points, { canvas: this.viewer.getCanvas(), ...opt });
-
-    // 设置地图视图，使用调整后的边界范围
-    this.viewer.fitBounds(
-      [
-        [rectangle[0], rectangle[1]],
-        [rectangle[2], rectangle[3]],
-      ],
-      {
-        maxZoom: opt?.maxZoom ?? MAX_ZOOM,
-      },
-    );
-  }
-
-  /**
-   * 移动点位到中心点
-   * @param point
-   */
-  flyTo(point, opt = {}) {
-    // 设置相机视角
-    this.viewer.flyTo({ center: point, ...opt });
-  }
-
-  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
-    const e = new Tile3D(this, option);
-    drawTile3D(this, e);
-    return e;
-  }
-}
+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";
+import { bindEvent } from "./MineEvent";
+import { drawPoint } from "./MinePoint";
+import { drawPolygon } from "./MinePolygon";
+import { drawPolyline } from "./MinePolyline";
+import { drawTile3D } from "./MineTile3D";
+
+const MAX_ZOOM = 18;
+
+export class MineMap extends MapCombine {
+  viewer: any;
+  container: HTMLDivElement;
+
+  get cursor(): string {
+    return this.viewer.getCursor();
+  }
+  set cursor(val: string) {
+    this.viewer.setCursor(val);
+  }
+
+  get moveable(): boolean {
+    return this.viewer.dragPan.isEnabled();
+  }
+  set moveable(val: boolean) {
+    val ? this.viewer.dragPan.enable() : this.viewer.dragPan.disable();
+  }
+  get center(): number[] {
+    const p = this.viewer.getCenter();
+    return [p.lng, p.lat];
+  }
+  set center(val: number[]) {
+    this.viewer.setCenter(val);
+  }
+
+  get zoom(): number {
+    return this.viewer.getZoom();
+  }
+  set zoom(val: number) {
+    this.viewer.setZoom(val);
+  }
+
+  constructor(viewer: any) {
+    super();
+    this.viewer = viewer;
+    this.container = viewer.getContainer();
+    this.container.children.item(1).appendChild(this.htmllayer);
+    this.cursor = "default";
+    bindEvent(this);
+  }
+
+  canvasTgeography(p: number[]): number[] {
+    const res = this.viewer.getTDSpaceCoord({ point: p, disableLayer: true });
+    return [res.lngLat.lng, res.lngLat.lat, 0];
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const res = this.viewer.project([p[0], p[1]], p[2] ?? 0);
+    return [res.x, res.y];
+  }
+
+  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
+    const e = new Point(this, option);
+    drawPoint(this, e);
+    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);
+    return e;
+  }
+  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
+    const e = new Polygon(this, option);
+    drawPolygon(this, e);
+    return e;
+  }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   */
+  flyToViewer(points, opt = { avoid: [0, 0, 0, 0], maxZoom: MAX_ZOOM }) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
+    const rectangle = this.getBounds(points, { canvas: this.viewer.getCanvas(), ...opt });
+
+    // 设置地图视图，使用调整后的边界范围
+    this.viewer.fitBounds(
+      [
+        [rectangle[0], rectangle[1]],
+        [rectangle[2], rectangle[3]],
+      ],
+      {
+        maxZoom: opt?.maxZoom ?? MAX_ZOOM,
+      },
+    );
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    // 设置相机视角
+    this.viewer.flyTo({ center: point, ...opt });
+  }
+
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    const e = new Tile3D(this, option);
+    drawTile3D(this, e);
+    return e;
+  }
+}

package/src/mine/MinePoint.ts

@@ -1,82 +1,78 @@
-
 import { Point } from "../basic/Point";
 import { MineMap } from "./MineMap";
 
-
 export function drawPoint(map: MineMap, point: Point<unknown>) {
-  const { viewer } = map
-  const { size, center } = point
-  let status = 0
-  let skip = 0
+  const { viewer } = map;
+  const { size, center } = point;
+  let status = 0;
+  let skip = 0;
 
-  const img = document.createElement('img')
-  img.src = point.src
-  img.width = size[0]
-  img.height = size[1]
-  img.style.cursor = point.cursor
+  const img = document.createElement("img");
+  img.src = point.src;
+  img.width = size[0];
+  img.height = size[1];
+  img.style.cursor = point.cursor;
 
   img.onpointerenter = () => {
-    status == 2 && point.event.trigger('pointer-in')
-  }
+    status == 2 && point.event.trigger("pointer-in");
+  };
   img.onpointerleave = () => {
-    status == 2 && point.event.trigger('pointer-out')
-  }
+    status == 2 && point.event.trigger("pointer-out");
+  };
 
   img.onclick = () => {
-    status == 2 && point.event.trigger('left-click')
-  }
+    status == 2 && point.event.trigger("left-click");
+  };
   img.oncontextmenu = () => {
-    status == 2 && point.event.trigger('right-click')
-  }
+    status == 2 && point.event.trigger("right-click");
+  };
 
   const marker = new minemap.Marker({
     draggable: point.editable,
     rotation: 0,
-    offset: [-size[0] * (center[0]), -size[1] * (center[1])],
-    element: img
-  })
-
+    offset: [-size[0] * center[0], -size[1] * center[1]],
+    element: img,
+  });
 
   if (point.coordinates) {
-    status = 2
-    marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0)
+    status = 2;
+    marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0);
     point.show && marker.addTo(map.viewer);
   }
 
-
   const onMouseMove = (e: any) => {
     switch (status) {
       case 0:
-        status = 1
-        marker.setLngLat(e.lngLat)
+        status = 1;
+        marker.setLngLat(e.lngLat);
         point.show && marker.addTo(map.viewer);
         break;
       case 1:
         marker.setLngLat(e.lngLat);
-        break
+        break;
     }
-  }
+  };
 
   const onUpdate = (e: Set<string>) => {
     if (skip) {
-      skip--
-      return
+      skip--;
+      return;
     }
-    const { size, center } = point
-    e.forEach(key => {
+    const { size, center } = point;
+    e.forEach((key) => {
       switch (key) {
-        case 'show':
-          point.show ? marker.addTo(map.viewer) : marker.remove()
+        case "show":
+          point.show ? marker.addTo(map.viewer) : marker.remove();
           break;
-        case 'editable':
-          marker.setDraggable(point.editable)
+        case "editable":
+          marker.setDraggable(point.editable);
           break;
-        case 'coordinates':
+        case "coordinates":
           if (point.coordinates) {
-            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0)
+            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0);
             switch (status) {
               case 0:
-                point.show && marker.addTo(map.viewer)
+                point.show && marker.addTo(map.viewer);
                 status = 2;
                 break;
               case 1:
@@ -84,56 +80,52 @@ export function drawPoint(map: MineMap, point: Point<unknown>) {
                 break;
             }
           } else {
-            marker.remove()
-            status = 0
+            marker.remove();
+            status = 0;
           }
 
           break;
-        case 'src':
-          img.src = point.src
+        case "src":
+          img.src = point.src;
           break;
-        case 'size':
-          img.width = size[0]
-          img.height = size[1]
-          if (!e.has('center')) {
-            marker.setOffset([-size[0] * (center[0]), -size[1] * (center[1])])
+        case "size":
+          img.width = size[0];
+          img.height = size[1];
+          if (!e.has("center")) {
+            marker.setOffset([-size[0] * center[0], -size[1] * center[1]]);
           }
           break;
-        case 'center':
-          marker.setOffset([-size[0] * (center[0]), -size[1] * (center[1])])
+        case "center":
+          marker.setOffset([-size[0] * center[0], -size[1] * center[1]]);
           break;
-        case 'rotation':
-          marker.setRotation(point.rotation)
+        case "rotation":
+          marker.setRotation(point.rotation);
           break;
         default:
-          throw new Error(`${key} 还不支持修改`)
+          throw new Error(`${key} 还不支持修改`);
       }
-    })
-  }
-
+    });
+  };
 
   const onDestroy = () => {
-    marker.remove()
-    viewer.off('mousemove', onMouseMove)
-    viewer.off('click', onClick)
-    point.event.off('update', onUpdate)
-    point.event.off('destroy', onDestroy)
-
-  }
+    marker.remove();
+    viewer.off("mousemove", onMouseMove);
+    viewer.off("click", onClick);
+    point.event.off("update", onUpdate);
+    point.event.off("destroy", onDestroy);
+  };
   const onClick = () => {
     if (status == 1) {
-      status = 2
-      skip++
-      const p = marker.getLngLat()
-      point.coordinates = [p.lng, p.lat]
-      point.event.trigger('pointer-in')
+      status = 2;
+      skip++;
+      const p = marker.getLngLat();
+      point.coordinates = [p.lng, p.lat];
+      point.event.trigger("pointer-in");
     }
-  }
-
-
-  viewer.on('mousemove', onMouseMove)
-  viewer.on('click', onClick)
-  point.event.on('update', onUpdate)
-  point.event.on('destroy', onDestroy)
+  };
 
-}
+  viewer.on("mousemove", onMouseMove);
+  viewer.on("click", onClick);
+  point.event.on("update", onUpdate);
+  point.event.on("destroy", onDestroy);
+}