@hzab/map-combine 0.0.1 → 0.1.2

package/CHANGELOG.md

@@ -1,2 +1,7 @@
+# @hzab/map-combine@0.1.0
+
+feat: BIM 模型加载；旋转、平移、缩放
+feat: 地图瓦片转 84 坐标系
+
 # @hzab/map-combine@0.0.1
 组件初始化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.0.1",
+  "version": "0.1.2",
   "description": "地图组件",
   "main": "src",
   "scripts": {
@@ -29,6 +29,7 @@
     "axios": "^1.4.0",
     "eslint": "^8.30.0",
     "less": "^4.1.3",
+    "lil-gui": "^0.19.2",
     "mobx": "^6.7.0",
     "mobx-react": "^7.6.0",
     "react": "^17.0.2",
@@ -41,7 +42,6 @@
     "lib": "lib"
   },
   "peerDependencies": {
-    "@dvgis/cesium-map": "^3.1.0",
     "coordtransform": "^2.1.2",
     "lodash": ">=4.17.21",
     "ol": "^7.4.0",

package/src/basic/BasicBusiness.ts

@@ -0,0 +1,72 @@
+import { setValue } from "../utils";
+// import { type BasicElementOption, type BasicElement } from "./BasicElement";
+import { MapCombine } from "./MapCombine";
+
+export interface BasicBusinessOption {
+  /** 组件名，唯一标识 */
+  name: string;
+  /** 组件是否显示 */
+  show: boolean;
+}
+
+export abstract class BasicBusiness<T extends BasicBusinessOption> {
+  protected readonly _option: T;
+  protected readonly _map: MapCombine;
+  protected _elements = [];
+  /** 唯一标识 */
+  get name() {
+    return this._option.name;
+  }
+
+  /** 是否显示 */
+  get show() {
+    return this._option.show;
+  }
+
+  set show(val) {
+    setValue(this._option, "show", val, () => {
+      this._elements.forEach((e) => {
+        e?.update({
+          show: val,
+        });
+      });
+    });
+  }
+
+  constructor(map: MapCombine, option: T) {
+    this._map = map;
+    this._option = option;
+    // const oldElement = map.bussinesses.get(this.name);
+    // if (oldElement) {
+    //   oldElement.destroy();
+    // }
+    // map.bussinesses.set(this.name, this);
+  }
+
+  /** 地图展示时触发一次 */
+  onMapLoaded?(): void;
+  /** 每一帧触发一次 */
+  onFrame?(): void;
+  /** 视图变化先触发一次 */
+  onBeforeViewChange?(): void;
+  /** 视图变化时连续触发 */
+  onViewChange?(): void;
+  /** 视图变化后触发一次 */
+  onAfterViewChange?(): void;
+  /** 鼠标在地图上移动时触发 */
+  onMouseMove?(): void;
+  /** 鼠标在地图上单击左键 */
+  onMouseLClick?(): void;
+  /** 鼠标在地图上单击右键 */
+  onMouseRClick?(): void;
+
+  /** 销毁组件 */
+  destroy() {
+    this._map.bussinesses.delete(this.name);
+    if (this._map.isAlive) {
+      this._elements.forEach((e) => e?.destroy());
+      this.onDestroy?.();
+    }
+  }
+  onDestroy?(): void;
+}

package/src/basic/BasicElement.ts

@@ -0,0 +1,35 @@
+export interface BasicElementOption {
+  /** 是否显示 */
+  show: boolean
+  /** 鼠标样式 */
+  cursor: string
+  /** 元素是否静默（不触发鼠标事件） */
+  silent: boolean
+}
+
+export abstract class BasicElement<T extends BasicElementOption> {
+  option: T
+  constructor(option: T) {
+    this.option = option
+  }
+
+  update(option: Partial<T>) {
+    Object.assign(this.option, option)
+    this._onUpdate(option)
+  }
+
+  protected abstract _onUpdate(option: Partial<T>): void
+
+  /** 鼠标进入回调 */
+  onMouseIn?(): void
+  /** 鼠标离开回调 */
+  onMouseOut?(): void
+  /** 鼠标移动回调 */
+  onMouseMove?(): void
+  /** 鼠标点击回调 */
+  onClick?(): void
+  /** 鼠标右键点击回调 */
+  onRClick?(): void
+  /** 销毁元素 */
+  abstract destroy(): void
+}

package/src/basic/BasicMarker.ts

@@ -0,0 +1,45 @@
+import { BasicElement, type BasicElementOption } from './BasicElement'
+
+export interface BasicMarkerOption extends BasicElementOption {
+  /** 经度 */
+  lon: number
+  /** 纬度 */
+  lat: number
+  /** 海拔 */
+  alt: number
+  /** 图标 */
+  icon?: string
+  /** 宽度 */
+  width: number
+  /** 高度 */
+  height: number
+  /** 横向偏移 */
+  x: number
+  /** 纵向偏移 */
+  y: number
+  /** 旋转角度 */
+  rotation: number
+  img?: HTMLCanvasElement | HTMLImageElement
+}
+
+export abstract class BasicMarker extends BasicElement<BasicMarkerOption> {
+  constructor(option: Partial<BasicMarkerOption> = {}) {
+    super(Object.assign({
+      show: true,
+      cursor: 'pointer',
+      silent: false,
+      lon: 120,
+      lat: 30,
+      alt: 0,
+      width: 64,
+      height: 64,
+      x: 0,
+      y: -32,
+      rotation: 0,
+      icon: BasicMarker.defualtIcon,
+    }, option))
+  }
+
+  /** 默认图标 */
+  static defualtIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAA7NJREFUeF7lmwlu3DAMRZ2TtbmNbtHmFr5Nk5O1YCAHiobL5yK5wAwQZPEmPn5+0bLzcjz55+XJ4z+2AWit/TyOg75+DNDp9+vz3n/4oO/nef7ekZylAHrQv3rgkXgIysdKGEsAFATOwXpbAaIUwKLAZxilIMoAtNaoZknu3g/JfPQC9PgSEGkAjqxToG9XdOd5Xqb3FfBglPQ3BGYaQgpAH/AfI2UU9DsXsJXqAYgGIwUhDAAIPjWwEU4vL00VBPjVAsptzwD4K1zwU+qRjFsBGD4TAh4C0Foj2XPGFRqEFfikBrquVHbu67sBKFlwX9wT+LyvkoRXj/pcAP6X4AmG4kEuP/AC4KTvuiAjZ+r7H6ZERB0KBFgFMAAp++d5es5B9XtNaZyHuHt/YVxwUjyD51wfrntnpwift5cDp0zoHBCAbPYVw7KUDgUhlAKkggwAdHDRe4QLDlTPAmTzWBTAg/yR2jdkPy6A0CKJeEMEXovrD/IABHmh2ed8Q+wUFWCmnKNlYCpAGJQJIOobCgQzm1wZWOoJAbBOmnXmaD0L8FRwCICHKQYEMMvflPHletGyE44rB2AGEg1g6hLdAFcBqBqI6RsGAGqZVcVGwCMlUAXAVE62BLr3zONVwSMAZg+AAmmthXqHHgTXPJkKWqWAqAmG+3MO3nEcyDTIgSs3QUoSMhhp5UbMpLbCbNW/pBzrOKQEQi2m0gvQpm8rxcDqryl/of5N4zQBCCdGfUBbv7PuBK/taPAh30ABcPVsloFiaGjwZgaHmcNd/3QsCoDLJKSCBAT4/BmVQgCUeoZUYGSJU0PFeaHS8QBIqWDq8q6XH8aXJT6fG3oXSKN3ndd4YABVKoCLH9xRuHOEsg97gNGiwkYFxgTvFl2rGC/gUoCiApdhwREaO0Y7xhQAqeFAusOqwJVEwNIPeQDg5i73jgLJGl9aAXeWQvXzSbcHTNNZ6mlRRAFC3bulnyoBa1boL0iUv+goTHkpA04pwGhzS/0gs1yuKS0NYIcfVNd9iQnOVIXaTMnTUFi47lcBcK8AWSaovABREry7FQYGLD0JDg14laqWKABoklwQql6CspJWYoKMH6SUsCv48hKYmqTQu4S730FcooChHFwQVk53UiksBaD0CLTpmyfcEfzSEgDa5S8IdwW/BUBXgfZ8QPqHCdesYbn9bSUAKmEe35bgtynACWFb8NsBAOWwNfhbACgQtgd/GwCmT7gl+NsBXGrwPg2KOj533PJGqHKwK8719AD+Aby+uV/6QmnsAAAAAElFTkSuQmCC'
+}

package/src/basic/MapCombine.ts

@@ -6,6 +6,8 @@ import { Polygon, PolygonOption } from "./Polygon";
 import { Polyline, PolylineOption } from "./Polyline";
 import { ReactPoint, ReactPointOption, drawReactPoint } from "./ReactPoint";
 import { Tile3D, Tile3DOption } from "./Tile3D";
+import { type BasicBusiness, type BasicBusinessOption } from "./BasicBusiness";
+
 export abstract class MapCombine {
   /* 用于挂载html元素的根节点 */
   readonly htmllayer = document.createElement("div");
@@ -24,6 +26,10 @@ export abstract class MapCombine {
   abstract get zoom(): number
   abstract set zoom(val)
 
+  bussinesses = new Map<string, BasicBusiness<BasicBusinessOption>>();
+
+  /** 地图是否存在 */
+  isAlive = true;
   constructor() {
     const { htmllayer } = this
     htmllayer.style.zIndex = "1000";
@@ -33,7 +39,10 @@ export abstract class MapCombine {
     htmllayer.style.left = "0";
     htmllayer.style.top = "0";
     this.menu = new ContextMenu(this);
-    (window as any).map = this
+    (window as any).map = this;
+    setTimeout(() => {
+      this.bussinesses.forEach((e) => e.show && e.onMapLoaded?.());
+    }, 100);
   }
 
   createReactPoint<K>(option?: Partial<ReactPointOption<K>>): ReactPoint<K> {
@@ -61,6 +70,7 @@ export abstract class MapCombine {
   abstract geographyTcanvas(p: number[]): number[]
 
   destroy() {
+    this.isAlive = false;
     this.htmllayer.remove()
     this.event.trigger('destroy')
   }

package/src/basic/MapElement.ts

@@ -1,32 +1,30 @@
-import { MapCombine } from "./MapCombine"
+import { MapCombine } from "./MapCombine";
 
 export interface MapElementOption {
-  name: string
+  name: string;
 }
 
-export abstract class MapElement<
-  T extends MapElementOption = MapElementOption
->{
-  abstract type: string
-  readonly map: MapCombine
-  protected readonly _option: T
+export abstract class MapElement<T extends MapElementOption = MapElementOption> {
+  abstract type: string;
+  readonly map: MapCombine;
+  readonly _option: T;
   get name() {
-    return this._option.name
+    return this._option.name;
   }
 
   constructor(map: MapCombine, option: T) {
-    this.map = map
-    this._option = option
+    this.map = map;
+    this._option = option;
     if (map.elements.has(option.name)) {
-      throw new Error(`已存在同名元素 ${option.name}`)
+      throw new Error(`已存在同名元素 ${option.name}`);
     }
-    map.elements.set(option.name, this)
+    map.elements.set(option.name, this);
   }
 
   destroy() {
-    this.map.elements.delete(this.name)
-    this._onDestroy()
+    this.map.elements.delete(this.name);
+    this._onDestroy();
   }
 
-  protected abstract _onDestroy(): void
-}
+  protected abstract _onDestroy(): void;
+}

package/src/basic/ReactPopup.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import ReactDOM from "react-dom";
+import { MapCombine } from "./MapCombine";
 
 
 export interface ReactPopupOption {
@@ -7,16 +8,22 @@ export interface ReactPopupOption {
   element: ReactElement;
   /** 层高 */
   zIndex?: number;
+  show?: boolean;
+  name?: string
 }
 
 export class ReactPopup {
   private dom: HTMLDivElement;
   option: ReactPopupOption;
   node: HTMLDivElement;
+  map: MapCombine;
   constructor(map, option: ReactPopupOption = {
     element: <></>,
-    zIndex: 10
+    zIndex: 10,
+    show: true,
+    name: "bubble"
   }) {
+    this.map = map;
     this.dom = document.createElement("div");
     this.option = option;
     const coordinate = map.geographyTcanvas(map.event.geography)
@@ -27,6 +34,22 @@ export class ReactPopup {
     ReactDOM.render(option.element ?? <></>, this.dom);
   }
 
+  get show(): boolean {
+    return this.option.show;
+  }
+
+  set show(val: boolean) {
+    if (val !== this.show) {
+      this.option.show = val;
+      this.dom.style.display = val ? "" : "none";
+    }
+  }
+  showAt(lon, lat) {
+    const coordinate = this.map.geographyTcanvas([lon, lat, 0])
+    this.dom.style.position = "absolute";
+    this.dom.style.top = coordinate[1] + "px";
+    this.dom.style.left = coordinate[0] + "px";
+  }
   destroy() {
     this.dom.remove();
     ReactDOM.unmountComponentAtNode(this.dom);

package/src/basic/Tile3D.ts

@@ -1,99 +1,134 @@
-import Eventful from "zrender/lib/core/Eventful"
+import Eventful from "zrender/lib/core/Eventful";
 
-import { MapElement, MapElementOption } from "./MapElement"
-import { MapCombine } from "./MapCombine"
+import { MapElement, MapElementOption } from "./MapElement";
+import { MapCombine } from "./MapCombine";
 
 export interface Tile3DOption extends MapElementOption {
-  show: boolean
-  src: string
-  coordinates?: number[]
-  quality: number
+  show: boolean;
+  src: string;
+  /** 中心点坐标 [lng, lat, height] */
+  coordinates?: number[];
+  /** 移动 [x, y, z] */
+  translates?: number[];
+  /** 旋转 [x, y, z] */
+  rotates?: number[];
+  /** 缩放 [x, y, z] */
+  scales?: number[];
+  quality: number;
 }
 
-export class Tile3D extends MapElement<Tile3DOption>{
-  type = 'Tile3D'
+export class Tile3D extends MapElement<Tile3DOption> {
+  type = "Tile3D";
+  tileset;
   event = new Eventful<{
-    'ready': () => void
-    'update': (keys: Set<string>) => void
-    'destroy': () => void
-    'focus': () => void
-  }>()
+    ready: () => void;
+    update: (keys: Set<string>) => void;
+    destroy: () => void;
+    focus: () => void;
+  }>();
 
   get show() {
-    return this._option.show
+    return this._option.show;
   }
 
   set show(val) {
     if (this._option.show != val) {
-      this._option.show = val
-      this._update('show')
+      this._option.show = val;
+      this._update("show");
     }
   }
 
   get src() {
-    return this._option.src
+    return this._option.src;
   }
 
   set src(val) {
     if (this._option.src != val) {
-      this._option.src = val
-      this._update('src')
+      this._option.src = val;
+      this._update("src");
     }
   }
 
   get coordinates() {
-    return this._option.coordinates
+    return this._option.coordinates;
   }
 
   set coordinates(val) {
     if (this._option.coordinates != val) {
-      this._option.coordinates = val
-      this._update('coordinates')
+      this._option.coordinates = val;
+      this._update("coordinates");
     }
   }
 
   get quality() {
-    return this._option.quality
+    return this._option.quality;
   }
 
   set quality(val) {
     if (this._option.quality != val) {
-      this._option.quality = val
-      this._update('quality')
+      this._option.quality = val;
+      this._update("quality");
     }
   }
 
-
-
   constructor(map: MapCombine, option: Partial<Tile3DOption> = {}) {
-    super(map, Object.assign({ ...Tile3D.option }, option))
+    super(map, Object.assign({ ...Tile3D.option }, option));
   }
 
   static option: Tile3DOption = {
-    name: '3D瓦片',
+    name: "3D瓦片",
     show: true,
-    src: '',
-    quality: 0.5
-  }
+    src: "",
+    quality: 0.5,
+  };
 
-  private _needUpdate?: Set<string>
+  private _needUpdate?: Set<string>;
   private _update(key: string) {
     if (this._needUpdate) {
-      this._needUpdate.add(key)
+      this._needUpdate.add(key);
     } else {
-      this._needUpdate = new Set([key])
+      this._needUpdate = new Set([key]);
       setTimeout(() => {
-        this.event.trigger('update', this._needUpdate)
-        this._needUpdate = undefined
+        this.event.trigger("update", this._needUpdate);
+        this._needUpdate = undefined;
       });
     }
   }
 
+  /** 基于本地的 ENU 坐标系的偏移，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param dx x轴偏移量。单位：米
+   * @param dy y轴偏移量。单位：米
+   * @param dz z轴偏移量。单位：米
+   * @param tileset Cesium3DTileset
+   */
+  translate(dx: number, dy: number, dz: number, tileset: any = this.tileset) {
+    console.info("TileD translate");
+  }
+  /** 基于本地的 ENU 坐标系的旋转，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * https://blog.csdn.net/weixin_70945905/article/details/142419968
+   * @param rx 绕X轴旋转的角度。单位：度
+   * @param ry 绕Y轴旋转的角度。单位：度
+   * @param rz 绕Z轴旋转的角度。单位：度
+   * @param tileset Cesium3DTileset
+   */
+  rotate(rx: number, ry: number, rz: number, tileset = this.tileset) {
+    console.info("TileD rotate");
+  }
+  /** 基于本地的 ENU 坐标系的缩放，也就是垂直于地表向上为 Z，东为 X，北为 Y
+   * @param sx x 轴缩放倍数
+   * @param sy y 轴缩放倍数
+   * @param sz z 轴缩放倍数
+   * @param tileset Cesium3DTileset
+   */
+  scale(sx: number, sy: number, sz: number, tileset = this.tileset) {
+    console.info("TileD scale");
+  }
+
   protected _onDestroy(): void {
-    this.event.trigger('destroy')
+    this.event.trigger("destroy");
   }
 
   focus() {
-    this.event.trigger('focus')
+    this.event.trigger("focus");
   }
-}
+}

package/src/cesium/CesiumEvent.ts

@@ -1,28 +1,22 @@
-import { CesiumMap } from "./CesiumMap"
+import { CesiumMap } from "./CesiumMap";
 
 export function bindEvent(map: CesiumMap) {
-  const { event, viewer, container } = map
+  const { event, viewer, container } = map;
   viewer.camera.percentageChanged = 0.0001;
   viewer.camera.changed.addEventListener(() => {
-    event.trigger('view-change')
+    event.trigger("view-change");
   });
   viewer.camera.moveEnd.addEventListener(() => {
-    event.trigger('view-moveEnd')
+    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
+    let _target: any = undefined;
     const res = viewer.scene.pick(e.endPosition);
-    const a = res
-      ? res.id
-        ? res.id
-        : res.primitive
-          ? res.primitive
-          : undefined
-      : undefined;
+    const a = res ? (res.id ? res.id : res.primitive ? res.primitive : undefined) : undefined;
 
     if (a && !a.silent) {
       _target = a;
@@ -38,49 +32,44 @@ export function bindEvent(map: CesiumMap) {
     } else {
       map.cursor = "";
     }
-    event.trigger('pointer-move')
+    event.trigger("pointer-move");
   }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
   handler.setInputAction(() => {
     if (target) {
       target.onPointerDown?.();
     }
-    event.trigger('pointer-down')
+    event.trigger("pointer-down");
   }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
 
-
-  container.addEventListener('pointerup', () => {
+  container.addEventListener("pointerup", () => {
     if (target) {
       target.onPointerUp?.();
     }
-    event.trigger('pointer-up')
-  })
-
+    event.trigger("pointer-up");
+  });
 
   handler.setInputAction((e) => {
-    console.log('e', e);
-    
     if (target) {
       target.onLClick?.();
     }
-    event.trigger('left-click')
+    event.trigger("left-click");
   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
   handler.setInputAction(() => {
     if (target) {
       target.onRClick?.();
     }
-    event.trigger('right-click')
+    event.trigger("right-click");
   }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
 
   handler.setInputAction(() => {
     if (target) {
       target.onDbClick?.();
     }
-    event.trigger('double-click')
+    event.trigger("double-click");
   }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
 
-  event.on('destroy', () => {
-    viewer.destroy()
-  })
-
-}
+  event.on("destroy", () => {
+    viewer.destroy();
+  });
+}