@hzab/map-combine 0.0.1

package/src/basic/ReactPopup.tsx

@@ -0,0 +1,34 @@
+import { ReactElement } from "react";
+import ReactDOM from "react-dom";
+
+
+export interface ReactPopupOption {
+  /** 弹框内容 */
+  element: ReactElement;
+  /** 层高 */
+  zIndex?: number;
+}
+
+export class ReactPopup {
+  private dom: HTMLDivElement;
+  option: ReactPopupOption;
+  node: HTMLDivElement;
+  constructor(map, option: ReactPopupOption = {
+    element: <></>,
+    zIndex: 10
+  }) {
+    this.dom = document.createElement("div");
+    this.option = option;
+    const coordinate = map.geographyTcanvas(map.event.geography)
+    this.dom.style.position = "absolute";
+    this.dom.style.top = coordinate[1] + "px";
+    this.dom.style.left = coordinate[0] + "px";
+    map.container.appendChild(this.dom);
+    ReactDOM.render(option.element ?? <></>, this.dom);
+  }
+
+  destroy() {
+    this.dom.remove();
+    ReactDOM.unmountComponentAtNode(this.dom);
+  }
+}

package/src/basic/Tile3D.ts

@@ -0,0 +1,99 @@
+import Eventful from "zrender/lib/core/Eventful"
+
+import { MapElement, MapElementOption } from "./MapElement"
+import { MapCombine } from "./MapCombine"
+
+export interface Tile3DOption extends MapElementOption {
+  show: boolean
+  src: string
+  coordinates?: number[]
+  quality: number
+}
+
+export class Tile3D extends MapElement<Tile3DOption>{
+  type = 'Tile3D'
+  event = new Eventful<{
+    'ready': () => void
+    'update': (keys: Set<string>) => void
+    'destroy': () => void
+    'focus': () => void
+  }>()
+
+  get show() {
+    return this._option.show
+  }
+
+  set show(val) {
+    if (this._option.show != val) {
+      this._option.show = val
+      this._update('show')
+    }
+  }
+
+  get src() {
+    return this._option.src
+  }
+
+  set src(val) {
+    if (this._option.src != val) {
+      this._option.src = val
+      this._update('src')
+    }
+  }
+
+  get coordinates() {
+    return this._option.coordinates
+  }
+
+  set coordinates(val) {
+    if (this._option.coordinates != val) {
+      this._option.coordinates = val
+      this._update('coordinates')
+    }
+  }
+
+  get quality() {
+    return this._option.quality
+  }
+
+  set quality(val) {
+    if (this._option.quality != val) {
+      this._option.quality = val
+      this._update('quality')
+    }
+  }
+
+
+
+  constructor(map: MapCombine, option: Partial<Tile3DOption> = {}) {
+    super(map, Object.assign({ ...Tile3D.option }, option))
+  }
+
+  static option: Tile3DOption = {
+    name: '3D瓦片',
+    show: true,
+    src: '',
+    quality: 0.5
+  }
+
+  private _needUpdate?: Set<string>
+  private _update(key: string) {
+    if (this._needUpdate) {
+      this._needUpdate.add(key)
+    } else {
+      this._needUpdate = new Set([key])
+      setTimeout(() => {
+        this.event.trigger('update', this._needUpdate)
+        this._needUpdate = undefined
+      });
+    }
+  }
+
+  protected _onDestroy(): void {
+    this.event.trigger('destroy')
+  }
+
+  focus() {
+    this.event.trigger('focus')
+  }
+}

package/src/cesium/CesiumEvent.ts

