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

package/src/cesium/CesiumPolygon.ts

@@ -1,102 +1,108 @@
 import { Polygon } from "../basic/Polygon";
 import { ChainNode, PolygonEditor } from "../utils/PolygonEditor";
 import { CesiumMap } from "./CesiumMap";
-import iconPoint from '../assets/point.png'
-import iconAdd from '../assets/add.png'
+import iconPoint from "../assets/point.png";
+import iconAdd from "../assets/add.png";
 import { dealColor } from "../utils";
 
 function createLineMaterial(e: Polygon<unknown>) {
   return e.dash
     ? Cesium.Material.fromType("PolylineDash", {
-      color: Cesium.Color.fromCssColorString(e.stroke),
-      dashLength: 10,
-    })
+        color: Cesium.Color.fromCssColorString(e.stroke),
+        dashLength: 10,
+      })
     : Cesium.Material.fromType("Color", {
-      color: Cesium.Color.fromCssColorString(e.stroke),
-    });
+        color: Cesium.Color.fromCssColorString(e.stroke),
+      });
 }
 
 function createFillMaterial(e: Polygon<unknown>) {
   const [color, opacity] = dealColor(e.fill);
   return Cesium.Material.fromType("Color", {
     color: Cesium.Color.fromCssColorString(color).withAlpha(opacity),
-  })
+  });
 }
 
 function cartesian3Tgeography(e: any): number[] {
-  const r = Cesium.Cartographic.fromCartesian(e)
-  return [Cesium.Math.toDegrees(r.longitude), Cesium.Math.toDegrees(r.latitude), r.height]
+  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])
+  return Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2] ?? 1);
 }
 
-const eyeOffset = new Cesium.Cartesian3(0, 0, -1)
+const eyeOffset = new Cesium.Cartesian3(0, 0, -1);
 
 export function drawPolygon(map: CesiumMap, polygon: Polygon<unknown>) {
-  const { event, viewer } = map
-  let status = 0
-  let skip = 0
+  const { event, viewer } = map;
+  let status = 0;
+  let skip = 0;
 
-  let cache: any[]
-  let activeNode: ChainNode<any, any>
+  let cache: any[];
+  let activeNode: ChainNode<any, any>;
 
-  let primitiveFill: any
-  let primitiveLine: any
+  let primitiveFill: any;
+  let primitiveLine: any;
 
-  const collection = viewer.scene.primitives.add(new Cesium.PrimitiveCollection({
-    show: polygon.show,
-    destroyPrimitives: true,
-  }))
+  const collection = viewer.scene.primitives.add(
+    new Cesium.PrimitiveCollection({
+      show: polygon.show,
+      destroyPrimitives: true,
+    }),
+  );
 
   const appearanceFill = new Cesium.MaterialAppearance({
-    material: createFillMaterial(polygon)
+    material: createFillMaterial(polygon),
   });
 
   const appearanceLine = new Cesium.PolylineMaterialAppearance({
     material: createLineMaterial(polygon),
-  })
+  });
 
   const markers = collection.add(
     new Cesium.BillboardCollection({
-      show: polygon.show
-    })
+      show: polygon.show,
+    }),
   );
 
   const _event = {
     cursor: polygon.cursor,
     silent: polygon.silent,
     onPointerIn() {
-      status == 2 && polygon.event.trigger('pointer-in')
+      status == 2 && polygon.event.trigger("pointer-in");
     },
     onPointerOut() {
-      status == 2 && polygon.event.trigger('pointer-out')
+      status == 2 && polygon.event.trigger("pointer-out");
     },
     onLClick() {
-      status == 2 && polygon.event.trigger('left-click')
+      status == 2 && polygon.event.trigger("left-click");
     },
     onRClick() {
       if (polygon.menu) {
         map.menu.show(polygon.menu);
       }
-      status == 2 && polygon.event.trigger('right-click')
+      status == 2 && polygon.event.trigger("right-click");
     },
     onDbClick() {
-      polygon.editable && status == 2 && setTimeout(() => {
-        polygon.event.trigger('start-edit')
-      });
-    }
-  }
+      polygon.editable &&
+        status == 2 &&
+        setTimeout(() => {
+          polygon.event.trigger("start-edit");
+        });
+    },
+  };
 
   const initPrimitive = () => {
     primitiveFill && collection.remove(primitiveFill);
     primitiveLine && collection.remove(primitiveLine);
 
     if (cache.length > 2) {
-      const geometry = Cesium.PolygonGeometry.createGeometry(new Cesium.PolygonGeometry({
-        polygonHierarchy: new Cesium.PolygonHierarchy(cache),
-      }));
+      const geometry = Cesium.PolygonGeometry.createGeometry(
+        new Cesium.PolygonGeometry({
+          polygonHierarchy: new Cesium.PolygonHierarchy(cache),
+        }),
+      );
 
       if (geometry) {
         primitiveFill = new Cesium.Primitive({
@@ -105,59 +111,52 @@ export function drawPolygon(map: CesiumMap, polygon: Polygon<unknown>) {
             geometry: geometry,
             id: _event,
           }),
-          appearance: appearanceFill
+          appearance: appearanceFill,
         });
-        collection.add(primitiveFill)
+        collection.add(primitiveFill);
       } else {
-        primitiveFill = undefined
+        primitiveFill = undefined;
       }
     } else {
-      primitiveFill = undefined
+      primitiveFill = undefined;
     }
 
     if (cache.length > 1) {
-
-      const geometry = Cesium.PolylineGeometry.createGeometry(new Cesium.PolylineGeometry({
-        positions: [...cache, cache[0]],
-        width: polygon.lineWidth,
-        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
-      }))
+      const geometry = Cesium.PolylineGeometry.createGeometry(
+        new Cesium.PolylineGeometry({
+          positions: [...cache, cache[0]],
+          width: polygon.lineWidth,
+          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+        }),
+      );
       if (geometry) {
         primitiveLine = new Cesium.Primitive({
           show: polygon.show,
           asynchronous: false,
           geometryInstances: new Cesium.GeometryInstance({
             geometry,
-
           }),
           appearance: appearanceLine,
         });
         collection.add(primitiveLine);
       } else {
-        primitiveLine = undefined
+        primitiveLine = undefined;
       }
-
     } else {
-      primitiveLine = undefined
+      primitiveLine = undefined;
     }
