@hzab/map-combine 0.0.1

package/src/cesium/CesiumPolyline.ts

@@ -0,0 +1,382 @@
+import { Polyline } from "../basic/Polyline";
+import { ChainNode, PolylineEditor } from "../utils/PolylineEditor";
+import { CesiumMap } from "./CesiumMap";
+import iconPoint from '../assets/point.png'
+import iconAdd from '../assets/add.png'
+
+
+
+const source = `
+czm_material czm_getMaterial(czm_materialInput materialInput){
+    czm_material material = czm_getDefaultMaterial(materialInput);
+    vec2 st =vec2(fract(materialInput.st.x*k), materialInput.st.y);
+    vec4 colorImage = texture2D(image, vec2(fract((st.s - speed*czm_frameNumber*0.005)), st.t));
+    material.alpha = colorImage.a;
+    material.diffuse = colorImage.xyz;
+    return material;
+}`
+
+
+function createLineMaterial(e: Polyline<unknown>) {
+
+  if (e.icon || e.flow) {
+    const material = new Cesium.Material({
+      fabric: {
+        type: 'PolylineFlowIcon',
+        uniforms: {
+          image: e.icon || 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAO1JREFUWEftl8EJwkAQRWd7iAFTgZZgJD0YtJOQu/eQToyxh2AsIVbgQdKDsoEBT0L+H9hL9j7smzd/l12XNPFZAi63AAQ3sL6uPgEjIA4FSKO99OOdZocAim0pxaaUU5fTEBTAY+zl2B0oCxCA13/J2mlj1gIE4DduspvsolTqZyX1UMEWYAC1wI4BBvi1wIyBAtDTwFigACzCSAFYhJEGYMNIA2gOvI2kjWcfRzMA9D6gAV75e+oa6d7XUQCqH+2eBtDugwCw4dO0wiOw0E+NgA0fZcCqe9iA1VsABvCFQR+ls+/bPwXL12wx8AUhFKmRjCCoogAAAABJRU5ErkJggg==',
+          speed: e.flow ? 10 : 0,
+          k: 20
+        },
+        source,
+      },
+      translucent() {
+        return true
+      }
+    })
+    return material
+  } else {
+    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 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 drawPolyline(map: CesiumMap, polyline: Polyline<unknown>) {
+  const { event, viewer } = map
+  let status = 0
+  let skip = 0
+
+
+  let material = createLineMaterial(polyline)
+  const appearance = new Cesium.PolylineMaterialAppearance({
+    material,
+  })
+  const markers = viewer.scene.primitives.add(
+    new Cesium.BillboardCollection({
+      show: polyline.show
+    })
+  );
+
+  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')
+      });
+    }
+  }
+
+  let primitive: any
+  let cache: any[]
+  let activeNode: ChainNode<any, any>
+  if (polyline.coordinates) {
+    status = 2
+    cache = polyline.coordinates.map((e) =>
+      Cesium.Cartesian3.fromDegrees(e[0], e[1], e[2])
+    )
+    primitive = new Cesium.Primitive({
+      show: polyline.show,
+      geometryInstances: new Cesium.GeometryInstance({
+        geometry: new Cesium.PolylineGeometry({
+          positions: cache,
+          width: polyline.lineWidth,
+          vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+        }),
+        id: _event,
+      }),
+      appearance,
+
+    });
+    viewer.scene.primitives.add(primitive);
+  }
+
+
+
+  const editor = new PolylineEditor<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()
+    viewer.scene.primitives.remove(primitive);
+    status = 0
+  })
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+    const keys = new Set()
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          if (primitive) {
+            primitive.show = polyline.show
+            markers.show = polyline.show
+          }
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          keys.add('Primitive')
+          break;
+        case 'lineWidth':
+          keys.add('Primitive')
+          break;
+        case 'icon':
+          keys.add('Material')
+          break;
+        case 'flow':
+          keys.add('Material')
+          break;
+        case 'stroke':
+          material.uniforms.color = Cesium.Color.fromCssColorString(polyline.stroke);
+          break;
+        case 'dash':
+          keys.add('Material')
+
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+    keys.forEach(key => {
+      switch (key) {
+        case 'Primitive':
+          if (polyline.coordinates) {
+            cache = polyline.coordinates.map(e => geographyTcartesian3(e))
+          } else {
+            cache = []
+            markers.removeAll()
+            status = 0
+          }
+
+          initPrimitive()
+
+          break;
+        case 'Material':
+          material = createLineMaterial(polyline)
+          appearance.material = material
+          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 initPrimitive = () => {
+    primitive && viewer.scene.primitives.remove(primitive);
+    if (cache.length > 1) {
+      const geometry = Cesium.PolylineGeometry.createGeometry(new Cesium.PolylineGeometry({
+        positions: cache,
+        width: polyline.lineWidth,
+        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+      }))
+      if (geometry) {
+        primitive = new Cesium.Primitive({
+          show: polyline.show,
+          asynchronous: false,
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry,
+            id: _event,
+          }),
+          appearance,
+        });
+        viewer.scene.primitives.add(primitive);
+      } else {
+        primitive = undefined
+      }
+
+    } else {
+      primitive = undefined
+    }
+
+  }
+
+  const onDbClick = () => {
+    switch (status) {
+      case 1:
+        status = 2
+        skip++
+        cache.pop()
+        cache.pop()
+        // geometry.setCoordinates(cache)
+        polyline.coordinates = cache.map(e => cartesian3Tgeography(e))
+        polyline.event.trigger('data-loaded')
+        polyline.event.trigger('pointer-in')
+        break
+      case 3:
+        polyline.stopEdit()
+        break
+    }
+  }
+
+  const onStopEdit = () => {
+    if (status == 3) {
+      status = 2
+      skip++
+      polyline.coordinates = editor.getCoordinates().map(e => cartesian3Tgeography(e))
+      editor.setCoordinates([])
+      polyline.event.trigger('pointer-in')
+    }
+  }
+
+  const onDestroy = () => {
+    primitive && viewer.scene.primitives.remove(primitive);
+    viewer.scene.primitives.remove(markers)
+    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/cesium/CesiumTile3D.ts

@@ -0,0 +1,100 @@
+import { Tile3D } from "../basic/Tile3D";
+import { CesiumMap } from "./CesiumMap";
+
+function create3DTile(tile3d: Tile3D) {
+  const tileset = new Cesium.Cesium3DTileset({
+    show: tile3d.show,
+    url: tile3d.src,
+  });
+  tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality)
+  tileset.readyPromise
+  return tileset
+}
+
+function updateMatrix(tileset: any, tile3d: Tile3D, origin: any) {
+
+  if (tile3d.coordinates) {
+    // const center = Cesium.Matrix4.multiplyByPoint(tileset.modelMatrix, tileset.boundingSphere.center, new Cesium.Cartesian3())
+    // const cartographic = Cesium.Cartographic.fromCartesian(center)
+    // console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
+    // cartographic.height = 0
+    // const transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude));
+    // const res = Cesium.Matrix4.inverse(transform, new Cesium.Matrix4());
+    // console.log(inverse);
+
+    const target = Cesium.Cartesian3.fromDegrees(...tile3d.coordinates)
+    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(Cesium.Cartesian3.subtract(target, origin, target));
+  } else {
+    tileset.modelMatrix = Cesium.Matrix4.IDENTITY
+  }
+
+
+}
+
+export function drawTile3D(map: CesiumMap, tile3d: Tile3D) {
+  const { viewer } = map
+  let tileset = create3DTile(tile3d)
+  let origin
+  viewer.scene.primitives.add(tileset).readyPromise.then(() => {
+    const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
+    origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude)
+    updateMatrix(tileset, tile3d, origin)
+    tile3d.event.trigger('ready');
+
+    // (window as any).getCenter = () => {
+    //   const center = tileset.boundingSphere.center
+    //   const cartographic = Cesium.Cartographic.fromCartesian(center)
+    //   console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude), cartographic.height);
+    // }
+
+  });
+
+  const onUpdate = (e: Set<string>) => {
+
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          tileset.show = tile3d.show
+          break;
+        case 'src':
+          viewer.scene.primitives.remove(tileset)
+          tileset = create3DTile(tile3d)
+          viewer.scene.primitives.add(tileset).readyPromise.then(() => {
+            const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
+            origin = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude)
+            updateMatrix(tileset, tile3d, origin)
+            tile3d.event.trigger('ready');
+
+          });
+          break;
+        case 'coordinates':
+          if (!e.has('src')) {
+            updateMatrix(tileset, tile3d, origin)
+          }
+          break;
+
+        case 'quality':
+          tileset.maximumScreenSpaceError = 18 * (1 - tile3d.quality)
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+
+
+  }
+  const onFocus = () => {
+    viewer.flyTo(tileset);
+  }
+
+  const onDestroy = () => {
+    viewer.scene.primitives.remove(tileset)
+    tile3d.event.off('update', onUpdate)
+    tile3d.event.off('focus', onFocus)
+    tile3d.event.off('destroy', onDestroy)
+  }
+  tile3d.event.on('update', onUpdate)
+  tile3d.event.on('focus', onFocus)
+  tile3d.event.on('destroy', onDestroy)
+
+}

