@hzab/map-combine 0.0.1

package/src/openlayer/OpenlayerPolyline.ts

@@ -0,0 +1,289 @@
+
+import { OpenlayerMap } from "./OpenlayerMap";
+import Feature from 'ol/Feature.js'
+import LineString from 'ol/geom/LineString.js'
+import { Icon, Stroke, Style } from 'ol/style.js'
+import { fromLonLat, toLonLat } from "ol/proj";
+import { Polyline } from "../basic/Polyline";
+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, PolylineEditor } from "../utils/PolylineEditor";
+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 drawPolyline(map: OpenlayerMap, polyline: Polyline<unknown>) {
+  const { event, viewer } = map
+
+  const source = new VectorSource();
+
+  const layer = new VectorLayer({
+    source,
+    visible: polyline.show
+  })
+  viewer.addLayer(layer)
+
+  let status = 0
+  let skip = 0
+
+  const feature = new Feature()
+  const geometry = new LineString([[0, 0], [0, 0]])
+
+  const stroke = new Stroke({
+    color: polyline.stroke,
+    width: polyline.lineWidth,
+    lineDash: polyline.dash ? [10, 10] : undefined,
+  })
+  const style = new Style({
+    zIndex: 50,
+    stroke,
+  })
+
+  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')
+      });
+    }
+  }
+
+  feature.setGeometry(geometry)
+  feature.setStyle(style)
+  feature.set('event', _event, true)
+  if (polyline.coordinates) {
+    status = 2
+    geometry.setCoordinates(polyline.coordinates.map(e => fromLonLat(e)))
+    layer.setZIndex(polyline.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(polyline.show)
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          if (polyline.coordinates) {
+            geometry.setCoordinates(polyline.coordinates.map(e => fromLonLat(e)))
+            layer.setZIndex(polyline.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(polyline.lineWidth)
+          break;
+        case 'stroke':
+          stroke.setColor(polyline.stroke)
+          break;
+        case 'dash':
+          stroke.setLineDash(polyline.dash ? [10, 10] : undefined)
+          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
+        _event.silent = true
+        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)
+        polyline.coordinates = cache.map(e => toLonLat(e))
+        _event.silent = polyline.silent
+        polyline.event.trigger('data-loaded')
+        polyline.event.trigger('pointer-in')
+        break
+      case 3:
+        polyline.event.trigger('stop-edit')
+        break
+    }
+  }
+
+  const editor = new PolylineEditor<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())
+        break
+    }
+
+  }
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2
+      skip++
+      polyline.coordinates = editor.getCoordinates().map(e => toLonLat(e))
+      editor.setCoordinates([])
+    }
+
+  }
+
+  const onDestroy = () => {
+    viewer.removeLayer(layer)
+    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)
+}

package/src/utils/Image.ts

@@ -0,0 +1,46 @@
+
+
+/**
+ * 加载图片
+ * @param src 路径
+ * @returns
+ */
+export function loadImage(src: string): Promise<HTMLImageElement | undefined> {
+  return new Promise((resolve) => {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.src = src;
+    image.onload = () => {
+      resolve(image);
+    };
+    image.onerror = () => {
+      resolve(undefined);
+    };
+  });
+}
+
+
+
+export function coverSolidColor(img: HTMLImageElement | HTMLCanvasElement, color: number) {
+  const canvas = document.createElement('canvas')
+
+  canvas.width = img.width
+  canvas.height = img.height
+  const ctx = canvas.getContext('2d')
+  ctx.drawImage(img, 0, 0)
+  const imgaeData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+  const r = (color >> 16) % 256
+  const g = (color & 0xff00) >> 8
+  const b = color & 0xff
+  for (let i = 0; i < imgaeData.data.length; i += 4) {
+    if (imgaeData.data[i + 3] > 0) {
+      imgaeData.data[i] = r
+      imgaeData.data[i + 1] = g
+      imgaeData.data[i + 2] = b
+      imgaeData.data[i + 3] = 255
+    }
+  }
+  ctx.putImageData(imgaeData, 0, 0)
+
+  return canvas
+}

package/src/utils/PolygonEditor.ts

