@hzab/map-combine 0.4.2-alpha.1 → 0.4.2-alpha.2

package/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 feat: 点线面 height 设置
 fix: openlayer getFromLonLat this 指向修复
+break: PointAggregation datas 改为数组对象
 
 # @hzab/map-combine@0.4.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.4.2-alpha.1",
+  "version": "0.4.2-alpha.2",
   "description": "地图组件",
   "main": "src",
   "scripts": {

package/src/amap/AMapPoint.ts

@@ -1,143 +1,149 @@
-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);
-  };
-}
+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.coordinates[2] ?? 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),
+      height: point.coordinates[2] ?? point.height,
+    });
+    viewer.off("click", eventMarker);
+  };
+
+  if (point.coordinates) {
+    darwMarker({
+      position: new LbsAMap.LngLat(point.coordinates[0], point.coordinates[1]),
+      height: point.coordinates[2] ?? point.height,
+    });
+  } 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

@@ -1,195 +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() {
-      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);
-}
+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() {
+      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],
+      zIndex: polygon.coordinates[0]?.[2] ?? polygon.height,
+    });
+    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[0]?.[2] ?? polygon.height);
+            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

@@ -1,185 +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() {
-      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],
+      zIndex: polyline.coordinates[0]?.[2] ?? polyline.height,
+    });
+    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[0]?.[2] ?? polyline.height);
+            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/PointAggregation.tsx

@@ -1,24 +1,27 @@
 import { ReactElement } from "react";
-import { throttle } from "lodash";
 
 import { LATTOONE, LONTOONE } from "../utils/static";
 import { getUUID, setValue } from "../utils";
 import { MapCombine } from "../basic/MapCombine";
 import { ReactPoint } from "./ReactPoint";
 
+export interface PointOption {
+  coordinates: number[];
+  props?: any;
+}
 export interface PointAggregationOption {
   /** 组件名，唯一标识 */
   name: string;
   /** 组件是否显示 */
   show: boolean;
   /** 数据点 */
-  datas: any[];
+  datas: PointOption[];
   /** 小于该值的等级下会聚合 */
   maxZoomLevel?: number;
   /** 值越大聚合点的间距越小 */
   density?: number;
   /** 点的展示元素 */
-  element(datas: any[], p: number[]): ReactElement;
+  element(datas: PointOption[], p: number[]): ReactElement;
   /** 坐标处理回调 */
   location(lonlat: number[]): number[];
 }
@@ -28,10 +31,12 @@ class TileNode {
   private _element: any;
   marker: ReactPoint | undefined;
   private _map: MapCombine;
-  constructor(map: MapCombine, location: number[], element: ReactElement) {
+  option;
+  constructor(map: MapCombine, location: number[], element: ReactElement, option = {}) {
     this._map = map;
     this._location = location;
     this._element = element;
+    this.option = option;
   }
   test(east: number, south: number, west: number, north: number) {
     if (
@@ -42,6 +47,7 @@ class TileNode {
     ) {
       if (!this.marker) {
         const option = {
+          ...this.option,
           show: true,
           name: getUUID(),
           element: () => this._element,
@@ -94,6 +100,8 @@ export class PointAggregation {
     this._onAfterViewChange = this.onAfterViewChange.bind(this);
     this.onAfterViewChange();
     event.on("view-moveEnd", this._onAfterViewChange);
+    // 初始化没有渲染，移动之后才渲染点位
+    this._update();
   }
 
   private _turnon(zoom: number) {
@@ -106,10 +114,12 @@ export class PointAggregation {
         const grid = new Map();
         const max = Math.pow(2, zoom) * (_option.density ?? 1);
         _option.datas.forEach((data) => {
-          const location = typeof _option.location === "function" ? _option.location(data) : data;
+          const location =
+            typeof _option.location === "function" ? _option.location(data.coordinates) : data.coordinates;
           const x = Math.floor(LONTOONE.forward(location[0]) * max * 2);
           const y = Math.floor(LATTOONE.forward(location[1]) * max);
           const k = `${x}_${y}`;
+          // 对数据进行分组
           const group = grid.get(k);
           if (group) {
             group.push(data);
@@ -118,10 +128,11 @@ export class PointAggregation {
           }
         });
         // 处理聚合点坐标
-        grid.forEach((e) => {
-          const { lon, lat } = e.reduce(
+        grid.forEach((group) => {
+          const { lon, lat } = group?.reduce(
             (a, b) => {
-              const loaction = typeof _option.location === "function" ? _option.location(b) : b;
+              const { coordinates } = b;
+              const loaction = typeof _option.location === "function" ? _option.location(coordinates) : coordinates;
               a.lon += loaction[0];
               a.lat += loaction[1];
               return a;
@@ -131,8 +142,8 @@ export class PointAggregation {
           cache.push(
             new TileNode(
               this._map,
-              [lon / e.length, lat / e.length],
-              _option.element(e, [lon / e.length, lat / e.length]),
+              [lon / group.length, lat / group.length],
+              _option.element(group, [lon / group.length, lat / group.length]),
             ),
           );
         });
@@ -140,7 +151,7 @@ export class PointAggregation {
       } else {
         const cache: TileNode[] = [];
         _option.datas.forEach((e) => {
-          const location = _option.location(e);
+          const location = _option.location(e.coordinates);
           cache.push(new TileNode(this._map, location, _option.element([e], location)));
         });
         _cache.set(zoom, cache);

package/src/mine/MinePoint.ts

@@ -69,7 +69,7 @@ export function drawPoint(map: MineMap, point: Point<unknown>) {
           break;
         case "coordinates":
           if (point.coordinates) {
-            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0);
+            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? point.height);
             switch (status) {
               case 0:
                 point.show && marker.addTo(map.viewer);

package/src/mine/MinePolygon.ts

@@ -50,6 +50,7 @@ function getPolygonOption(polygon: Polygon<unknown>) {
       "fill-color": color,
       "fill-opacity": opacity,
     },
+    zIndex: polygon.coordinates[0]?.[2] ?? polygon.height,
   };
 }
 
@@ -148,7 +149,7 @@ function main(map: MineMap, polygon: Polygon<unknown>) {
         type: "Feature",
         geometry: {
           type: "Polygon",
-          coordinates: [[...coordinates, coordinates[0]]],
+          coordinates: [[...coordinates, coordinates[0]].map((it) => [it[0], it[1], it[2] ?? polygon.height])],
         },
         properties: {
           id: polygon.name,

package/src/mine/MinePolyline.ts

@@ -56,6 +56,7 @@ function getLayerOption(polyline: Polyline<unknown>) {
           "line-color": polyline.stroke,
           "line-width": polyline.lineWidth,
         },
+    zIndex: polyline.coordinates[0]?.[2] ?? polyline.height,
   };
 }
 
@@ -130,7 +131,7 @@ function main(map: MineMap, polyline: Polyline<unknown>) {
         type: "Feature",
         geometry: {
           type: "LineString",
-          coordinates: coordinates,
+          coordinates: coordinates?.map((it) => [it[0], it[1], it[2] ?? polyline.height]),
         },
         properties: {
           id: polyline.name,