@hzab/map-combine 0.0.1

package/src/mine/MinePoint.ts

@@ -0,0 +1,139 @@
+
+import { Point } from "../basic/Point";
+import { MineMap } from "./MineMap";
+
+
+export function drawPoint(map: MineMap, point: Point<unknown>) {
+  const { viewer } = map
+  const { size, center } = point
+  let status = 0
+  let skip = 0
+
+  const img = document.createElement('img')
+  img.src = point.src
+  img.width = size[0]
+  img.height = size[1]
+  img.style.cursor = point.cursor
+
+  img.onpointerenter = () => {
+    status == 2 && point.event.trigger('pointer-in')
+  }
+  img.onpointerleave = () => {
+    status == 2 && point.event.trigger('pointer-out')
+  }
+
+  img.onclick = () => {
+    status == 2 && point.event.trigger('left-click')
+  }
+  img.oncontextmenu = () => {
+    status == 2 && point.event.trigger('right-click')
+  }
+
+  const marker = new minemap.Marker({
+    draggable: point.editable,
+    rotation: 0,
+    offset: [-size[0] * (center[0]), -size[1] * (center[1])],
+    element: img
+  })
+
+
+  if (point.coordinates) {
+    status = 2
+    marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0)
+    point.show && marker.addTo(map.viewer);
+  }
+
+
+  const onMouseMove = (e: any) => {
+    switch (status) {
+      case 0:
+        status = 1
+        marker.setLngLat(e.lngLat)
+        point.show && marker.addTo(map.viewer);
+        break;
+      case 1:
+        marker.setLngLat(e.lngLat);
+        break
+    }
+  }
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+    const { size, center } = point
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          point.show ? marker.addTo(map.viewer) : marker.remove()
+          break;
+        case 'editable':
+          marker.setDraggable(point.editable)
+          break;
+        case 'coordinates':
+          if (point.coordinates) {
+            marker.setLngLat(point.coordinates).setAltitude(point.coordinates[2] ?? 0)
+            switch (status) {
+              case 0:
+                point.show && marker.addTo(map.viewer)
+                status = 2;
+                break;
+              case 1:
+                status = 2;
+                break;
+            }
+          } else {
+            marker.remove()
+            status = 0
+          }
+
+          break;
+        case 'src':
+          img.src = point.src
+          break;
+        case 'size':
+          img.width = size[0]
+          img.height = size[1]
+          if (!e.has('center')) {
+            marker.setOffset([-size[0] * (center[0]), -size[1] * (center[1])])
+          }
+          break;
+        case 'center':
+          marker.setOffset([-size[0] * (center[0]), -size[1] * (center[1])])
+          break;
+        case 'rotation':
+          marker.setRotation(point.rotation)
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+  }
+
+
+  const onDestroy = () => {
+    marker.remove()
+    viewer.off('mousemove', onMouseMove)
+    viewer.off('click', onClick)
+    point.event.off('update', onUpdate)
+    point.event.off('destroy', onDestroy)
+
+  }
+  const onClick = () => {
+    if (status == 1) {
+      status = 2
+      skip++
+      const p = marker.getLngLat()
+      point.coordinates = [p.lng, p.lat]
+      point.event.trigger('pointer-in')
+    }
+  }
+
+
+  viewer.on('mousemove', onMouseMove)
+  viewer.on('click', onClick)
+  point.event.on('update', onUpdate)
+  point.event.on('destroy', onDestroy)
+
+}

package/src/mine/MinePolygon.ts

