@hzab/map-combine 0.0.1

package/src/mine/MinePolyline.ts

@@ -0,0 +1,359 @@
+
+import { Polyline } from "../basic/Polyline";
+import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
+import { MineMap } from './MineMap';
+import iconPoint from '../assets/point.png'
+import iconAdd from '../assets/add.png'
+
+
+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 getLayerOption(polyline: Polyline<unknown>) {
+  return {
+    id: polyline.name,
+    source: polyline.name,
+    type: "line",
+    translation: [0, 0, 1000],
+    "depth-test": false,
+    layout: {
+      visibility: polyline.show ? "visible" : 'none',
+    },
+    paint: polyline.dash ? {
+      "line-dasharray": [10, 10],
+      "line-color": polyline.stroke,
+      "line-width": polyline.lineWidth
+    } : {
+      "line-color": polyline.stroke,
+      "line-width": polyline.lineWidth
+    },
+  }
+}
+
+
+function main(map: MineMap, polyline: Polyline<unknown>) {
+  const { viewer } = map
+  const data = {
+    type: "FeatureCollection",
+    features: [],
+  }
+  viewer.addSource(polyline.name, {
+    type: "geojson",
+    data
+  });
+
+  const cource = viewer.getSource(polyline.name)
+
+  viewer.addLayer(getLayerOption(polyline));
+
+  let status = 0
+  let skip = 0
+  const editor = new PolylineEditor<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: "LineString",
+          coordinates: coordinates,
+        },
+        properties: {
+          id: polyline.name,
+        },
+      }
+    } else {
+      data.features = []
+    }
+    cource.setData(data)
+  }
+
+
+
+
+
+  if (polyline.coordinates) {
+    status = 2
+    updateCoordinate(polyline.coordinates)
+  }
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+
+    const keys = new Set()
+
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          keys.add('layer')
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          updateCoordinate(polyline.coordinates)
+          if (polyline.coordinates) {
+            status = 2
+          } else {
+            status = 0
+          }
+          break;
+        case 'lineWidth':
+          keys.add('layer')
+          break;
+        case 'stroke':
+          keys.add('layer')
+          break;
+        case 'dash':
+          keys.add('layer')
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+
+    keys.forEach(e => {
+      switch (e) {
+        case 'layer':
+          viewer.removeLayer(polyline.name)
+          viewer.addLayer(getLayerOption(polyline));
+          break;
+      }
+    })
+  }
+
+  const onPointerIn = () => {
+    map.cursor = polyline.cursor
+    if (status == 2) {
+
+      polyline.event.trigger('pointer-in')
+    }
+
+  }
+
+  const onPointerOut = () => {
+    map.cursor = 'default'
+    if (status == 2) {
+
+      polyline.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 = (e) => {
+    switch (status) {
+      case 1:
+        status = 2
+        skip++
+        cache.pop()
+        cache.pop()
+        polyline.coordinates = cache
+        polyline.event.trigger('pointer-in')
+        break;
+      case 3:
+        if (!skip) {
+          polyline.event.trigger('stop-edit')
+        } else {
+          skip = 0
+        }
+
+        break;
+    }
+  }
+
+  const onLineDbClick = () => {
+    switch (status) {
+      case 2:
+
+
+        polyline.event.trigger('start-edit')
+
+        break;
+    }
+  }
+
+  const onLineClick = () => {
+    switch (status) {
+      case 2:
+        polyline.event.trigger('left-click')
+        break;
+    }
+  }
+  const onLineRClick = () => {
+    if (polyline.menu) {
+      map.menu.show(polyline.menu);
+    }
+    switch (status) {
+      case 2:
+        polyline.event.trigger('right-click')
+        break;
+    }
+  }
+
+  const onStartEdit = () => {
+    if (status == 2) {
+      status = 3
+      map.cursor = 'default'
+      editor.setCoordinates(polyline.coordinates)
+      skip = 1
+    }
+  }
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2
+      skip++
+      polyline.coordinates = editor.getCoordinates()
+      editor.setCoordinates([])
+    }
+  }
+
+
+  const onDestroy = () => {
+    viewer.removeLayer(polyline.name)
+    viewer.removeSource(polyline.name)
+    viewer.off('mouseover', polyline.name, onPointerIn)
+    viewer.off('mouseout', polyline.name, onPointerOut)
+    viewer.off('dblclick', polyline.name, onLineDbClick)
+    viewer.off('click', polyline.name, onLineClick)
+    viewer.off('contextmenu', polyline.name, onLineRClick)
+    viewer.off('click', onClick)
+    viewer.off('mousemove', onPointerMove)
+    viewer.off('dblclick', onDbClick)
+
+    polyline.event.off('update', onUpdate)
+    polyline.event.off('destroy', onDestroy)
+    polyline.event.off('start-edit', onStartEdit)
+    polyline.event.off('stop-edit', onStopEdit)
+  }
+
+  viewer.on('mouseover', polyline.name, onPointerIn)
+  viewer.on('mouseout', polyline.name, onPointerOut)
+  viewer.on('dblclick', polyline.name, onLineDbClick)
+  viewer.on('click', polyline.name, onLineClick)
+  viewer.on('contextmenu', polyline.name, onLineRClick)
+  viewer.on('click', onClick)
+  viewer.on('mousemove', onPointerMove)
+  viewer.on('dblclick', onDbClick)
+
+  polyline.event.on('update', onUpdate)
+  polyline.event.on('destroy', onDestroy)
+  polyline.event.on('start-edit', onStartEdit)
+  polyline.event.on('stop-edit', onStopEdit)
+}
+
+
+export function drawPolyline(map: MineMap, polyline: Polyline<unknown>) {
+  const { viewer } = map
+  if (viewer.loaded()) {
+    main(map, polyline)
+  } else {
+    viewer.once('load', () => {
+      main(map, polyline)
+    })
+  }
+}

