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

package/src/cesium/CesiumPolyline.ts

@@ -1,369 +1,369 @@
-import { Polyline } from "../basic/Polyline";
-import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
-import { CesiumMap } from "./CesiumMap";
-import iconPoint from "../assets/point.png";
-import iconAdd from "../assets/add.png";
-
-const source = `
-czm_material czm_getMaterial(czm_materialInput materialInput){
-    czm_material material = czm_getDefaultMaterial(materialInput);
-    vec2 st = vec2(fract(materialInput.st.x * k), materialInput.st.y);
-    vec4 colorImage = texture2D(image, vec2(fract((st.s - speed * czm_frameNumber * 0.005)), st.t));
-    vec3 tintedColor = color.rgb;
-    material.diffuse = tintedColor;
-    material.alpha = colorImage.a * color.a;
-    return material;
-}`;
-function createLineMaterial(e: Polyline<unknown>) {
-  if (e.icon || e.flow) {
-    const material = new Cesium.Material({
-      fabric: {
-        type: "PolylineFlowIcon",
-        uniforms: {
-          color: Cesium.Color.fromCssColorString(e.stroke),
-          image:
-            e.icon ||
-            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABQCAYAAADY692eAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL7SURBVHgB7ZjBbRpBFIZnB4mzS4ALiGM6SDqJK0g6iNxBUoHTSdKBj0hwgBJ8RgI8Y3mtAQye2X2r1b73/QcjvLv+bOnXP5+pVqvVv+Px+NVl5nA4fFssFv+dUOD3yz+P3+/39+H1OfsB7x83m82dEwr8fvkXPz+0bRte/xQ8M9ntdj+dUOD3yz+Pj1/G4/Hv8LIteO7HcrmcOKHA75ef5rUQ0+n0OZxN9wXP3Y1Go0cnFPj98tNU6RsED8H06RsED8E8KQSCh2D6828geLb5F4VA8Gzzq2sXEDybfH/tAoJnk3+1EAieTb6/dRHBs8e/WQgEzx6/yrkJwbPD9zk3IXh2+FmFQPDs8LMKEYPg2eBnFwLBs8HPkso0CJ5ufvZC1EHwdPOLC4Hg6eYXFyIGwdPLb1QIBE8vv1gq0yB4+viNFqIOgqeP36oQCJ4+fqtCxCB4uvitC4Hg6eK3kso0CJ4OfuuFqIPg6eCLFQLB08EXK0QMgjd8vmghELzh88WkMg2CN1y+6ELUQfCGy++kEAjecPmdHBkxsXEB8hRhmY/E8+/L2x8Dvyd+JwsRg+ANk99ZIWICYOLKsnWCgV/O77QQwXR/ldwfZOjBCQZ+Ob+zQqzX6/jLTHLvD/P2IHV+wm/O70Qq46df4V+ZTcEj2/l8PnVCgd+c38lChLOraKpiO51g4Dfniy9E+JTsezi7sm25qqq/s9msxIbhd8gXXwhEbth80UIgcsPnix0ZiJwOvthCIHI6+CILgcjp4YssBCKnh9+6EIicLn6rIwOR08dvtRCInD5+44VA5HTyGy8EIqeT36gQiJxefvGRgcjp5hcvBCKnm1+0EIicfn7RQiBy+vnZhUDkbPCzjgxEzg4/ayEQOTv8TxcCkbPF/3QhEDlb/JuFQOTs8a8eGYicTf7VhUDkbPI/XAhEzi7/w4VA5OzyLwqByNnmnxwZiJxtfszJQiBytvkx7wuByNnm13lfCETONr/OayEQOdv8NBUih0im8YgcIpnmBTnnQRKFAYSqAAAAAElFTkSuQmCC",
-          speed: 1,
-          k: 20,
-        },
-        source,
-      },
-      translucent() {
-        return true;
-      },
-    });
-    return material;
-  } else {
-    return e.dash
-      ? Cesium.Material.fromType("PolylineDash", {
-          color: Cesium.Color.fromCssColorString(e.stroke),
-          dashLength: 10,
-        })
-      : Cesium.Material.fromType("Color", {
-          color: Cesium.Color.fromCssColorString(e.stroke),
-        });
-  }
-}
-
-function cartesian3Tgeography(e: any): number[] {
-  const r = Cesium.Cartographic.fromCartesian(e);
-  return [Cesium.Math.toDegrees(r.longitude), Cesium.Math.toDegrees(r.latitude), r.height];
-}
-
-function geographyTcartesian3(e: number[]) {
-  return Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]);
-}
-
-const eyeOffset = new Cesium.Cartesian3(0, 0, -1);
-
-export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
-  const { event, viewer } = map;
-  let status = 0;
-  let skip = 0;
-
-  let material = createLineMaterial(polyline);
-  const appearance = new Cesium.PolylineMaterialAppearance({
-    material,
-  });
-  const markers = viewer.scene.primitives.add(
-    new Cesium.BillboardCollection({
-      show: polyline.show,
-    }),
-  );
-
-  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() {
-      if (polyline.menu) {
-        map.menu.show(polyline.menu);
-      }
-      status == 2 && polyline.event.trigger("right-click");
-    },
-    onDbClick() {
-      polyline.editable &&
-        status == 2 &&
-        setTimeout(() => {
-          polyline.event.trigger("start-edit");
-        });
-    },
-  };
-
-  let primitive: any;
-  let cache: any[];
-  let activeNode: ChainNode<any, any>;
-  if (polyline.coordinates) {
-    status = 2;
-    cache = polyline.coordinates.map((e) => Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]));
-    primitive = new Cesium.Primitive({
-      show: polyline.show,
-      geometryInstances: new Cesium.GeometryInstance({
-        geometry: new Cesium.PolylineGeometry({
-          positions: cache,
-          width: polyline.lineWidth,
-          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
-        }),
-        id: _event,
-      }),
-      appearance,
-    });
-    viewer.scene.primitives.add(primitive);
-  }
-
-  const editor = new PolylineEditor<any, any>();
-
-  editor.on("create-node", (n) => {
-    if (n.type == "node") {
-      const feature = markers.add({
-        position: new Cesium.Cartesian3(...n.position),
-        width: 16,
-        height: 16,
-        image: iconPoint,
-        eyeOffset,
-        id: {
-          cursor: "move",
-          onPointerDown() {
-            status = 4;
-            activeNode = n;
-            map.moveable = false;
-          },
-          onPointerUp() {
-            if (status == 4) {
-              status = 3;
-              map.moveable = true;
-              activeNode = undefined;
-            }
-          },
-          onDbClick() {
-            n.destroy();
-            cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
-            initPrimitive();
-          },
-        },
-      });
-      n.shape = feature;
-    } else {
-      const feature = markers.add({
-        position: new Cesium.Cartesian3(...n.position),
-        width: 16,
-        height: 16,
-        image: iconAdd,
-        eyeOffset,
-        id: {
-          cursor: "pointer",
-          onPointerDown() {
-            status = 4;
-            activeNode = n.insert();
-            map.cursor = "move";
-            map.moveable = false;
-          },
-        },
-      });
-      n.shape = feature;
-    }
-  });
-
-  editor.on("update-node", (n) => {
-    n.shape.position = new Cesium.Cartesian3(...n.position);
-  });
-  editor.on("remove-node", (n) => {
-    markers.remove(n.shape);
-  });
-  editor.on("empty", () => {
-    // markers.removeAll()
-    viewer.scene.primitives.remove(primitive);
-    status = 0;
-  });
-
-  const onUpdate = (e: Set<string>) => {
-    if (skip) {
-      skip--;
-      return;
-    }
-    const keys = new Set();
-    e.forEach((key) => {
-      switch (key) {
-        case "show":
-          if (primitive) {
-            primitive.show = polyline.show;
-            markers.show = polyline.show;
-          }
-          break;
-        case "editable":
-          break;
-        case "coordinates":
-          keys.add("Primitive");
-          break;
-        case "lineWidth":
-          keys.add("Primitive");
-          break;
-        case "icon":
-          keys.add("Material");
-          break;
-        case "flow":
-          keys.add("Material");
-          break;
-        case "stroke":
-          material.uniforms.color = Cesium.Color.fromCssColorString(polyline.stroke);
-          break;
-        case "dash":
-          keys.add("Material");
-
-          break;
-        default:
-          throw new Error(`${key} 还不支持修改`);
-      }
-    });
-    keys.forEach((key) => {
-      switch (key) {
-        case "Primitive":
-          if (polyline.coordinates) {
-            cache = polyline.coordinates.map((e) => geographyTcartesian3(e));
-          } else {
-            cache = [];
-            markers.removeAll();
-            status = 0;
-          }
-
-          initPrimitive();
-
-          break;
-        case "Material":
-          material = createLineMaterial(polyline);
-          appearance.material = material;
-          break;
-      }
-    });
-  };
-
-  const onStartEdit = () => {
-    switch (status) {
-      case 2:
-        status = 3;
-        editor.setCoordinates(cache.map((e) => [e.x, e.y, e.z]));
-        break;
-    }
-  };
-  let temp: any;
-  const onMouseMove = () => {
-    const e = event.geography;
-
-    switch (status) {
-      case 1:
-        cache.pop();
-        cache.push(Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]));
-        initPrimitive();
-        break;
-      case 4:
-        temp = Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]);
-        activeNode.update([temp.x, temp.y, temp.z]);
-        cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
-        initPrimitive();
-        break;
-    }
-  };
-
-  const onClick = () => {
-    const e = event.geography;
-    switch (status) {
-      case 0:
-        status = 1;
-        cache = [Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])];
-        cache.push(cache[0]);
-        initPrimitive();
-        break;
-      case 1:
-        cache.push(cache[cache.length - 1]);
-        // geometry.setCoordinates(cache)
-        initPrimitive();
-        break;
-    }
-  };
-
-  const initPrimitive = () => {
-    primitive && viewer.scene.primitives.remove(primitive);
-    if (cache.length > 1) {
-      const geometry = Cesium.PolylineGeometry.createGeometry(
-        new Cesium.PolylineGeometry({
-          positions: cache,
-          width: polyline.lineWidth,
-          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
-        }),
-      );
-      if (geometry) {
-        primitive = new Cesium.Primitive({
-          show: polyline.show,
-          asynchronous: false,
-          geometryInstances: new Cesium.GeometryInstance({
-            geometry,
-            id: _event,
-          }),
-          appearance,
-        });
-        viewer.scene.primitives.add(primitive);
-      } else {
-        primitive = undefined;
-      }
-    } else {
-      primitive = undefined;
-    }
-  };
-
-  const onDbClick = () => {
-    switch (status) {
-      case 1:
-        status = 2;
-        skip++;
-        cache.pop();
-        cache.pop();
-        // geometry.setCoordinates(cache)
-        polyline.coordinates = cache.map((e) => cartesian3Tgeography(e));
-        polyline.event.trigger("data-loaded");
-        polyline.event.trigger("pointer-in");
-        break;
-      case 3:
-        polyline.stopEdit();
-        break;
-    }
-  };
-
-  const onStopEdit = () => {
-    if (status == 3) {
-      status = 2;
-      skip++;
-      polyline.coordinates = editor.getCoordinates().map((e) => cartesian3Tgeography(e));
-      editor.setCoordinates([]);
-      polyline.event.trigger("pointer-in");
-    }
-  };
-
-  const onDestroy = () => {
-    primitive && viewer.scene.primitives.remove(primitive);
-    viewer.scene.primitives.remove(markers);
-    event.off("pointer-move", onMouseMove);
-    event.off("left-click", onClick);
-    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("pointer-move", onMouseMove);
-  event.on("left-click", onClick);
-  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 { Polyline } from "../basic/Polyline";
+import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
+import { CesiumMap } from "./CesiumMap";
+import iconPoint from "../assets/point.png";
+import iconAdd from "../assets/add.png";
+
+const source = `
+czm_material czm_getMaterial(czm_materialInput materialInput){
+    czm_material material = czm_getDefaultMaterial(materialInput);
+    vec2 st = vec2(fract(materialInput.st.x * k), materialInput.st.y);
+    vec4 colorImage = texture2D(image, vec2(fract((st.s - speed * czm_frameNumber * 0.005)), st.t));
+    vec3 tintedColor = color.rgb;
+    material.diffuse = tintedColor;
+    material.alpha = colorImage.a * color.a;
+    return material;
+}`;
+function createLineMaterial(e: Polyline<unknown>) {
+  if (e.icon || e.flow) {
+    const material = new Cesium.Material({
+      fabric: {
+        type: "PolylineFlowIcon",
+        uniforms: {
+          color: Cesium.Color.fromCssColorString(e.stroke),
+          image:
+            e.icon ||
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAABQCAYAAADY692eAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAL7SURBVHgB7ZjBbRpBFIZnB4mzS4ALiGM6SDqJK0g6iNxBUoHTSdKBj0hwgBJ8RgI8Y3mtAQye2X2r1b73/QcjvLv+bOnXP5+pVqvVv+Px+NVl5nA4fFssFv+dUOD3yz+P3+/39+H1OfsB7x83m82dEwr8fvkXPz+0bRte/xQ8M9ntdj+dUOD3yz+Pj1/G4/Hv8LIteO7HcrmcOKHA75ef5rUQ0+n0OZxN9wXP3Y1Go0cnFPj98tNU6RsED8H06RsED8E8KQSCh2D6828geLb5F4VA8Gzzq2sXEDybfH/tAoJnk3+1EAieTb6/dRHBs8e/WQgEzx6/yrkJwbPD9zk3IXh2+FmFQPDs8LMKEYPg2eBnFwLBs8HPkso0CJ5ufvZC1EHwdPOLC4Hg6eYXFyIGwdPLb1QIBE8vv1gq0yB4+viNFqIOgqeP36oQCJ4+fqtCxCB4uvitC4Hg6eK3kso0CJ4OfuuFqIPg6eCLFQLB08EXK0QMgjd8vmghELzh88WkMg2CN1y+6ELUQfCGy++kEAjecPmdHBkxsXEB8hRhmY/E8+/L2x8Dvyd+JwsRg+ANk99ZIWICYOLKsnWCgV/O77QQwXR/ldwfZOjBCQZ+Ob+zQqzX6/jLTHLvD/P2IHV+wm/O70Qq46df4V+ZTcEj2/l8PnVCgd+c38lChLOraKpiO51g4Dfniy9E+JTsezi7sm25qqq/s9msxIbhd8gXXwhEbth80UIgcsPnix0ZiJwOvthCIHI6+CILgcjp4YssBCKnh9+6EIicLn6rIwOR08dvtRCInD5+44VA5HTyGy8EIqeT36gQiJxefvGRgcjp5hcvBCKnm1+0EIicfn7RQiBy+vnZhUDkbPCzjgxEzg4/ayEQOTv8TxcCkbPF/3QhEDlb/JuFQOTs8a8eGYicTf7VhUDkbPI/XAhEzi7/w4VA5OzyLwqByNnmnxwZiJxtfszJQiBytvkx7wuByNnm13lfCETONr/OayEQOdv8NBUih0im8YgcIpnmBTnnQRKFAYSqAAAAAElFTkSuQmCC",
+          speed: 1,
+          k: 20,
+        },
+        source,
+      },
+      translucent() {
+        return true;
+      },
+    });
+    return material;
+  } else {
+    return e.dash
+      ? Cesium.Material.fromType("PolylineDash", {
+          color: Cesium.Color.fromCssColorString(e.stroke),
+          dashLength: 10,
+        })
+      : Cesium.Material.fromType("Color", {
+          color: Cesium.Color.fromCssColorString(e.stroke),
+        });
+  }
+}
+
+function cartesian3Tgeography(e: any): number[] {
+  const r = Cesium.Cartographic.fromCartesian(e);
+  return [Cesium.Math.toDegrees(r.longitude), Cesium.Math.toDegrees(r.latitude), r.height];
+}
+
+function geographyTcartesian3(e: number[]) {
+  return Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2] ?? 2);
+}
+
+const eyeOffset = new Cesium.Cartesian3(0, 0, -1);
+
+export function drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
+  const { event, viewer } = map;
+  let status = 0;
+  let skip = 0;
+
+  let material = createLineMaterial(polyline);
+  const appearance = new Cesium.PolylineMaterialAppearance({
+    material,
+  });
+  const markers = viewer.scene.primitives.add(
+    new Cesium.BillboardCollection({
+      show: polyline.show,
+    }),
+  );
+
+  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() {
+      if (polyline.menu) {
+        map.menu.show(polyline.menu);
+      }
+      status == 2 && polyline.event.trigger("right-click");
+    },
+    onDbClick() {
+      polyline.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          polyline.event.trigger("start-edit");
+        });
+    },
+  };
+
+  let primitive: any;
+  let cache: any[];
+  let activeNode: ChainNode<any, any>;
+  if (polyline.coordinates) {
+    status = 2;
+    cache = polyline.coordinates.map(geographyTcartesian3);
+    primitive = new Cesium.Primitive({
+      show: polyline.show,
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: new Cesium.PolylineGeometry({
+          positions: cache,
+          width: polyline.lineWidth,
+          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+        }),
+        id: _event,
+      }),
+      appearance,
+    });
+    viewer.scene.primitives.add(primitive);
+  }
+
+  const editor = new PolylineEditor<any, any>();
+
+  editor.on("create-node", (n) => {
+    if (n.type == "node") {
+      const feature = markers.add({
+        position: new Cesium.Cartesian3(...n.position),
+        width: 16,
+        height: 16,
+        image: iconPoint,
+        eyeOffset,
+        id: {
+          cursor: "move",
+          onPointerDown() {
+            status = 4;
+            activeNode = n;
+            map.moveable = false;
+          },
+          onPointerUp() {
+            if (status == 4) {
+              status = 3;
+              map.moveable = true;
+              activeNode = undefined;
+            }
+          },
+          onDbClick() {
+            n.destroy();
+            cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
+            initPrimitive();
+          },
+        },
+      });
+      n.shape = feature;
+    } else {
+      const feature = markers.add({
+        position: new Cesium.Cartesian3(...n.position),
+        width: 16,
+        height: 16,
+        image: iconAdd,
+        eyeOffset,
+        id: {
+          cursor: "pointer",
+          onPointerDown() {
+            status = 4;
+            activeNode = n.insert();
+            map.cursor = "move";
+            map.moveable = false;
+          },
+        },
+      });
+      n.shape = feature;
+    }
+  });
+
+  editor.on("update-node", (n) => {
+    n.shape.position = new Cesium.Cartesian3(...n.position);
+  });
+  editor.on("remove-node", (n) => {
+    markers.remove(n.shape);
+  });
+  editor.on("empty", () => {
+    // markers.removeAll()
+    viewer.scene.primitives.remove(primitive);
+    status = 0;
+  });
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--;
+      return;
+    }
+    const keys = new Set();
+    e.forEach((key) => {
+      switch (key) {
+        case "show":
+          if (primitive) {
+            primitive.show = polyline.show;
+            markers.show = polyline.show;
+          }
+          break;
+        case "editable":
+          break;
+        case "coordinates":
+          keys.add("Primitive");
+          break;
+        case "lineWidth":
+          keys.add("Primitive");
+          break;
+        case "icon":
+          keys.add("Material");
+          break;
+        case "flow":
+          keys.add("Material");
+          break;
+        case "stroke":
+          material.uniforms.color = Cesium.Color.fromCssColorString(polyline.stroke);
+          break;
+        case "dash":
+          keys.add("Material");
+
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`);
+      }
+    });
+    keys.forEach((key) => {
+      switch (key) {
+        case "Primitive":
+          if (polyline.coordinates) {
+            cache = polyline.coordinates.map((e) => geographyTcartesian3(e));
+          } else {
+            cache = [];
+            markers.removeAll();
+            status = 0;
+          }
+
+          initPrimitive();
+
+          break;
+        case "Material":
+          material = createLineMaterial(polyline);
+          appearance.material = material;
+          break;
+      }
+    });
+  };
+
+  const onStartEdit = () => {
+    switch (status) {
+      case 2:
+        status = 3;
+        editor.setCoordinates(cache.map((e) => [e.x, e.y, e.z]));
+        break;
+    }
+  };
+  let temp: any;
+  const onMouseMove = () => {
+    const e = event.geography;
+
+    switch (status) {
+      case 1:
+        cache.pop();
+        cache.push(geographyTcartesian3(e));
+        initPrimitive();
+        break;
+      case 4:
+        temp = geographyTcartesian3(e);
+        activeNode.update([temp.x, temp.y, temp.z]);
+        cache = editor.getCoordinates().map((e) => new Cesium.Cartesian3(...e));
+        initPrimitive();
+        break;
+    }
+  };
+
+  const onClick = () => {
+    const e = event.geography;
+    switch (status) {
+      case 0:
+        status = 1;
+        cache = [geographyTcartesian3(e)];
+        cache.push(cache[0]);
+        initPrimitive();
+        break;
+      case 1:
+        cache.push(cache[cache.length - 1]);
+        // geometry.setCoordinates(cache)
+        initPrimitive();
+        break;
+    }
+  };
+
+  const initPrimitive = () => {
+    primitive && viewer.scene.primitives.remove(primitive);
+    if (cache.length > 1) {
+      const geometry = Cesium.PolylineGeometry.createGeometry(
+        new Cesium.PolylineGeometry({
+          positions: cache,
+          width: polyline.lineWidth,
+          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+        }),
+      );
+      if (geometry) {
+        primitive = new Cesium.Primitive({
+          show: polyline.show,
+          asynchronous: false,
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry,
+            id: _event,
+          }),
+          appearance,
+        });
+        viewer.scene.primitives.add(primitive);
+      } else {
+        primitive = undefined;
+      }
+    } else {
+      primitive = undefined;
+    }
+  };
+
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2;
+        skip++;
+        cache.pop();
+        cache.pop();
+        // geometry.setCoordinates(cache)
+        polyline.coordinates = cache.map((e) => cartesian3Tgeography(e));
+        polyline.event.trigger("data-loaded");
+        polyline.event.trigger("pointer-in");
+        break;
+      case 3:
+        polyline.stopEdit();
+        break;
+    }
+  };
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2;
+      skip++;
+      polyline.coordinates = editor.getCoordinates().map((e) => cartesian3Tgeography(e));
+      editor.setCoordinates([]);
+      polyline.event.trigger("pointer-in");
+    }
+  };
+
+  const onDestroy = () => {
+    primitive && viewer.scene.primitives.remove(primitive);
+    viewer.scene.primitives.remove(markers);
+    event.off("pointer-move", onMouseMove);
+    event.off("left-click", onClick);
+    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("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  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);
+}