@hzab/map-combine 0.0.1

package/src/openlayer/OpenlayerPoint.ts

@@ -0,0 +1,177 @@
+import { Point } from "../basic/Point";
+import { OpenlayerMap } from "./OpenlayerMap";
+import Feature from 'ol/Feature.js'
+import OlPoint from 'ol/geom/Point.js'
+import { Icon, Style } from 'ol/style.js'
+import { fromLonLat } from "ol/proj";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+const RD = 0.017453292519943295
+
+export function drawPoint(map: OpenlayerMap, point: Point<unknown>) {
+  const { viewer, event } = map
+  let status = 0
+
+  const source = new VectorSource();
+  const layer = new VectorLayer({
+    source,
+    visible: point.show
+  })
+  viewer.addLayer(layer)
+  const feature = new Feature()
+  const geometry = new OlPoint([0, 0])
+  const style = new Style({
+    image: new Icon({
+      width: point.size[0],
+      height: point.size[1],
+      src: point.src,
+      rotation: point.rotation * RD,
+      anchor: point.center,
+      crossOrigin: 'anonymous'
+    })
+  });
+
+  const _event = {
+    cursor: point.cursor,
+    silent: point.silent,
+    onPointerIn() {
+      point.event.trigger('pointer-in')
+    },
+    onPointerOut() {
+      point.event.trigger('pointer-out')
+    },
+    onLClick() {
+      point.event.trigger('left-click')
+    },
+    onRClick() {
+      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')
+      }
+    }
+  }
+
+  feature.setGeometry(geometry)
+  feature.setStyle(style)
+  feature.set('event', _event, true)
+  if (point.coordinates) {
+    status = 2
+    geometry.setCoordinates(fromLonLat(point.coordinates))
+    layer.setZIndex(point.coordinates[2] ?? 1)
+    point.event.trigger('data-loaded')
+    source.addFeature(feature)
+  }
+
+
+  const onUpdate = (e: Set<string>) => {
+    const keys = new Set()
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          if (status) {
+            layer.setVisible(point.show)
+          }
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          if (point.coordinates) {
+            geometry.setCoordinates(fromLonLat(point.coordinates))
+            layer.setZIndex(point.coordinates[2])
+            switch (status) {
+              case 0:
+                source.addFeature(feature)
+                status = 2;
+                break;
+              case 1:
+                status = 2;
+                break;
+            }
+          } else {
+            source.removeFeature(feature)
+            status = 0
+          }
+          break;
+        case 'src':
+          keys.add('icon')
+          break;
+        case 'size':
+          keys.add('icon')
+          break;
+        case 'center':
+          keys.add('icon')
+          break;
+        case 'rotation':
+          keys.add('icon')
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+
+    keys.forEach(e => {
+      switch (e) {
+        case 'icon':
+          style.setImage(new Icon({
+            width: point.size[0],
+            height: point.size[1],
+            src: point.src,
+            rotation: point.rotation * RD,
+            anchor: point.center,
+            crossOrigin: 'anonymous'
+          }))
+          break;
+      }
+    })
+    feature.changed()
+  }
+
+  const onMouseMove = () => {
+    const coordinates = [event.geography[0], event.geography[1], point.height]
+    switch (status) {
+      case 0:
+        status = 1
+        geometry.setCoordinates(fromLonLat(coordinates))
+        source.addFeature(feature)
+        break;
+      case 1:
+      case 3:
+        geometry.setCoordinates(fromLonLat(coordinates))
+        break
+    }
+  }
+
+  const onClick = () => {
+    if (status == 1) {
+      status = 2
+      point.coordinates = [event.geography[0], event.geography[1], point.height];
+      point.event.trigger('pointer-in')
+    }
+  }
+
+
+  const onDestroy = () => {
+    source.removeFeature(feature)
+    event.off('pointer-move', onMouseMove)
+    event.off('left-click', onClick)
+    point.event.off('update', onUpdate)
+    point.event.off('destroy', onDestroy)
+
+  }
+
+  event.on('pointer-move', onMouseMove)
+  event.on('left-click', onClick)
+  point.event.on('update', onUpdate)
+  point.event.on('destroy', onDestroy)
+}

package/src/openlayer/OpenlayerPolygon.ts