@@ -0,0 +1,159 @@
+import Eventful from "zrender/lib/core/Eventful"
+
+
+export class PolygonEditor<M, N> extends Eventful<{
+  'create-node': (n: ChainNode<M, N> | VirtualNode<M, N>) => void
+  'update-node': (n: ChainNode<M, N> | VirtualNode<M, N>) => void
+  'remove-node': (n: ChainNode<M, N> | VirtualNode<M, N>) => void
+  "empty": () => void
+}>{
+  first: ChainNode<M, N>
+  setCoordinates(ps: number[][]) {
+
+
+    let anchor = this.first
+    if (this.first) {
+      this.first.previous.next = undefined
+      while (anchor) {
+        this.trigger('remove-node', anchor)
+        anchor.virtual && this.trigger('remove-node', anchor.virtual)
+        anchor = anchor.next
+      }
+    }
+
+    ps.forEach(e => {
+      if (anchor) {
+        anchor = anchor.createNext(e)
+
+      } else {
+        this.first = new ChainNode(this, e)
+        anchor = this.first
+      }
+    })
+    if (anchor) {
+      this.first.previous = anchor
+      anchor.next = this.first
+      anchor.virtual = new VirtualNode(anchor)
+    } else {
+      this.first = undefined
+    }
+
+  }
+  getCoordinates() {
+    if (this.first) {
+      this.first.previous.next = undefined
+      const res: number[][] = []
+      let anchor = this.first
+      while (anchor) {
+        res.push(anchor.position)
+        anchor = anchor.next
+      }
+      this.first.previous.next = this.first
+      return res
+    } else {
+      return []
+    }
+
+  }
+}
+
+
+
+
+
+export class ChainNode<M, N>{
+  type = 'node' as const
+  position: number[]
+  editor: PolygonEditor<M, N>
+  shape: M
+  previous: ChainNode<M, N>
+  next: ChainNode<M, N>
+  virtual: VirtualNode<M, N>
+  constructor(editor: PolygonEditor<M, N>, position: number[]) {
+    this.editor = editor
+    this.position = position
+    editor.trigger('create-node', this)
+
+  }
+
+  update(p: number[]) {
+    this.position = p
+    this.editor.trigger('update-node', this)
+    this.previous?.virtual.update()
+    this.virtual?.update()
+  }
+
+  createNext(p: number[]) {
+    this.next = new ChainNode(this.editor, p)
+    this.next.previous = this
+    this.virtual = new VirtualNode(this)
+    return this.next
+  }
+
+
+
+  destroy() {
+    const { editor, virtual, previous, next } = this
+    if (editor.first.next.next.next == editor.first) {
+
+      editor.setCoordinates([])
+      editor.trigger('empty')
+    } else {
+      if (editor.first == this) {
+        editor.first = this.next
+      }
+      previous.next = next
+      next.previous = previous
+      previous.virtual.update()
+      editor.trigger('remove-node', this)
+      editor.trigger('remove-node', virtual)
+    }
+
+
+
+  }
+}
+
+
+export class VirtualNode<M, N>{
+  type = 'virtual' as const
+  shape: N
+  previous: ChainNode<M, N>
+
+  get next() {
+    return this.previous.next
+  }
+  get editor() {
+    return this.previous.editor
+  }
+  get position() {
+    const { previous, next } = this
+    return previous.position.map((e, i) => (e + next.position[i]) / 2)
+  }
+  constructor(n: ChainNode<M, N>) {
+    this.previous = n
+    this.editor.trigger('create-node', this)
+  }
+  update() {
+    this.editor.trigger('update-node', this)
+  }
+
+  insert() {
+    const { previous, next } = this
+    const p = this.position
+    this.previous = previous.createNext(p)
+    this.previous.virtual = this
+    this.previous.next = next
+    next.previous = this.previous
+    this.update()
+    return this.previous
+  }
+
+  destroy() {
+    this.previous.virtual = undefined
+    this.editor.trigger('remove-node', this)
+  }
+
+
+}
+

package/src/utils/PolylineEditor.ts