-
-  }
-
+  };
 
   if (polygon.coordinates) {
-    status = 2
-    cache = polygon.coordinates.map((e) =>
-      Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
-    )
-    initPrimitive()
+    status = 2;
+    cache = polygon.coordinates.map(geographyTcartesian3);
+    initPrimitive();
   }
 
+  const editor = new PolygonEditor<any, any>();
 
-
-  const editor = new PolygonEditor<any, any>()
-
-  editor.on('create-node', (n) => {
-    if (n.type == 'node') {
+  editor.on("create-node", (n) => {
+    if (n.type == "node") {
       const feature = markers.add({
         position: new Cesium.Cartesian3(...n.position),
         width: 16,
@@ -165,28 +164,27 @@ export function drawPolygon(map: CesiumMap, polygon: Polygon<unknown>) {
         image: iconPoint,
         eyeOffset,
         id: {
-          cursor: 'move',
+          cursor: "move",
           onPointerDown() {
-            status = 4
-            activeNode = n
-            map.moveable = false
+            status = 4;
+            activeNode = n;
+            map.moveable = false;
           },
           onPointerUp() {
             if (status == 4) {
-              status = 3
-              map.moveable = true
-              activeNode = undefined
+              status = 3;
+              map.moveable = true;
+              activeNode = undefined;
             }
           },
           onDbClick() {
-            n.destroy()
-            cache = editor.getCoordinates().map(e => new Cesium.Cartesian3(...e))
-            initPrimitive()
-
-          }
-        }
-      })
-      n.shape = feature
+            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),
@@ -195,174 +193,167 @@ export function drawPolygon(map: CesiumMap, polygon: Polygon<unknown>) {
         image: iconAdd,
         eyeOffset,
         id: {
-          cursor: 'pointer',
+          cursor: "pointer",
           onPointerDown() {
-            status = 4
-            activeNode = n.insert()
-            map.cursor = 'move'
-            map.moveable = false
+            status = 4;
+            activeNode = n.insert();
+            map.cursor = "move";
+            map.moveable = false;
           },
-        }
-      })
-      n.shape = feature
+        },
+      });
+      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', () => {
+  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()
     collection.remove(primitiveLine);
     collection.remove(primitiveFill);
-    status = 0
-  })
+    status = 0;
+  });
 
   const onUpdate = (e: Set<string>) => {
     if (skip) {
-      skip--
-      return
+      skip--;
+      return;
     }
-    const keys = new Set()
-    e.forEach(key => {
+    const keys = new Set();
+    e.forEach((key) => {
       switch (key) {
-        case 'show':
-          collection.show = polygon.show
+        case "show":
+          collection.show = polygon.show;
           break;
-        case 'editable':
+        case "editable":
           break;
-        case 'coordinates':
-          keys.add('Primitive')
+        case "coordinates":
+          keys.add("Primitive");
           break;
-        case 'lineWidth':
-          keys.add('Primitive')
+        case "lineWidth":
+          keys.add("Primitive");
           break;
-        case 'stroke':
+        case "stroke":
           appearanceLine.material.uniforms.color = Cesium.Color.fromCssColorString(polygon.stroke);
           break;
-        case 'dash':
-          appearanceLine.material = createLineMaterial(polygon)
+        case "dash":
+          appearanceLine.material = createLineMaterial(polygon);
           break;
         default:
-          throw new Error(`${key} 还不支持修改`)
+          throw new Error(`${key} 还不支持修改`);
       }
-    })
-    keys.forEach(key => {
+    });
+    keys.forEach((key) => {
       switch (key) {
-        case 'Primitive':
+        case "Primitive":
           if (polygon.coordinates) {
-            cache = polygon.coordinates.map(e => geographyTcartesian3(e))
+            cache = polygon.coordinates.map((e) => geographyTcartesian3(e));
           } else {
-            cache = []
-            markers.removeAll()
-            status = 0
+            cache = [];
+            markers.removeAll();
+            status = 0;
           }
 
-          initPrimitive()
+          initPrimitive();
 
           break;
       }
-    })
-  }
+    });
+  };
 
   const onStartEdit = () => {
-
     switch (status) {
       case 2:
-        status = 3
-        editor.setCoordinates(cache.map(e => [e.x, e.y, e.z]))
-        break
+        status = 3;
+        editor.setCoordinates(cache.map((e) => [e.x, e.y, e.z]));
+        break;
     }
-  }
-  let temp: any
+  };
+  let temp: any;
   const onMouseMove = () => {
-    const e = event.geography
+    const e = event.geography;
 
     switch (status) {
       case 1:
-        cache.pop()
-        cache.push(Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2]))
-        initPrimitive()
-        break
+        cache.pop();
+        cache.push(geographyTcartesian3(e));
+        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()
+        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
+    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()
+        status = 1;
+        cache = [geographyTcartesian3(e)];
+        cache.push(cache[0]);
+        initPrimitive();
         break;
       case 1:
