@hzab/map-combine 0.2.8 → 0.3.0-beta

package/src/amap/AMapPoint.ts

@@ -0,0 +1,143 @@
+import { Point } from "../basic/Point";
+import { AMap } from "./AMap";
+
+const RD = 0.017453292519943295;
+
+export function drawPoint(map: AMap, point: Point<unknown>) {
+  const { viewer, event, LbsAMap } = map;
+  let status = 0;
+  let marker = null;
+  const _event = {
+    onPointerIn() {
+      point.event.trigger("pointer-in");
+    },
+    onPointerOut() {
+      point.event.trigger("pointer-out");
+    },
+    onLClick() {
+      point.event.trigger("left-click");
+    },
+    onRClick(e) {
+      event.canvas = [e.pixel.x, e.pixel.y];
+      point.event.trigger("right-click");
+    },
+    onPointerDown() {
+      if (point.editable && status == 2) {
+        status = 3;
+        map.moveable = false;
+      }
+    },
+    onPointerUp() {
+      if (point.editable && status == 3) {
+        status = 2;
+        map.moveable = true;
+        point.coordinates = [event.geography[0], event.geography[1], point.height];
+        point.event.trigger("data-update");
+      }
+    },
+  };
+
+  const bindEvent = (graphical) => {
+    graphical.on("click", _event.onLClick);
+    graphical.on("rightclick", _event.onRClick);
+    graphical.on("mouseover", _event.onPointerIn);
+    graphical.on("mouseout", _event.onPointerOut);
+  };
+
+  const darwMarker = (opt) => {
+    marker = new LbsAMap.Marker({
+      ...opt,
+      title: point._option.name,
+      icon: new LbsAMap.Icon({
+        image: point.src,
+        size: point.size,
+        imageSize: point.size,
+      }),
+      angle: point.rotation * RD,
+      anchor: point.center,
+      draggable: point.editable,
+      extData: {
+        cursor: point.cursor,
+        silent: point.silent,
+      },
+    });
+    bindEvent(marker);
+    viewer.add([marker]);
+  };
+
+  const eventMarker = (e) => {
+    darwMarker({ position: new LbsAMap.LngLat(e.lnglat.lng, e.lnglat.lat) });
+    viewer.off("click", eventMarker);
+  };
+
+  if (point.coordinates) {
+    darwMarker({ position: new LbsAMap.LngLat(...point.coordinates) });
+  } else {
+    viewer.on("click", eventMarker);
+  }
+
+  const onUpdate = (e: Set<string>) => {
+    const keys = new Set();
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          if (status) {
+            if (point.show) {
+              marker.show();
+            } else {
+              marker.hide();
+            }
+          }
+          break;
+        case "editable":
+          marker.setDraggable(point.editable);
+          break;
+        case "coordinates":
+          if (point.coordinates) {
+            marker.setPosition(point.coordinates);
+            marker.setzIndex(point.coordinates[2]);
+            marker.show();
+            status = 2;
+          } else {
+            marker.hide();
+            status = 0;
+          }
+          break;
+        case "src":
+          keys.add("icon");
+          break;
+        case "size":
+          keys.add("icon");
+          break;
+        case "center":
+          marker.setAnchor(point.center);
+          break;
+        case "rotation":
+          marker.setAngle(point.rotation * RD);
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+
+    keys.forEach((e) => {
+      switch (e) {
+        case "icon":
+          marker.setIcon(
+            new LbsAMap.Icon({
+              image: point.src,
+              size: point.size,
+              imageSize: point.size,
+            }),
+          );
+          break;
+      }
+    });
+  };
+
+  const onDestroy = () => {
+    marker.remove();
+    point.event.off("update", onUpdate);
+    point.event.off("destroy", onDestroy);
+  };
+}

package/src/amap/AMapPolygon.ts

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

package/src/amap/AMapPolyline.ts

@@ -0,0 +1,186 @@
+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() {
+      console.log("onPointerIn", status);
+      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/amap/loader.ts

@@ -0,0 +1,58 @@
+const defaultVersion = "2.0";
+const defaultPlugins = ["AMap.Geocoder", "AMap.AutoComplete", "AMap.PolygonEditor", "AMap.PolylineEditor"];
+
+if (!window._AMapLoaderTemp) {
+  window._AMapLoaderTemp = {};
+}
+
+window._AMapLoaderTemp.loading = false;
+
+function Loader(opt) {
+  if (!window.AMap) {
+    window._AMapSecurityConfig = {
+      securityJsCode: opt.securityJsCode || window._AMapLoaderTemp.securityJsCode,
+    };
+  }
+  const { key, version, plugins } = opt || {};
+  return new Promise((resolve, reject) => {
+    // 判断是否有进行中的加载器
+    if (window._AMapLoaderTemp.loading && window._AMapLoaderTemp.promise) {
+      window._AMapLoaderTemp.promise.then((AMap) => {
+        resolve(window.AMap);
+      });
+      return;
+    }
+    // 判断是否存在 AMap，且入参 plugins 是否改变
+    if (
+      (window.AMap && !plugins) ||
+      (window.AMap && plugins && JSON.stringify(window._AMapLoaderTemp.plugins) === JSON.stringify(plugins))
+    ) {
+      resolve(window.AMap);
+      return;
+    }
+
+    window._AMapLoaderTemp.plugins = plugins ? [...defaultPlugins, ...(plugins || [])] : defaultPlugins;
+
+    // 不用地图组件时可以不安装  "@amap/amap-jsapi-loader"
+    const AMapLoader = require("@amap/amap-jsapi-loader");
+
+    window._AMapLoaderTemp.loading = true;
+    window._AMapLoaderTemp.promise = AMapLoader.load({
+      key: key || window._AMapLoaderTemp.key, // 申请好的Web端开发者Key，首次调用 load 时必填
+      version: version || defaultVersion, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      plugins: window._AMapLoaderTemp.plugins, // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    })
+      .then((AMap) => {
+        window.AMap = AMap;
+        resolve(window.AMap);
+        window._AMapLoaderTemp.loading = false;
+        return AMap;
+      })
+      .catch((e) => {
+        reject(e);
+        console.error("AMap loader: ", e);
+      });
+  });
+}
+
+export default Loader;