package/src/mine/MineEvent.ts

@@ -0,0 +1,29 @@
+import { MineMap } from "./MineMap";
+
+
+export function bindEvent(map: MineMap) {
+  const { event, viewer, container } = map
+  viewer.on('mousemove', (e) => {
+    event.canvas = [e.point.x, e.point.y]
+    event.geography = [e.lngLat.lng, e.lngLat.lat, 0]
+  })
+  container.addEventListener('pointermove', (e) => {
+    event.trigger('pointer-move')
+  })
+  viewer.on('move', () => {
+    event.trigger('view-change')
+  })
+  viewer.on('mouseup', () => {
+    event.trigger('pointer-up')
+  })
+  viewer.on('mousedown', () => {
+    event.trigger('pointer-down')
+  })
+  viewer.on('click', () => {
+    event.trigger('left-click')
+  })
+
+  event.on('destroy', () => {
+    this.viewer.remove()
+  })
+}

package/src/mine/MineMap.ts

@@ -0,0 +1,90 @@
+
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+import { bindEvent } from "./MineEvent";
+import { drawPoint } from "./MinePoint";
+import { drawPolygon } from "./MinePolygon";
+import { drawPolyline } from "./MinePolyline";
+import { drawTile3D } from "./MineTile3D";
+
+export class MineMap extends MapCombine {
+
+  viewer: any;
+  container: HTMLDivElement;
+
+  get cursor(): string {
+    return this.viewer.getCursor()
+  }
+  set cursor(val: string) {
+    this.viewer.setCursor(val)
+  }
+
+  get moveable(): boolean {
+    return this.viewer.dragPan.isEnabled();
+  }
+  set moveable(val: boolean) {
+    val ? this.viewer.dragPan.enable() : this.viewer.dragPan.disable();
+  }
+  get center(): number[] {
+    const p = this.viewer.getCenter()
+    return [p.lng, p.lat]
+  }
+  set center(val: number[]) {
+    this.viewer.setCenter(val)
+  }
+
+  get zoom(): number {
+    return this.viewer.getZoom()
+  }
+  set zoom(val: number) {
+    this.viewer.setZoom(val)
+  }
+
+  constructor(viewer: any) {
+    super()
+    this.viewer = viewer
+    this.container = viewer.getContainer()
+    this.container.children.item(1).appendChild(this.htmllayer)
+    this.cursor = 'default'
+    bindEvent(this)
+  }
+
+
+
+  canvasTgeography(p: number[]): number[] {
+    const res = this.viewer.getTDSpaceCoord({ point: p, disableLayer: true });
+    return [res.lngLat.lng, res.lngLat.lat, 0];
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const res = this.viewer.project([p[0], p[1]], p[2] ?? 0);
+    return [res.x, res.y];
+  }
+
+  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
+  }
+
+  createTile3D(option?: Partial<Tile3DOption>): Tile3D {
+    const e = new Tile3D(this, option)
+    drawTile3D(this, e)
+    return e
+  }
+
+}
+