package/src/mine/MineTile3D.ts

@@ -0,0 +1,32 @@
+import { Tile3D } from "../basic/Tile3D";
+import { MineMap } from "./MineMap";
+
+
+function main(map: MineMap, tile3d: Tile3D) {
+  const { viewer } = map
+
+  viewer.addSource(tile3d.name, {
+    type: "3d-tiles",
+    url: tile3d.src,
+  });
+
+  viewer.addLayer({
+    type: "3d-tiles",
+    id: tile3d.name,
+    source: tile3d.name,
+  });
+}
+
+
+export function drawTile3D(map: MineMap, tile3d: Tile3D) {
+
+  const { viewer } = map
+  if (viewer.loaded()) {
+    main(map, tile3d)
+  } else {
+    viewer.once('load', () => {
+      main(map, tile3d)
+    })
+  }
+
+}

package/src/openlayer/OpenlayerEvent.ts

@@ -0,0 +1,75 @@
+import { OpenlayerMap } from "./OpenlayerMap";
+
+export function bindEvent(map: OpenlayerMap) {
+  const { event, viewer, container } = map;
+  let target: any;
+  let moving = false
+
+  viewer.on("pointermove", (e) => {
+    event.canvas = e.pixel;
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any
+    if (moving) {
+      event.trigger('pointer-move')
+      return
+    }
+    const res = viewer.getFeaturesAtPixel(event.canvas)[0];
+    _target = res ? res.get("event") : undefined;
+    if (_target?.silent) {
+      _target = undefined;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+    event.trigger('pointer-move')
+  })
+
+  container.addEventListener('mousedown', () => {
+    if (target) {
+      moving = true;
+      target.onPointerDown?.();
+    }
+    event.trigger('pointer-down')
+  })
+
+  container.addEventListener('mouseup', () => {
+    if (target) {
+      moving = false;
+      target.onPointerUp?.();
+    }
+    event.trigger('pointer-up')
+  })
+
+  container.addEventListener('contextmenu', (e) => {
+    e.preventDefault()
+    if (target) {
+      target.onRClick?.();
+    }
+  })
+
+  viewer.on("click", () => {
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger('left-click')
+  });
+
+  viewer.on("dblclick", () => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    map.event.trigger('double-click')
+  })
+
+  let key = 0
+
+  viewer.on('precompose', () => {
+    const _key = map.center.reduce((a, b) => a + b, map.zoom)
+    if (key != _key) {
+      key = _key
+      event.trigger('view-change')
+    }
+  })
+}

package/src/openlayer/OpenlayerMap.ts

