@hzab/map-combine 0.0.1

package/src/cesium/CesiumPolygon.ts

@@ -0,0 +1,368 @@
+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 { dealColor } from "../utils";
+
+function createLineMaterial(e: Polygon<unknown>) {
+  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 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]
+}
+
+function geographyTcartesian3(e: number[]) {
+  return Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
+}
+
+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
+
+  let cache: any[]
+  let activeNode: ChainNode<any, any>
+
+  let primitiveFill: any
+  let primitiveLine: any
+
+  const collection = viewer.scene.primitives.add(new Cesium.PrimitiveCollection({
+    show: polygon.show,
+    destroyPrimitives: true,
+  }))
+
+  const appearanceFill = new Cesium.MaterialAppearance({
+    material: createFillMaterial(polygon)
+  });
+
+  const appearanceLine = new Cesium.PolylineMaterialAppearance({
+    material: createLineMaterial(polygon),
+  })
+
+  const markers = collection.add(
+    new Cesium.BillboardCollection({
+      show: polygon.show
+    })
+  );
+
+  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() {
+      if (polygon.menu) {
+        map.menu.show(polygon.menu);
+      }
+      status == 2 && polygon.event.trigger('right-click')
+    },
+    onDbClick() {
+      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),
+      }));
+
+      if (geometry) {
+        primitiveFill = new Cesium.Primitive({
+          asynchronous: false,
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry: geometry,
+            id: _event,
+          }),
+          appearance: appearanceFill
+        });
+        collection.add(primitiveFill)
+      } else {
+        primitiveFill = undefined
+      }
+    } else {
+      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,
+      }))
+      if (geometry) {
+        primitiveLine = new Cesium.Primitive({
+          show: polygon.show,
+          asynchronous: false,
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry,
+
+          }),
+          appearance: appearanceLine,
+        });
+        collection.add(primitiveLine);
+      } else {
+        primitiveLine = undefined
+      }
+
+    } else {
+      primitiveLine = undefined
+    }
+
+  }
+
+
+  if (polygon.coordinates) {
+    status = 2
+    cache = polygon.coordinates.map((e) =>
+      Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
+    )
+    initPrimitive()
+  }
+
+
+
+  const editor = new PolygonEditor<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()
+    collection.remove(primitiveLine);
+    collection.remove(primitiveFill);
+    status = 0
+  })
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+    const keys = new Set()
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          collection.show = polygon.show
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          keys.add('Primitive')
+          break;
+        case 'lineWidth':
+          keys.add('Primitive')
+          break;
+        case 'stroke':
+          appearanceLine.material.uniforms.color = Cesium.Color.fromCssColorString(polygon.stroke);
+          break;
+        case 'dash':
+          appearanceLine.material = createLineMaterial(polygon)
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+    keys.forEach(key => {
+      switch (key) {
+        case 'Primitive':
+          if (polygon.coordinates) {
+            cache = polygon.coordinates.map(e => geographyTcartesian3(e))
+          } else {
+            cache = []
+            markers.removeAll()
+            status = 0
+          }
+
+          initPrimitive()
+
+          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 onDbClick = () => {
+    switch (status) {
+      case 1:
+        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
+      case 3:
+        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')
+    }
+  }
+
+  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)
+
+}