@hzab/map-combine 0.3.0-beta1 → 0.3.0

package/src/amap/AMapPolyline.ts

@@ -1,185 +1,185 @@
-import { AMap } from "./AMap";
-import { Polyline } from "../basic/Polyline";
-
-export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
-  const { event, viewer, LbsAMap } = map;
-
-  let status = 0;
-  let skip = 0;
-  let target = null;
-  let aMapPolylineEditor = null;
-
-  const _event = {
-    cursor: polyline.cursor,
-    silent: polyline.silent,
-    onPointerIn() {
-      status == 2 && polyline.event.trigger("pointer-in");
-    },
-    onPointerOut() {
-      status == 2 && polyline.event.trigger("pointer-out");
-    },
-    onLClick() {
-      status == 2 && polyline.event.trigger("left-click");
-    },
-    onRClick(e) {
-      event.canvas = [e.pixel.x, e.pixel.y];
-      if (polyline.menu) {
-        map.menu.show(polyline.menu);
-      }
-      status == 2 && polyline.event.trigger("right-click");
-    },
-    onDbClick() {
-      polyline.editable &&
-        status == 2 &&
-        setTimeout(() => {
-          aMapPolylineEditor.setTarget(target);
-          aMapPolylineEditor.open();
-          polyline.event.trigger("start-edit");
-        });
-    },
-  };
-
-  const bindEvent = (graphical) => {
-    graphical.on("click", _event.onLClick);
-    graphical.on("rightclick", _event.onRClick);
-    graphical.on("dblclick", _event.onDbClick);
-    graphical.on("mouseover", _event.onPointerIn);
-    graphical.on("mouseout", _event.onPointerOut);
-  };
-
-  aMapPolylineEditor = new LbsAMap.PolylineEditor(viewer, undefined, {
-    createOptions: {
-      strokeColor: polyline.stroke,
-      strokeWeight: polyline.lineWidth,
-      strokeStyle: polyline.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    },
-    editOptions: {
-      strokeColor: polyline.stroke,
-      strokeWeight: polyline.lineWidth,
-      strokeStyle: polyline.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    },
-  });
-
-  aMapPolylineEditor.on("add", (e) => {
-    status = 3;
-    target = e.target;
-    bindEvent(target);
-    // polygon.event.trigger("data-loaded");
-  });
-
-  if (polyline.coordinates) {
-    status = 2;
-    target = new LbsAMap.Polyline({
-      path: polyline.coordinates,
-      strokeColor: polyline.stroke,
-      strokeWeight: polyline.lineWidth,
-      strokeStyle: polyline.dash ? "dashed" : "solid",
-      strokeDasharray: [10, 10],
-    });
-    viewer.add(target);
-    bindEvent(target);
-  } else {
-    aMapPolylineEditor.close();
-    aMapPolylineEditor.setTarget();
-    aMapPolylineEditor.open();
-  }
-  const onUpdate = (e: Set<string>) => {
-    if (skip) {
-      skip--;
-      return;
-    }
-
-    e.forEach((key) => {
-      switch (key) {
-        case "show":
-          if (polyline.show) {
-            target.show();
-          } else {
-            target.hide();
-          }
-          break;
-        case "editable":
-          break;
-        case "coordinates":
-          if (polyline.coordinates) {
-            target.setPath(polyline.coordinates);
-            target.setzIndex(polyline.coordinates[2]);
-            target.show();
-            status = 2;
-          } else {
-            target.hide();
-            status = 0;
-          }
-          break;
-
-        case "lineWidth":
-          target.setOptions({
-            strokeWeight: polyline.lineWidth,
-          });
-          break;
-        case "stroke":
-          target.setOptions({
-            strokeColor: polyline.stroke,
-          });
-          break;
-        case "dash":
-          target.setOptions({
-            strokeStyle: polyline.dash ? "dashed" : "solid",
-          });
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`);
-      }
-    });
-  };
-  const onDbClick = () => {
-    switch (status) {
-      case 1:
-        status = 2;
-        skip++;
-        polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
-        polyline.event.trigger("data-loaded");
-        polyline.event.trigger("pointer-in");
-        break;
-      case 3:
-        polyline.event.trigger("stop-edit");
-        aMapPolylineEditor.setTarget();
-        aMapPolylineEditor.close();
-        break;
-    }
-  };
-  const onStartEdit = () => {
-    switch (status) {
-      case 2:
-        status = 3;
-        break;
-    }
-  };
-
-  const onStopEdit = () => {
-    if (status == 3) {
-      status = 2;
-      skip++;
-      polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
-    }
-  };
-
-  const onDestroy = () => {
-    viewer.remove(target);
-    aMapPolylineEditor.close();
-    aMapPolylineEditor.setTarget();
-    event.off("double-click", onDbClick);
-    polyline.event.off("update", onUpdate);
-    polyline.event.off("start-edit", onStartEdit);
-    polyline.event.off("stop-edit", onStopEdit);
-    polyline.event.off("destroy", onDestroy);
-  };
-
-  event.on("double-click", onDbClick);
-  polyline.event.on("update", onUpdate);
-  polyline.event.on("start-edit", onStartEdit);
-  polyline.event.on("stop-edit", onStopEdit);
-  polyline.event.on("destroy", onDestroy);
-}
+import { AMap } from "./AMap";
+import { Polyline } from "../basic/Polyline";
+
+export function drawPolyline(map: AMap, polyline: Polyline<unknown>) {
+  const { event, viewer, LbsAMap } = map;
+
+  let status = 0;
+  let skip = 0;
+  let target = null;
+  let aMapPolylineEditor = null;
+
+  const _event = {
+    cursor: polyline.cursor,
+    silent: polyline.silent,
+    onPointerIn() {
+      status == 2 && polyline.event.trigger("pointer-in");
+    },
+    onPointerOut() {
+      status == 2 && polyline.event.trigger("pointer-out");
+    },
+    onLClick() {
+      status == 2 && polyline.event.trigger("left-click");
+    },
+    onRClick(e) {
+      event.canvas = [e.pixel.x, e.pixel.y];
+      if (polyline.menu) {
+        map.menu.show(polyline.menu);
+      }
+      status == 2 && polyline.event.trigger("right-click");
+    },
+    onDbClick() {
+      polyline.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          aMapPolylineEditor.setTarget(target);
+          aMapPolylineEditor.open();
+          polyline.event.trigger("start-edit");
+        });
+    },
+  };
+
+  const bindEvent = (graphical) => {
+    graphical.on("click", _event.onLClick);
+    graphical.on("rightclick", _event.onRClick);
+    graphical.on("dblclick", _event.onDbClick);
+    graphical.on("mouseover", _event.onPointerIn);
+    graphical.on("mouseout", _event.onPointerOut);
+  };
+
+  aMapPolylineEditor = new LbsAMap.PolylineEditor(viewer, undefined, {
+    createOptions: {
+      strokeColor: polyline.stroke,
+      strokeWeight: polyline.lineWidth,
+      strokeStyle: polyline.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    },
+    editOptions: {
+      strokeColor: polyline.stroke,
+      strokeWeight: polyline.lineWidth,
+      strokeStyle: polyline.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    },
+  });
+
+  aMapPolylineEditor.on("add", (e) => {
+    status = 3;
+    target = e.target;
+    bindEvent(target);
+    // polygon.event.trigger("data-loaded");
+  });
+
+  if (polyline.coordinates) {
+    status = 2;
+    target = new LbsAMap.Polyline({
+      path: polyline.coordinates,
+      strokeColor: polyline.stroke,
+      strokeWeight: polyline.lineWidth,
+      strokeStyle: polyline.dash ? "dashed" : "solid",
+      strokeDasharray: [10, 10],
+    });
+    viewer.add(target);
+    bindEvent(target);
+  } else {
+    aMapPolylineEditor.close();
+    aMapPolylineEditor.setTarget();
+    aMapPolylineEditor.open();
+  }
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--;
+      return;
+    }
+
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          if (polyline.show) {
+            target.show();
+          } else {
+            target.hide();
+          }
+          break;
+        case "editable":
+          break;
+        case "coordinates":
+          if (polyline.coordinates) {
+            target.setPath(polyline.coordinates);
+            target.setzIndex(polyline.coordinates[2]);
+            target.show();
+            status = 2;
+          } else {
+            target.hide();
+            status = 0;
+          }
+          break;
+
+        case "lineWidth":
+          target.setOptions({
+            strokeWeight: polyline.lineWidth,
+          });
+          break;
+        case "stroke":
+          target.setOptions({
+            strokeColor: polyline.stroke,
+          });
+          break;
+        case "dash":
+          target.setOptions({
+            strokeStyle: polyline.dash ? "dashed" : "solid",
+          });
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+  };
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2;
+        skip++;
+        polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
+        polyline.event.trigger("data-loaded");
+        polyline.event.trigger("pointer-in");
+        break;
+      case 3:
+        polyline.event.trigger("stop-edit");
+        aMapPolylineEditor.setTarget();
+        aMapPolylineEditor.close();
+        break;
+    }
+  };
+  const onStartEdit = () => {
+    switch (status) {
+      case 2:
+        status = 3;
+        break;
+    }
+  };
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2;
+      skip++;
+      polyline.coordinates = target.getPath().map((item) => [item.lng, item.lat]);
+    }
+  };
+
+  const onDestroy = () => {
+    viewer.remove(target);
+    aMapPolylineEditor.close();
+    aMapPolylineEditor.setTarget();
+    event.off("double-click", onDbClick);
+    polyline.event.off("update", onUpdate);
+    polyline.event.off("start-edit", onStartEdit);
+    polyline.event.off("stop-edit", onStopEdit);
+    polyline.event.off("destroy", onDestroy);
+  };
+
+  event.on("double-click", onDbClick);
+  polyline.event.on("update", onUpdate);
+  polyline.event.on("start-edit", onStartEdit);
+  polyline.event.on("stop-edit", onStopEdit);
+  polyline.event.on("destroy", onDestroy);
+}

package/src/basic/MapCombine.ts

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