@@ -0,0 +1,300 @@
+
+import { OpenlayerMap } from "./OpenlayerMap";
+import Feature from 'ol/Feature.js'
+import OlPolygon from 'ol/geom/Polygon.js'
+import { Icon, Fill, Stroke, Style } from 'ol/style.js'
+import { fromLonLat, toLonLat } from "ol/proj";
+import { Polygon } from "../basic/Polygon";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import iconPoint from '../assets/point.png'
+import iconAdd from '../assets/add.png'
+import Point from 'ol/geom/Point.js'
+import { ChainNode, PolygonEditor } from "../utils/PolygonEditor";
+const styleNode = new Style({
+  image: new Icon({
+    width: 16,
+    height: 16,
+    src: iconPoint,
+    crossOrigin: 'anonymous'
+  })
+});
+
+const styleVirtual = new Style({
+  image: new Icon({
+    width: 16,
+    height: 16,
+    src: iconAdd,
+    crossOrigin: 'anonymous'
+  })
+});
+
+
+
+
+
+export function drawPolygon(map: OpenlayerMap, polygon: Polygon<unknown>) {
+  const { event, viewer, vectors } = map
+
+  const source = new VectorSource();
+
+  const layer = new VectorLayer({
+    source,
+    visible: polygon.show
+  })
+  viewer.addLayer(layer)
+
+  let status = 0
+  let skip = 0
+
+  const feature = new Feature()
+  const geometry = new OlPolygon([[[0, 0], [0, 0]]])
+  const fill = new Fill({
+    color: polygon.fill
+  })
+  const stroke = new Stroke({
+    color: polygon.stroke,
+    width: polygon.lineWidth,
+    lineDash: polygon.dash ? [10, 10] : undefined,
+  })
+  const style = new Style({
+    zIndex: 50,
+    stroke,
+    fill
+  })
+
+  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')
+      });
+    }
+  }
+
+  feature.setGeometry(geometry)
+  feature.setStyle(style)
+  feature.set('event', _event, true)
+  if (polygon.coordinates) {
+    status = 2
+    geometry.setCoordinates([polygon.coordinates.map(e => fromLonLat(e))])
+    layer.setZIndex(polygon.coordinates[0][2] ?? 1)
+    source.addFeature(feature)
+  }
+
+
+
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          layer.setVisible(polygon.show)
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          if (polygon.coordinates) {
+            geometry.setCoordinates([polygon.coordinates.map(e => fromLonLat(e))])
+            layer.setZIndex(polygon.coordinates[0][2] ?? 1)
+            switch (status) {
+              case 0:
+                source.addFeature(feature)
+                status = 2;
+                break;
+              case 1:
+                status = 2;
+                break;
+            }
+          } else {
+            source.removeFeature(feature)
+            status == 3 && editor.setCoordinates([])
+            status = 0
+          }
+          break;
+        case 'lineWidth':
+          stroke.setWidth(polygon.lineWidth)
+          break;
+        case 'stroke':
+          stroke.setColor(polygon.stroke)
+          break;
+        case 'dash':
+          stroke.setLineDash(polygon.dash ? [10, 10] : undefined)
+          break;
+        case 'fill':
+          fill.setColor(polygon.fill)
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+
+    feature.changed()
+  }
+  let cache = [[0]]
+  let activeNode: ChainNode<Feature, Feature>
+  const onMouseMove = () => {
+    switch (status) {
+      case 1:
+        cache.pop()
+        cache.push(fromLonLat(event.geography))
+        geometry.setCoordinates([cache])
+        break
+      case 4:
+        activeNode.update(fromLonLat(event.geography))
+        geometry.setCoordinates([editor.getCoordinates()])
+        break;
+    }
+  }
+
+  const onClick = () => {
+    switch (status) {
+      case 0:
+        status = 1
+
+        cache = [fromLonLat(event.geography)]
+        cache.push(cache[0])
+        geometry.setCoordinates([cache])
+        source.addFeature(feature)
+        break;
+      case 1:
+        cache.push(cache[cache.length - 1])
+        geometry.setCoordinates([cache])
+        break
+    }
+  }
+
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2
+        skip++
+        cache.pop()
+        cache.pop()
+        geometry.setCoordinates([cache])
+        polygon.coordinates = cache.map(e => toLonLat(e))
+        polygon.event.trigger('data-loaded')
+        polygon.event.trigger('pointer-in')
+        break
+      case 3:
+        polygon.event.trigger('stop-edit')
+        break
+    }
+  }
+
+  const editor = new PolygonEditor<Feature<Point>, Feature<Point>>()
+
+  editor.on('create-node', (n) => {
+    if (n.type == 'node') {
+      const feature = new Feature(new Point(n.position))
+      feature.setStyle(styleNode)
+      feature.set('event', {
+        cursor: 'move',
+        onPointerDown() {
+          status = 4
+          activeNode = n
+          map.moveable = false
+        },
+        onPointerUp() {
+          if (status == 4) {
+            status = 3
+            map.moveable = true
+            activeNode = undefined
+          }
+        },
+        onDbClick() {
+          n.destroy()
+          geometry.setCoordinates([editor.getCoordinates()])
+        }
+      }, true)
+      source.addFeature(feature)
+      n.shape = feature
+    } else {
+      const feature = new Feature(new Point(n.position))
+      feature.setStyle(styleVirtual)
+      feature.set('event', {
+        cursor: 'pointer',
+        onPointerDown() {
+          status = 4
+          activeNode = n.insert()
+          map.cursor = 'move'
+          map.moveable = false
+        },
+      }, true)
+      source.addFeature(feature)
+      n.shape = feature
+    }
+  })
+  editor.on('update-node', (n) => {
+    n.shape.getGeometry().setCoordinates(n.position)
+  })
+  editor.on('remove-node', (n) => {
+    source.removeFeature(n.shape)
+  })
+  editor.on('empty', () => {
+    source.removeFeature(feature)
+    status = 0
+  })
+  const onStartEdit = () => {
+    switch (status) {
+      case 2:
+        status = 3
+        editor.setCoordinates(geometry.getCoordinates()[0])
+        break
+    }
+
+  }
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2
+      skip++
+      polygon.coordinates = editor.getCoordinates().map(e => toLonLat(e))
+      editor.setCoordinates([])
+      polygon.event.trigger('pointer-in')
+    }
+
+  }
+
+
+  const onDestroy = () => {
+    viewer.removeLayer(layer)
+    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)
+}