@@ -0,0 +1,86 @@
+import { CesiumMap } from "./CesiumMap"
+
+export function bindEvent(map: CesiumMap) {
+  const { event, viewer, container } = map
+  viewer.camera.percentageChanged = 0.0001;
+  viewer.camera.changed.addEventListener(() => {
+    event.trigger('view-change')
+  });
+  viewer.camera.moveEnd.addEventListener(() => {
+    event.trigger('view-moveEnd')
+  });
+  const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+  let target: any;
+  handler.setInputAction((e: any) => {
+    event.canvas = [e.endPosition.x, e.endPosition.y];
+    event.geography = map.canvasTgeography(event.canvas);
+    let _target: any = undefined
+    const res = viewer.scene.pick(e.endPosition);
+    const a = res
+      ? res.id
+        ? res.id
+        : res.primitive
+          ? res.primitive
+          : undefined
+      : undefined;
+
+    if (a && !a.silent) {
+      _target = a;
+    }
+    if (_target !== target) {
+      target?.onPointerOut?.();
+      _target?.onPointerIn?.();
+      target = _target;
+    }
+
+    if (target) {
+      map.cursor = target.cursor;
+    } else {
+      map.cursor = "";
+    }
+    event.trigger('pointer-move')
+  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+  handler.setInputAction(() => {
+    if (target) {
+      target.onPointerDown?.();
+    }
+    event.trigger('pointer-down')
+  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+
+  container.addEventListener('pointerup', () => {
+    if (target) {
+      target.onPointerUp?.();
+    }
+    event.trigger('pointer-up')
+  })
+
+
+  handler.setInputAction((e) => {
+    console.log('e', e);
+    
+    if (target) {
+      target.onLClick?.();
+    }
+    event.trigger('left-click')
+  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+  handler.setInputAction(() => {
+    if (target) {
+      target.onRClick?.();
+    }
+    event.trigger('right-click')
+  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+  handler.setInputAction(() => {
+    if (target) {
+      target.onDbClick?.();
+    }
+    event.trigger('double-click')
+  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+  event.on('destroy', () => {
+    viewer.destroy()
+  })
+
+}

package/src/cesium/CesiumMap.ts

@@ -0,0 +1,167 @@
+
+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 "./CesiumEvent";
+import { drawPoint } from "./CesiumPoint";
+import { drawPolygon } from "./CesiumPolygon";
+import { drawPolyline } from "./CesiumPolyline";
+import { drawTile3D } from "./CesiumTile3D";
+
+const $m = 20037508.34278924;
+
+export class CesiumMap extends MapCombine {
+
+  viewer: any;
+  markers: any;
+
+  container: HTMLDivElement;
+
+
+
+  get cursor(): string {
+    return (this.container).style.cursor
+  }
+  set cursor(val: string) {
+    (this.container).style.cursor = val
+  }
+
+  get moveable(): boolean {
+    return this.viewer.scene.screenSpaceCameraController.enableRotate;
+  }
+  set moveable(val: boolean) {
+    this.viewer.scene.screenSpaceCameraController.enableRotate = val;
+  }
+  get center(): number[] {
+    const { viewer, container } = this;
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+    const position = viewer.scene.camera.pickEllipsoid(
+      new Cesium.Cartesian2(width / 2, height / 2),
+      viewer.scene.globe.ellipsoid
+    );
+    const cartographic = Cesium.Cartographic.fromCartesian(position);
+    return [
+      Cesium.Math.toDegrees(cartographic.longitude),
+      Cesium.Math.toDegrees(cartographic.latitude),
+    ]
+  }
+  set center(val: number[]) {
+    const { viewer, container } = this;
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+    const position = viewer.scene.camera.pickEllipsoid(
+      new Cesium.Cartesian2(width / 2, height / 2),
+      viewer.scene.globe.ellipsoid
+    );
+    const target = Cesium.Cartesian3.fromDegrees(...val)
+    Cesium.Cartesian3.subtract(target, position, target)
+    Cesium.Cartesian3.add(this.viewer.camera.position, target, this.viewer.camera.position)
+  }
+
+  get zoom(): number {
+    const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position)
+    return this.distanceTzoom(cartographic.height)
+  }
+  set zoom(val: number) {
+
+    const cartographic = Cesium.Cartographic.fromCartesian(this.viewer.camera.position)
+    cartographic.height = this.zoomTdistance(val)
+    this.viewer.camera.position = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)
+  }
+
+  fov = 0.9695385667699215;
+  distanceTzoom(distance: number) {
+    const height = this.container.offsetHeight;
+    return Math.log2(($m * height) / (256 * Math.tan(this.fov / 2) * distance));
+  }
+  zoomTdistance(zoom: number): number {
+    const height = this.container.offsetHeight;
+    return ($m * height) / (256 * Math.tan(this.fov / 2) * Math.pow(2, zoom));
+  }
+
+  constructor(viewer: any) {
+    super()
+    this.viewer = viewer
+    this.container = viewer.container
+    this.container.appendChild(this.htmllayer)
+    this.cursor = 'default'
+    this.markers = this.viewer.scene.primitives.add(
+      new Cesium.BillboardCollection()
+    );
+    bindEvent(this)
+
+  }
+
+  getView() {
+    const { camera } = this.viewer
+    return [
+      camera.position.x, camera.position.y, camera.position.z,
+      camera.heading, camera.pitch, camera.roll,
+    ]
+  }
+
+  setView(e: number[]) {
+    const { camera } = this.viewer
+    camera.setView({
+      destination: new Cesium.Cartesian3(e[0], e[1], e[2]),
+      orientation: new Cesium.HeadingPitchRoll(e[3], e[4], e[5])
+    });
+  }
+
+  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
+  }
+
+  canvasTgeography(p: number[]): number[] {
+    const { viewer } = this;
+    const cartesian2 = new Cesium.Cartesian2(...p);
+    const ray = viewer.camera.getPickRay(cartesian2);
+    const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+
+    if (cartesian) {
+      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+      return [
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude),
+        cartographic.height,
+      ];
+    } else {
+      return [0, 0, 0];
+    }
+  }
+  geographyTcanvas(p: number[]): number[] {
+    const res = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, Cesium.Cartesian3.fromDegrees(...p));
+    if (!res) {
+      return [-1, -1];
+    }
+    return [res.x, res.y];
+  }
+
+
+
+
+}
+

package/src/cesium/CesiumPoint.ts

@@ -0,0 +1,137 @@
+
+import { Point } from "../basic/Point";
+import { CesiumMap } from "./CesiumMap";
+
+
+export function drawPoint(map: CesiumMap, point: Point<unknown>) {
+  const { markers, event } = map
+  const { size, center } = point
+  let status = 0
+  let skip = 0
+  const shape = markers.add({
+    show: false,
+    position: Cesium.Cartesian3.ZERO,
+    pixelOffset: new Cesium.Cartesian2(-size[0] * (center[0] - 0.5), -size[1] * (center[1] - 0.5)),
+    width: size[0],
+    height: size[1],
+    image: point.src,
+    rotation: point.rotation,
+    id: {
+      cursor: point.cursor,
+      silent: point.silent,
+      onPointerIn() {
+        status == 2 && point.event.trigger('pointer-in')
+      },
+      onPointerOut() {
+
+        status == 2 && point.event.trigger('pointer-out')
+      },
+      onLClick() {
+        status == 2 && point.event.trigger('left-click')
+      },
+      onRClick() {
+        status == 2 && 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
+        }
+      }
+    }
+  })
+
+  if (point.coordinates) {
+    status = 2
+    shape.position = Cesium.Cartesian3.fromDegrees(...point.coordinates)
+    shape.show = point.show
+  }
+
+  const onMouseMove = () => {
+    switch (status) {
+      case 0:
+        status = 1
+        shape.position = Cesium.Cartesian3.fromDegrees(...event.geography)
+        shape.show = point.show
+        break;
+      case 1:
+      case 3:
+        shape.position = Cesium.Cartesian3.fromDegrees(...event.geography)
+        break
+    }
+  }
+
+  const onClick = () => {
+    if (status == 1) {
+      status = 2
+      skip++
+      point.coordinates = event.geography
+      point.event.trigger('pointer-in')
+    }
+  }
+
+  const onUpdate = (e: Set<string>) => {
+    if (skip) {
+      skip--
+      return
+    }
+    const { size, center } = point
+    e.forEach(key => {
+      switch (key) {
+        case 'show':
+          shape.show = point.show
+          break;
+        case 'editable':
+          break;
+        case 'coordinates':
+          if (point.coordinates) {
+            shape.position = Cesium.Cartesian3.fromDegrees(...point.coordinates)
+            shape.show = point.show
+            status = 2;
+          } else {
+            shape.show = false
+            status = 0
+          }
+
+          break;
+        case 'src':
+          shape.image = point.src
+          break;
+        case 'size':
+          shape.width = point.size[0]
+          shape.height = point.size[1]
+          break;
+        case 'center':
+          shape.pixelOffset = new Cesium.Cartesian2(-size[0] * (center[0] - 0.5), -size[1] * (center[1] - 0.5))
+          break;
+        case 'rotation':
+          shape.rotation = Cesium.Math.toRadians(point.rotation)
+          break;
+        default:
+          throw new Error(`${key} 还不支持修改`)
+      }
+    })
+  }
+
+  const onDestroy = () => {
+    markers.remove(shape)
+    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)
+
+}