-        cache.push(cache[cache.length - 1])
+        cache.push(cache[cache.length - 1]);
         // geometry.setCoordinates(cache)
-        initPrimitive()
-        break
+        initPrimitive();
+        break;
     }
-  }
-
-
-
+  };
 
   const onDbClick = () => {
     switch (status) {
       case 1:
-        status = 2
-        skip++
-        cache.pop()
-        cache.pop()
+        status = 2;
+        skip++;
+        cache.pop();
+        cache.pop();
         // geometry.setCoordinates(cache)
-        polygon.coordinates = cache.map(e => cartesian3Tgeography(e))
-        polygon.event.trigger('data-loaded')
-        polygon.event.trigger('pointer-in')
-        break
+        polygon.coordinates = cache.map((e) => cartesian3Tgeography(e));
+        polygon.event.trigger("data-loaded");
+        polygon.event.trigger("pointer-in");
+        break;
       case 3:
-        polygon.event.trigger('stop-edit')
-        break
+        polygon.event.trigger("stop-edit");
+        break;
     }
-  }
-
+  };
 
   const onStopEdit = () => {
     if (status == 3) {
-      status = 2
-      skip++
-      polygon.coordinates = editor.getCoordinates().map(e => cartesian3Tgeography(e))
-      editor.setCoordinates([])
-      polygon.event.trigger('pointer-in')
+      status = 2;
+      skip++;
+      polygon.coordinates = editor.getCoordinates().map((e) => cartesian3Tgeography(e));
+      editor.setCoordinates([]);
+      polygon.event.trigger("pointer-in");
     }
-  }
+  };
 
   const onDestroy = () => {
-    viewer.scene.primitives.remove(collection)
-    event.off('pointer-move', onMouseMove)
-    event.off('left-click', onClick)
-    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('pointer-move', onMouseMove)
-  event.on('left-click', onClick)
-  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)
-
-}
+    viewer.scene.primitives.remove(collection);
+    event.off("pointer-move", onMouseMove);
+    event.off("left-click", onClick);
+    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("pointer-move", onMouseMove);
+  event.on("left-click", onClick);
+  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);
+}