@@ -0,0 +1,149 @@
+import Eventful from "zrender/lib/core/Eventful"
+
+
+export class PolylineEditor<M, N> extends Eventful<{
+  'create-node': (n: ChainNode<M, N> | VirtualNode<M, N>) => void
+  'update-node': (n: ChainNode<M, N> | VirtualNode<M, N>) => void
+  'remove-node': (n: ChainNode<M, N> | VirtualNode<M, N>) => void
+  "empty": () => void
+}>{
+  first: ChainNode<M, N>
+  setCoordinates(ps: number[][]) {
+
+    let anchor = this.first
+
+    while (anchor) {
+      this.trigger('remove-node', anchor)
+      anchor.virtual && this.trigger('remove-node', anchor.virtual)
+      anchor = anchor.next
+    }
+    ps.forEach(e => {
+      if (anchor) {
+        anchor = anchor.createNext(e)
+
+      } else {
+        this.first = new ChainNode(this, e)
+        anchor = this.first
+      }
+    })
+  }
+  getCoordinates() {
+    const res: number[][] = []
+    let anchor = this.first
+    while (anchor) {
+      res.push(anchor.position)
+      anchor = anchor.next
+    }
+    return res
+  }
+}
+
+
+
+
+
+export class ChainNode<M, N>{
+  type = 'node' as const
+  position: number[]
+  editor: PolylineEditor<M, N>
+  shape: M
+  previous: ChainNode<M, N>
+  next: ChainNode<M, N>
+  virtual: VirtualNode<M, N>
+  constructor(editor: PolylineEditor<M, N>, position: number[]) {
+    this.editor = editor
+    this.position = position
+    editor.trigger('create-node', this)
+  }
+
+  update(p: number[]) {
+    this.position = p
+    this.editor.trigger('update-node', this)
+    this.previous?.virtual.update()
+    this.virtual?.update()
+  }
+
+  createNext(p: number[]) {
+    this.next = new ChainNode(this.editor, p)
+    this.next.previous = this
+    this.virtual = new VirtualNode(this)
+    return this.next
+  }
+
+
+
+  destroy() {
+    const { editor, virtual, previous, next } = this
+    if (previous && next) {
+      previous.next = next
+      next.previous = previous
+      previous.virtual.update()
+
+      editor.trigger('remove-node', virtual)
+    } else if (previous) {
+      previous.next = undefined
+
+      previous.virtual.destroy()
+    } else if (next) {
+      editor.first = next
+      next.previous = undefined
+
+      editor.trigger('remove-node', virtual)
+    } else {
+      editor.first = undefined
+      editor.trigger('empty')
+    }
+
+
+    if (editor.first && !editor.first.next) {
+      editor.first.destroy()
+    }
+
+    editor.trigger('remove-node', this)
+
+  }
+}
+
+
+export class VirtualNode<M, N>{
+  type = 'virtual' as const
+  shape: N
+  previous: ChainNode<M, N>
+
+  get next() {
+    return this.previous.next
+  }
+  get editor() {
+    return this.previous.editor
+  }
+  get position() {
+    const { previous, next } = this
+    return previous.position.map((e, i) => (e + next.position[i]) / 2)
+  }
+  constructor(n: ChainNode<M, N>) {
+    this.previous = n
+    this.editor.trigger('create-node', this)
+  }
+  update() {
+    this.editor.trigger('update-node', this)
+  }
+
+  insert() {
+    const { previous, next } = this
+    const p = this.position
+    this.previous = previous.createNext(p)
+    this.previous.virtual = this
+    this.previous.next = next
+    next.previous = this.previous
+    this.update()
+    return this.previous
+  }
+
+  destroy() {
+    this.previous.virtual = undefined
+    this.editor.trigger('remove-node', this)
+  }
+
+
+}
+

package/src/utils/Projection.ts

@@ -0,0 +1,46 @@
+const R = 6378137;
+// const MAX_LATITUDE = 85.0511287798
+const D = Math.PI / 180;
+const RD = R * D;
+const r = R / 2;
+export const Projection = {
+  /** 经度转墨卡托横坐标 */
+  lonToX(lon: number) {
+    return RD * lon;
+  },
+  /** 纬度转墨卡托纵坐标 */
+  latToY(lat: number) {
+    const sin = Math.sin(lat * D);
+    return r * Math.log((1 + sin) / (1 - sin));
+  },
+  /** 墨卡托横坐标转经度 */
+  xToLon(x: number) {
+    return x / RD;
+  },
+  /** 墨卡托纵坐标转纬度 */
+  yToLat(y: number) {
+    return (2 * Math.atan(Math.exp(y / R)) - Math.PI / 2) / D;
+  },
+};
+
+// export const Projection = {
+//   /** 经度转横坐标 */
+//   lonToX (lon: number) {
+//     return lon
+//   },
+//   /** 纬度转纵坐标 */
+//   latToY (lat: number) {
+
+//     return lat
+//   },
+//   /** 横坐标转经度 */
+//   xToLon (x: number) {
+//     return x
+//   },
+//   /** 纵坐标转纬度 */
+//   yToLat (y: number) {
+//     return y
+//   }
+// };
+
+(window as any).Projection = Projection;