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

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/BasicElement.ts

@@ -1,35 +1,35 @@
 export interface BasicElementOption {
   /** 是否显示 */
-  show: boolean
+  show: boolean;
   /** 鼠标样式 */
-  cursor: string
+  cursor: string;
   /** 元素是否静默（不触发鼠标事件） */
-  silent: boolean
+  silent: boolean;
 }
 
 export abstract class BasicElement<T extends BasicElementOption> {
-  option: T
+  option: T;
   constructor(option: T) {
-    this.option = option
+    this.option = option;
   }
 
   update(option: Partial<T>) {
-    Object.assign(this.option, option)
-    this._onUpdate(option)
+    Object.assign(this.option, option);
+    this._onUpdate(option);
   }
 
-  protected abstract _onUpdate(option: Partial<T>): void
+  protected abstract _onUpdate(option: Partial<T>): void;
 
   /** 鼠标进入回调 */
-  onMouseIn?(): void
+  onMouseIn?(): void;
   /** 鼠标离开回调 */
-  onMouseOut?(): void
+  onMouseOut?(): void;
   /** 鼠标移动回调 */
-  onMouseMove?(): void
+  onMouseMove?(): void;
   /** 鼠标点击回调 */
-  onClick?(): void
+  onClick?(): void;
   /** 鼠标右键点击回调 */
-  onRClick?(): void
+  onRClick?(): void;
   /** 销毁元素 */
-  abstract destroy(): void
+  abstract destroy(): void;
 }

package/src/basic/BasicMarker.ts

