@hzab/map-combine 0.4.2-alpha.2 → 0.4.2-alpha.3

package/src/cesium/CesiumMap.ts

@@ -1,347 +1,358 @@
-import { AMapImageryProvider } from "./cesium-tile-covert";
-
-import { MapCombine } from "../basic/MapCombine";
-import { PointOption, Point } from "../basic/Point";
-import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
-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;
-/**
- * flyToViewer 最小判断半径（米）
- */
-const MIN_RADIUS = 500;
-/**
- * flyToViewer 最大缩放层级
- */
-const MAX_ZOOM = 18;
-
-export class CesiumMap extends MapCombine {
-  viewer: any;
-  markers: any;
-  option;
-
-  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._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;
-    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];
-  }
-
-  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;
-  }
-
-  createPointAggregation(option?: PointAggregationOption): PointAggregation {
-    const e = new PointAggregation(this, option);
-    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];
-  }
-
-  /**
-   * 所有点位移动至视口，调整位置及层级
-   * @param points
-   * @param opt
-   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
-   * @param {Array<number> = [0,0,0,0]} opt.minRadius flyToViewer 最小范围（米）
-   * @param {Array<number> = [0,0,0,0]} opt.maxZoom flyToViewer 最大缩放层级
-   */
-  flyToViewer(
-    points,
-    opt = {
-      avoid: [0, 0, 0, 0],
-
-      /**
-       * flyToViewer 最小判断半径（米）
-       */
-      minRadius: MIN_RADIUS,
-      /**
-       * flyToViewer 最大缩放层级
-       */
-      maxZoom: MAX_ZOOM,
-    },
-  ) {
-    if (points?.length === 0) {
-      return this.flyTo(points[0], opt);
-    }
-    // 创建矩形
-    const rectangle = Cesium.Rectangle.fromDegrees(
-      ...this.getBounds(points, { canvas: this.viewer.scene.canvas, ...opt }),
-    );
-
-    // 将经纬度转换为笛卡尔坐标
-    const positions = points.map((coord) => {
-      return Cesium.Cartesian3.fromDegrees(coord[0], coord[1]);
-    });
-
-    // 计算所有点位的包围球
-    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
-
-    // 计算包围球半径
-    const radius = boundingSphere.radius;
-
-    let destination = rectangle;
-    // 点位距离小于指定范围使用固定高度
-    if (radius < MIN_RADIUS || (opt?.minRadius && radius < opt.minRadius)) {
-      const center = Cesium.Rectangle.center(rectangle);
-      destination = Cesium.Cartesian3.fromRadians(
-        center.longitude,
-        center.latitude,
-        this.zoomTdistance(opt?.maxZoom ?? MAX_ZOOM),
-      );
-    }
-
-    // 设置相机视角
-    this.viewer.camera.flyTo({
-      destination,
-      ...opt,
-    });
-  }
-
-  /**
-   * 移动点位到中心点
-   * @param point
-   */
-  flyTo(point, opt = {}) {
-    // 设置相机视角
-    this.viewer.camera.flyTo({
-      destination: point,
-      ...opt,
-    });
-  }
-}
-
-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();
-}
+import { AMapImageryProvider } from "./cesium-tile-covert";
+
+import { MapCombine } from "../basic/MapCombine";
+import { PointOption, Point } from "../basic/Point";
+import { PointAggregationOption, PointAggregation } from "../basic/PointAggregation";
+import { PolygonOption, Polygon } from "../basic/Polygon";
+import { PolylineOption, Polyline } from "../basic/Polyline";
+import { Tile3DOption, Tile3D } from "../basic/Tile3D";
+import { type BasicModelOption, type BasicModel } from "../basic/BasicModel";
+
+import { bindEvent } from "./CesiumEvent";
+import { drawPoint } from "./CesiumPoint";
+import { drawPolygon } from "./CesiumPolygon";
+import { drawPolyline } from "./CesiumPolyline";
+import { drawTile3D } from "./CesiumTile3D";
+import { CesiumModel } from "./CesiumModel";
+
+const $m = 20037508.34278924;
+/**
+ * flyToViewer 最小判断半径（米）
+ */
+const MIN_RADIUS = 500;
+/**
+ * flyToViewer 最大缩放层级
+ */
+const MAX_ZOOM = 18;
+
+export class CesiumMap extends MapCombine {
+  viewer: any;
+  markers: any;
+  option;
+
+  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._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;
+    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];
+  }
+
+  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;
+  }
+
+  createPointAggregation(option?: PointAggregationOption): PointAggregation {
+    const e = new PointAggregation(this, option);
+    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;
+  }
+
+  createModel(option?: Partial<BasicModelOption> | undefined): BasicModel {
+    return new CesiumModel(this, option);
+  }
+
+  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];
+  }
+
+  /**
+   * 所有点位移动至视口，调整位置及层级
+   * @param points
+   * @param opt
+   * @param {Array<number> = [0,0,0,0]} opt.avoid 距离边框的内边距，顺序：上、下、左、右
+   * @param {Array<number> = [0,0,0,0]} opt.minRadius flyToViewer 最小范围（米）
+   * @param {Array<number> = [0,0,0,0]} opt.maxZoom flyToViewer 最大缩放层级
+   */
+  flyToViewer(
+    points,
+    opt = {
+      avoid: [0, 0, 0, 0],
+
+      /**
+       * flyToViewer 最小判断半径（米）
+       */
+      minRadius: MIN_RADIUS,
+      /**
+       * flyToViewer 最大缩放层级
+       */
+      maxZoom: MAX_ZOOM,
+    },
+  ) {
+    if (points?.length === 0) {
+      return this.flyTo(points[0], opt);
+    }
+    // 创建矩形
+    const rectangle = Cesium.Rectangle.fromDegrees(
+      ...this.getBounds(points, { canvas: this.viewer.scene.canvas, ...opt }),
+    );
+
+    // 将经纬度转换为笛卡尔坐标
+    const positions = points.map((coord) => {
+      return Cesium.Cartesian3.fromDegrees(coord[0], coord[1]);
+    });
+
+    // 计算所有点位的包围球
+    const boundingSphere = Cesium.BoundingSphere.fromPoints(positions);
+
+    // 计算包围球半径
+    const radius = boundingSphere.radius;
+
+    let destination = rectangle;
+    // 点位距离小于指定范围使用固定高度
+    if (radius < MIN_RADIUS || (opt?.minRadius && radius < opt.minRadius)) {
+      const center = Cesium.Rectangle.center(rectangle);
+      destination = Cesium.Cartesian3.fromRadians(
+        center.longitude,
+        center.latitude,
+        this.zoomTdistance(opt?.maxZoom ?? MAX_ZOOM),
+      );
+    }
+
+    // 设置相机视角
+    this.viewer.camera.flyTo({
+      destination,
+      ...opt,
+    });
+  }
+
+  /**
+   * 移动点位到中心点
+   * @param point
+   */
+  flyTo(point, opt = {}) {
+    const height = this.zoomTdistance(this.zoom);
+    // 取消任何正在进行的飞行，防止排队
+    if (this.viewer.camera.cancelFlight) {
+      this.viewer.camera.cancelFlight();
+    }
+    // 设置相机视角
+    this.viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(point[0], point[1], height),
+      ...opt,
+    });
+  }
+}
+
+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();
+}