@@ -0,0 +1,149 @@
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import Map from "ol/Map.js";
+import DragPan from "ol/interaction/DragPan";
+import { Projection } from "../utils/Projection";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import { fromLonLat } from "ol/proj";
+import { bindEvent } from "./OpenlayerEvent";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import DoubleClickZoom from "ol/interaction/DoubleClickZoom";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+
+import { drawPoint } from "./OpenlayerPoint";
+import { drawPolyline } from "./OpenlayerPolyline";
+import { drawPolygon } from "./OpenlayerPolygon";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+
+export class OpenlayerMap extends MapCombine {
+  viewer: Map;
+  container: HTMLDivElement;
+  dragPan: DragPan;
+  vectors: VectorSource
+  offset: number[];
+  fov = 0.9272952180016121;
+  get cursor(): string {
+    return (this.container).style.cursor
+  }
+  set cursor(val: string) {
+    (this.container).style.cursor = val
+  }
+  get moveable(): boolean {
+    return this.dragPan.getActive();
+  }
+  set moveable(val: boolean) {
+    this.dragPan.setActive(val);
+  }
+  get center(): number[] {
+    const center = this.viewer.getView().getCenter()!
+    return [Projection.xToLon(center[0]), Projection.yToLat(center[1]), 0]
+  }
+  set center(val: number[]) {
+    const { viewer } = this;
+    const view = viewer.getView();
+    view.setCenter([Projection.lonToX(val[0]), Projection.latToY(val[1])]);
+  }
+  get zoom(): number {
+    return this.viewer.getView().getZoom()
+  }
+  set zoom(val: number) {
+    this.viewer.getView().setZoom(val);
+  }
+
+  constructor(viewer: Map) {
+    super()
+    this.viewer = viewer
+    this.container = viewer.getViewport() as HTMLDivElement
+    this.container.appendChild(this.htmllayer)
+    const { center } = this;
+    this.offset = fromLonLat(center)
+
+    this.vectors = new VectorSource();
+    this.viewer.addLayer(
+      new VectorLayer({
+        source: this.vectors,
+      }),
+    );
+
+    this.dragPan = viewer
+      .getInteractions()
+      .getArray()
+      .find((interaction) => {
+        if (interaction instanceof DoubleClickZoom) {
+          interaction.setActive(false)
+        }
+        return interaction instanceof DragPan;
+      }) as DragPan;
+
+    bindEvent(this)
+  }
+
+  createPoint<K>(option?: Partial<PointOption<K>>): Point<K> {
+    const e = new Point(this, option)
+    drawPoint(this, e)
+    return e
+  }
+
+  createPolyline<K>(option?: Partial<PolylineOption<K>>): Polyline<K> {
+    const e = new Polyline(this, option)
+    drawPolyline(this, e)
+    return e
+  }
+  createPolygon<K>(option?: Partial<PolygonOption<K>>): Polygon<K> {
+    const e = new Polygon(this, option)
+    drawPolygon(this, e)
+    return e
+  }
+
+  // protected _onFrame(): void {
+  //   const { viewer, camera, offset } = this;
+  //   const box = viewer.getView().calculateExtent(viewer.getSize());
+
+  //   const height = box[3] - box[1];
+
+  //   camera.position.set((box[2] + box[0]) / 2 - offset[0], (box[3] + box[1]) / 2 - offset[1], height);
+
+  //   // this.meterPerPixel = height / this.container.offsetHeight;
+  // }
+
+  geographyTspace(p: number[]): number[] {
+    const { offset } = this;
+    return [Projection.lonToX(p[0]) - offset[0], Projection.latToY(p[1]) - offset[1], p[2] ?? 0];
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const pixel = this.viewer.getPixelFromCoordinate(fromLonLat(p));
+    if (pixel) {
+      return [pixel[0], pixel[1]];
+    } else {
+      return [0, 0]
+    }
+
+  }
+  spaceTgeography(p: number[]): number[] {
+    const { offset } = this;
+    return [Projection.xToLon(p[0] + offset[0]), Projection.yToLat(p[1] + offset[1]), p[2] ?? 0];
+  }
+  spaceTcanvas(p: number[]): number[] {
+    const { offset } = this;
+    const pixel = this.viewer.getPixelFromCoordinate([p[0] + offset[0], p[1] + offset[1]]);
+    return [pixel[0], pixel[1]];
+  }
+  canvasTspace(p: number[]): number[] {
+    const coordinates = this.viewer.getCoordinateFromPixel(p);
+    return [coordinates[0] - this.offset[0], coordinates[1] - this.offset[1], 0];
+  }
+
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    throw new Error("Method not implemented.");
+  }
+
+  canvasTgeography(p: number[]): number[] {
+    const coordinates = this.viewer.getCoordinateFromPixel(p);
+    return [Projection.xToLon(coordinates[0]), Projection.yToLat(coordinates[1]), 0];
+  }
+
+  _onDestroy() {
+    this.viewer.dispose()
+  }
+}