@@ -1,45 +1,51 @@
-import { BasicElement, type BasicElementOption } from './BasicElement'
+import { BasicElement, type BasicElementOption } from "./BasicElement";
 
 export interface BasicMarkerOption extends BasicElementOption {
   /** 经度 */
-  lon: number
+  lon: number;
   /** 纬度 */
-  lat: number
+  lat: number;
   /** 海拔 */
-  alt: number
+  alt: number;
   /** 图标 */
-  icon?: string
+  icon?: string;
   /** 宽度 */
-  width: number
+  width: number;
   /** 高度 */
-  height: number
+  height: number;
   /** 横向偏移 */
-  x: number
+  x: number;
   /** 纵向偏移 */
-  y: number
+  y: number;
   /** 旋转角度 */
-  rotation: number
-  img?: HTMLCanvasElement | HTMLImageElement
+  rotation: number;
+  img?: HTMLCanvasElement | HTMLImageElement;
 }
 
 export abstract class BasicMarker extends BasicElement<BasicMarkerOption> {
   constructor(option: Partial<BasicMarkerOption> = {}) {
-    super(Object.assign({
-      show: true,
-      cursor: 'pointer',
-      silent: false,
-      lon: 120,
-      lat: 30,
-      alt: 0,
-      width: 64,
-      height: 64,
-      x: 0,
-      y: -32,
-      rotation: 0,
-      icon: BasicMarker.defualtIcon,
-    }, option))
+    super(
+      Object.assign(
+        {
+          show: true,
+          cursor: "pointer",
+          silent: false,
+          lon: 120,
+          lat: 30,
+          alt: 0,
+          width: 64,
+          height: 64,
+          x: 0,
+          y: -32,
+          rotation: 0,
+          icon: BasicMarker.defualtIcon,
+        },
+        option,
+      ),
+    );
   }
 
   /** 默认图标 */
-  static defualtIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAA7NJREFUeF7lmwlu3DAMRZ2TtbmNbtHmFr5Nk5O1YCAHiobL5yK5wAwQZPEmPn5+0bLzcjz55+XJ4z+2AWit/TyOg75+DNDp9+vz3n/4oO/nef7ekZylAHrQv3rgkXgIysdKGEsAFATOwXpbAaIUwKLAZxilIMoAtNaoZknu3g/JfPQC9PgSEGkAjqxToG9XdOd5Xqb3FfBglPQ3BGYaQgpAH/AfI2UU9DsXsJXqAYgGIwUhDAAIPjWwEU4vL00VBPjVAsptzwD4K1zwU+qRjFsBGD4TAh4C0Foj2XPGFRqEFfikBrquVHbu67sBKFlwX9wT+LyvkoRXj/pcAP6X4AmG4kEuP/AC4KTvuiAjZ+r7H6ZERB0KBFgFMAAp++d5es5B9XtNaZyHuHt/YVxwUjyD51wfrntnpwift5cDp0zoHBCAbPYVw7KUDgUhlAKkggwAdHDRe4QLDlTPAmTzWBTAg/yR2jdkPy6A0CKJeEMEXovrD/IABHmh2ed8Q+wUFWCmnKNlYCpAGJQJIOobCgQzm1wZWOoJAbBOmnXmaD0L8FRwCICHKQYEMMvflPHletGyE44rB2AGEg1g6hLdAFcBqBqI6RsGAGqZVcVGwCMlUAXAVE62BLr3zONVwSMAZg+AAmmthXqHHgTXPJkKWqWAqAmG+3MO3nEcyDTIgSs3QUoSMhhp5UbMpLbCbNW/pBzrOKQEQi2m0gvQpm8rxcDqryl/of5N4zQBCCdGfUBbv7PuBK/taPAh30ABcPVsloFiaGjwZgaHmcNd/3QsCoDLJKSCBAT4/BmVQgCUeoZUYGSJU0PFeaHS8QBIqWDq8q6XH8aXJT6fG3oXSKN3ndd4YABVKoCLH9xRuHOEsg97gNGiwkYFxgTvFl2rGC/gUoCiApdhwREaO0Y7xhQAqeFAusOqwJVEwNIPeQDg5i73jgLJGl9aAXeWQvXzSbcHTNNZ6mlRRAFC3bulnyoBa1boL0iUv+goTHkpA04pwGhzS/0gs1yuKS0NYIcfVNd9iQnOVIXaTMnTUFi47lcBcK8AWSaovABREry7FQYGLD0JDg14laqWKABoklwQql6CspJWYoKMH6SUsCv48hKYmqTQu4S730FcooChHFwQVk53UiksBaD0CLTpmyfcEfzSEgDa5S8IdwW/BUBXgfZ8QPqHCdesYbn9bSUAKmEe35bgtynACWFb8NsBAOWwNfhbACgQtgd/GwCmT7gl+NsBXGrwPg2KOj533PJGqHKwK8719AD+Aby+uV/6QmnsAAAAAElFTkSuQmCC'
+  static defualtIcon =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAA7NJREFUeF7lmwlu3DAMRZ2TtbmNbtHmFr5Nk5O1YCAHiobL5yK5wAwQZPEmPn5+0bLzcjz55+XJ4z+2AWit/TyOg75+DNDp9+vz3n/4oO/nef7ekZylAHrQv3rgkXgIysdKGEsAFATOwXpbAaIUwKLAZxilIMoAtNaoZknu3g/JfPQC9PgSEGkAjqxToG9XdOd5Xqb3FfBglPQ3BGYaQgpAH/AfI2UU9DsXsJXqAYgGIwUhDAAIPjWwEU4vL00VBPjVAsptzwD4K1zwU+qRjFsBGD4TAh4C0Foj2XPGFRqEFfikBrquVHbu67sBKFlwX9wT+LyvkoRXj/pcAP6X4AmG4kEuP/AC4KTvuiAjZ+r7H6ZERB0KBFgFMAAp++d5es5B9XtNaZyHuHt/YVxwUjyD51wfrntnpwift5cDp0zoHBCAbPYVw7KUDgUhlAKkggwAdHDRe4QLDlTPAmTzWBTAg/yR2jdkPy6A0CKJeEMEXovrD/IABHmh2ed8Q+wUFWCmnKNlYCpAGJQJIOobCgQzm1wZWOoJAbBOmnXmaD0L8FRwCICHKQYEMMvflPHletGyE44rB2AGEg1g6hLdAFcBqBqI6RsGAGqZVcVGwCMlUAXAVE62BLr3zONVwSMAZg+AAmmthXqHHgTXPJkKWqWAqAmG+3MO3nEcyDTIgSs3QUoSMhhp5UbMpLbCbNW/pBzrOKQEQi2m0gvQpm8rxcDqryl/of5N4zQBCCdGfUBbv7PuBK/taPAh30ABcPVsloFiaGjwZgaHmcNd/3QsCoDLJKSCBAT4/BmVQgCUeoZUYGSJU0PFeaHS8QBIqWDq8q6XH8aXJT6fG3oXSKN3ndd4YABVKoCLH9xRuHOEsg97gNGiwkYFxgTvFl2rGC/gUoCiApdhwREaO0Y7xhQAqeFAusOqwJVEwNIPeQDg5i73jgLJGl9aAXeWQvXzSbcHTNNZ6mlRRAFC3bulnyoBa1boL0iUv+goTHkpA04pwGhzS/0gs1yuKS0NYIcfVNd9iQnOVIXaTMnTUFi47lcBcK8AWSaovABREry7FQYGLD0JDg14laqWKABoklwQql6CspJWYoKMH6SUsCv48hKYmqTQu4S730FcooChHFwQVk53UiksBaD0CLTpmyfcEfzSEgDa5S8IdwW/BUBXgfZ8QPqHCdesYbn9bSUAKmEe35bgtynACWFb8NsBAOWwNfhbACgQtgd/GwCmT7gl+NsBXGrwPg2KOj533PJGqHKwK8719AD+Aby+uV/6QmnsAAAAAElFTkSuQmCC";
 }

package/src/basic/BasicMouseHandler.ts

@@ -1,8 +1,8 @@
-export abstract class BasicMouseHandler{
+export abstract class BasicMouseHandler {
   /** 鼠标在屏幕上的坐标 */
-  position = [0, 0]
+  position = [0, 0];
   /** 鼠标在地图上的坐标 */
-  location = [0, 0, 0]
+  location = [0, 0, 0];
   /** 忽略要素,使要素不会拦截鼠标事件 */
-  ignoreElement = false
+  ignoreElement = false;
 }

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