@hzab/map-combine 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -1,2 +1,6 @@
+# @hzab/map-combine@0.1.0
+
+feat: BIM 模型加载；旋转、平移、缩放
+
 # @hzab/map-combine@0.0.1
 组件初始化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/map-combine",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "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/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/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();
+  });
+}

package/src/cesium/CesiumMap.ts

@@ -1,9 +1,11 @@
+import { AMapImageryProvider } from "./cesium-tile-covert";
 
 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";
@@ -13,19 +15,17 @@ import { drawTile3D } from "./CesiumTile3D";
 const $m = 20037508.34278924;
 
 export class CesiumMap extends MapCombine {
-
   viewer: any;
   markers: any;
+  option;
 
   container: HTMLDivElement;
 
-
-
   get cursor(): string {
-    return (this.container).style.cursor
+    return this.container.style.cursor;
   }
   set cursor(val: string) {
-    (this.container).style.cursor = val
+    this.container.style.cursor = val;
   }
 
   get moveable(): boolean {
@@ -40,13 +40,10 @@ export class CesiumMap extends MapCombine {
     const height = container.offsetHeight;
     const position = viewer.scene.camera.pickEllipsoid(
       new Cesium.Cartesian2(width / 2, height / 2),
-      viewer.scene.globe.ellipsoid
+      viewer.scene.globe.ellipsoid,
     );
     const cartographic = Cesium.Cartographic.fromCartesian(position);
-    return [
-      Cesium.Math.toDegrees(cartographic.longitude),
-      Cesium.Math.toDegrees(cartographic.latitude),
-    ]
+    return [Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)];
   }
   set center(val: number[]) {
     const { viewer, container } = this;
@@ -54,22 +51,25 @@ export class CesiumMap extends MapCombine {
     const height = container.offsetHeight;
     const position = viewer.scene.camera.pickEllipsoid(
       new Cesium.Cartesian2(width / 2, height / 2),
-      viewer.scene.globe.ellipsoid
+      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)
+    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)
+    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)
+    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;
@@ -82,57 +82,145 @@ export class CesiumMap extends MapCombine {
     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)
+  constructor(viewer?: any) {
+    super();
+    this._initParamsEvent(viewer);
+  }
+
+  init(opt) {
+    this.option = opt;
+    const { container, center = [120.2288892, 30.2349677, 0], zoom = 13, url } = opt || {};
+    const viewer = new Cesium.Viewer(container, {
+      vrButton: false,
+      // 检索
+      geocoder: false,
+      // home
+      homeButton: false,
+      // 切换3d地图
+      sceneModePicker: false,
+      // 底图切换按钮
+      baseLayerPicker: false,
+      // 问号
+      navigationHelpButton: false,
+      // 动画控制
+      animation: false,
+      // 版权信息
+      creditContainer: document.createElement("div"),
+      // 时间轴
+      timeline: false,
+      // 全屏按钮
+      fullscreenButton: false,
+      selectionIndicator: false,
+      // 打开动画
+      shouldAnimate: false,
+      infoBox: false,
+      // 只进行3d渲染，没有2d，2.5d，提高性能
+      scene3DOnly: true,
+      // 初始设置一个纯色瓦片，避免报错影响后续瓦片加载
+      imageryProvider: new Cesium.SingleTileImageryProvider({
+        url: createColorCanvas("#333"),
+        rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
+      }),
+    });
+
+    // viewer.cesiumWidget.creditContainer.remove();
+
+    // viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+    this._initParamsEvent(viewer);
+
+    // 处理瓦片
+    this._createLayer();
+
+    const map = this;
+    const d = Cesium.Cartesian3.fromDegrees(...center);
+    map.setView([d.x, d.y, d.z, 6.283185307179586, -1.5691285980481942, 0]);
+    map.center = center;
+    map.zoom = zoom;
+
+    return map;
+  }
+
+  private _initParamsEvent(viewer) {
+    if (!viewer) {
+      return;
+    }
+    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);
+  }
+
+  private _createLayer() {
+    const { url, subdomains, proj, minZoomLevel, maxZoomLevel } = this.option;
+    let layer: any;
+    console.log("url", url);
+    let options = {
+      ...this.option,
+    };
+
+    switch (proj) {
+      case "GCJ02->WGS84":
+        options = {
+          ...options,
+          crs: "WGS84", // 使用84坐标系，默认为：GCJ02
+        };
+        layer = this.viewer.imageryLayers.addImageryProvider(new AMapImageryProvider(options));
 
+        break;
+      default:
+        options = {
+          ...options,
+          tilingScheme: new Cesium.WebMercatorTilingScheme(),
+        };
+        layer = this.viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider(options));
+        break;
+    }
+
+    this.viewer.imageryLayers.add(layer);
+
+    return layer;
   }
 
   getView() {
-    const { camera } = this.viewer
-    return [
-      camera.position.x, camera.position.y, camera.position.z,
-      camera.heading, camera.pitch, camera.roll,
-    ]
+    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
+    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])
+      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
+    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
+    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
+    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
+    const e = new Tile3D(this, option);
+    drawTile3D(this, e);
+    return e;
   }
 
   canvasTgeography(p: number[]): number[] {
@@ -159,9 +247,16 @@ export class CesiumMap extends MapCombine {
     }
     return [res.x, res.y];
   }
-
-
-
-
 }
 
+function createColorCanvas(color) {
+  var width = 1,
+    height = 1;
+  var canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  var ctx = canvas.getContext("2d");
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, width, height);
+  return canvas.toDataURL();
+}