@@ -0,0 +1,388 @@
+
+import { Polygon } from "../basic/Polygon";
+import { ChainNode, PolygonEditor } from "../utils/PolygonEditor";
+import { MineMap } from './MineMap';
+import iconPoint from '../assets/point.png'
+import iconAdd from '../assets/add.png'
+import { dealColor } from "../utils";
+
+
+function createImgNode(
+  onPointerDown: () => void,
+  onPointerUp: () => void,
+  onDbClick: () => void,
+) {
+  const img = document.createElement('img')
+  img.src = iconPoint
+  img.width = 16
+  img.height = 16
+  img.style.cursor = 'move'
+  img.addEventListener('pointerdown', onPointerDown)
+  img.addEventListener('pointerup', onPointerUp)
+  img.addEventListener('dblclick', onDbClick)
+  const marker = new minemap.Marker({
+    draggable: false,
+    element: img,
+    offset: [-8, -8],
+  })
+  return marker
+}
+
+function createImgVirtul(onPointerDown: () => void) {
+  const img = document.createElement('img')
+  img.src = iconAdd
+  img.width = 16
+  img.height = 16
+  img.style.cursor = 'pointer'
+  img.addEventListener('pointerdown', onPointerDown)
+  const marker = new minemap.Marker({
+    draggable: false,
+    element: img,
+    offset: [-8, -8],
+  })
+  return marker
+}
+
+
+function getPolygonOption(polygon: Polygon<unknown>) {
+  const [color, opacity] = dealColor(polygon.fill)
+  return {
+    id: polygon.name,
+    source: polygon.name,
+    type: "fill",
+    layout: {
+      visibility: polygon.show ? "visible" : 'none',
+    },
+    paint: {
+      "fill-color": color,
+      'fill-opacity': opacity
+    }
+  }
+}
+
+function getPolylineOption(polygon: Polygon<unknown>) {
+  return {
+    id: polygon.name + '_outline',
+    source: polygon.name,
+    type: "line",
+    translation: [0, 0, 1000],
+    "depth-test": false,
+    layout: {
+      visibility: polygon.show ? "visible" : 'none',
+    },
+    paint: polygon.dash ? {
+      "line-dasharray": [10, 10],
+      "line-color": polygon.stroke,
+      "line-width": polygon.lineWidth
+    } : {
+      "line-color": polygon.stroke,
+      "line-width": polygon.lineWidth
+    },
+  }
+}
+
+
+function main(map: MineMap, polygon: Polygon<unknown>) {
+  const { viewer } = map
+  const data = {
+    type: "FeatureCollection",
+    features: [],
+  }
+  viewer.addSource(polygon.name, {
+    type: "geojson",
+    data
+  });
+
+  const cource = viewer.getSource(polygon.name)
+
+  viewer.addLayer(getPolylineOption(polygon));
+  viewer.addLayer(getPolygonOption(polygon));
+
+  let status = 0
+  let skip = 0
+  const editor = new PolygonEditor<any, any>()
+  let activeNode: ChainNode<any, any>
+  editor.on('create-node', (n) => {
+    if (n.type == 'node') {
+      const maker = createImgNode(() => {
+        status = 4
+        activeNode = n
+        map.moveable = false
+      }, () => {
+        if (status == 4) {
+          status = 3
+          map.moveable = true
+          activeNode = undefined
+        }
+      }, () => {
+        n.destroy()
+        updateCoordinate(editor.getCoordinates())
+      })
+      maker.setLngLat(n.position).addTo(viewer)
+
+      n.shape = maker
+    } else {
+      const maker = createImgVirtul(() => {
+        status = 4
+        activeNode = n.insert()
+        map.moveable = false
+      })
+      maker.setLngLat(n.position).addTo(viewer)
+      viewer.addMarker(maker)
+      n.shape = maker
+    }
+  })
+
+  editor.on('update-node', (n) => {
+    n.shape.setLngLat(n.position)
+  })
+  editor.on('remove-node', (n) => {
+    viewer.removeMarker(n.shape)
+  })
+  editor.on('empty', () => {
+    // source.removeFeature(feature)
+    status = 0
+  })
+
+  const updateCoordinate = (coordinates) => {
+    if (coordinates) {
+      data.features[0] = {
+        type: "Feature",
+        geometry: {
+          type: "Polygon",
+          coordinates: [[...coordinates, coordinates[0]]],
+        },
+        properties: {
+          id: polygon.name,
+        },
+      }
+    } else {
+      data.features = []
+    }
+    cource.setData(data)
+  }
+
+
+
+
+
+  if (polygon.coordinates) {
+    status = 2
+    updateCoordinate(polygon.coordinates)
+  }
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+
+    const keys = new Set()
+
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          keys.add('polyline')
+          keys.add('polygon')
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          updateCoordinate(polygon.coordinates)
+          if (status == 3) {
+            editor.setCoordinates([])
+          }
+          if (polygon.coordinates) {
+            status = 2
+
+          } else {
+            status = 0
+
+          }
+
+          break;
+        case 'fill':
+          keys.add('polygon')
+          break
+        case 'lineWidth':
+          keys.add('polyline')
+          break;
+        case 'stroke':
+          keys.add('polyline')
+          break;
+        case 'dash':
+          keys.add('polyline')
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+
+    keys.forEach(e => {
+      switch (e) {
+        case 'polyline':
+          viewer.removeLayer(polygon.name + '_outline')
+          viewer.addLayer(getPolylineOption(polygon));
+          break;
+        case 'polygon':
+          viewer.removeLayer(polygon.name)
+          viewer.addLayer(getPolygonOption(polygon));
+          break;
+      }
+    })
+  }
+
+  const onPointerIn = () => {
+    if (status == 2) {
+      map.cursor = polygon.cursor
+      polygon.event.trigger('pointer-in')
+    }
+
+  }
+
+  const onPointerOut = () => {
+    if (status == 2) {
+      map.cursor = 'default'
+      polygon.event.trigger('pointer-out')
+    }
+  }
+
+  let cache = []
+
+  const onClick = (e: any) => {
+    switch (status) {
+      case 0:
+        status = 1
+        cache = [[e.lngLat.lng, e.lngLat.lat], [e.lngLat.lng, e.lngLat.lat]]
+        break;
+      case 1:
+        cache.push(cache[cache.length - 1])
+        break;
+    }
+  }
+
+  const onPointerMove = (e: any) => {
+    switch (status) {
+      case 1:
+        cache.pop()
+        cache.push([e.lngLat.lng, e.lngLat.lat])
+        updateCoordinate(cache)
+        break;
+      case 4:
+        activeNode.update([e.lngLat.lng, e.lngLat.lat])
+        updateCoordinate(editor.getCoordinates())
+
+        break;
+    }
+  }
+
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2
+        skip++
+        cache.pop()
+        cache.pop()
+        polygon.coordinates = cache
+        polygon.event.trigger('pointer-in')
+        break;
+      case 3:
+        if (!skip) {
+          polygon.event.trigger('stop-edit')
+        } else {
+          skip = 0
+        }
+        break;
+    }
+  }
+
+  const onLineDbClick = () => {
+
+    switch (status) {
+      case 2:
+        polygon.event.trigger('start-edit')
+        break;
+    }
+  }
+
+  const onLineClick = () => {
+    switch (status) {
+      case 2:
+        polygon.event.trigger('left-click')
+        break;
+    }
+  }
+  const onLineRClick = () => {
+    if (polygon.menu) {
+      map.menu.show(polygon.menu);
+    }
+    switch (status) {
+      case 2:
+        polygon.event.trigger('right-click')
+        break;
+    }
+  }
+
+
+  const onStartEdit = () => {
+    if (status == 2) {
+      status = 3
+      map.cursor = 'default'
+      editor.setCoordinates(polygon.coordinates)
+      skip = 1
+    }
+  }
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2
+      skip++
+      polygon.coordinates = editor.getCoordinates()
+      editor.setCoordinates([])
+    }
+  }
+
+
+  const onDestroy = () => {
+    viewer.removeLayer(polygon.name)
+    viewer.removeSource(polygon.name)
+
+    viewer.off('mouseover', polygon.name, onPointerIn)
+    viewer.off('mouseout', polygon.name, onPointerOut)
+    viewer.off('dblclick', polygon.name, onLineDbClick)
+    viewer.off('click', polygon.name, onLineClick)
+    viewer.off('contextmenu', polygon.name, onLineRClick)
+    viewer.off('click', onClick)
+    viewer.off('mousemove', onPointerMove)
+    viewer.off('dblclick', onDbClick)
+    polygon.event.off('update', onUpdate)
+    polygon.event.off('destroy', onDestroy)
+    polygon.event.off('start-edit', onStartEdit)
+    polygon.event.off('stop-edit', onStopEdit)
+  }
+
+  viewer.on('mouseover', polygon.name, onPointerIn)
+  viewer.on('mouseout', polygon.name, onPointerOut)
+  viewer.on('dblclick', polygon.name, onLineDbClick)
+  viewer.on('click', polygon.name, onLineClick)
+  viewer.on('contextmenu', polygon.name, onLineRClick)
+  viewer.on('click', onClick)
+  viewer.on('mousemove', onPointerMove)
+  viewer.on('dblclick', onDbClick)
+
+  polygon.event.on('update', onUpdate)
+  polygon.event.on('destroy', onDestroy)
+  polygon.event.on('start-edit', onStartEdit)
+  polygon.event.on('stop-edit', onStopEdit)
+}
+
+
+export function drawPolygon(map: MineMap, polygon: Polygon<unknown>) {
+  const { viewer } = map
+  if (viewer.loaded()) {
+    main(map, polygon)
+  } else {
+    viewer.once('load', () => {
+      main(map, polygon)
+    })
+  }
+}