zcloud-gbs-bi-react/src/pages/Container/Map/js/initMap.js

import { createObliquePhotography } from "~/pages/Container/Map/js/mapUtils";
import MapMethods from "./mapMethods";
import PointClickEvent from "./pointClickEvent";

const Cesium = window.Cesium;

export default class InitMap {
  #pointClickEvent;
  #viewer;
  #mapMethods;

  // 初始化地图
  initMap = () => {
    const tianDiTuKey = "06494bcf2d4b66df7f3c586cc65af0cb";
    const subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
    this.#viewer = new Cesium.Viewer("cesiumContainer", {
      // terrainProvider: Cesium.createWorldTerrain()
      animation: false, // 动画
      homeButton: true, // home键
      geocoder: true, // 地址编码
      baseLayerPicker: false, // 图层选择控件
      timeline: false, // 时间轴
      fullscreenButton: true, // 全屏显示
      infoBox: true, // 点击要素之后浮窗
      sceneModePicker: true, // 投影方式  三维/二维
      navigationInstructionsInitiallyVisible: false, // 导航指令
      navigationHelpButton: false, // 帮助信息
      selectionIndicator: false, // 选择
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        // 影像底图
        url:
          `https://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${
            tianDiTuKey}`,
        subdomains,
        layer: "tdtImgLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible", // 使用谷歌的瓦片切片方式
        show: true,
      }),
    });
    this.#viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
    this.#viewer.imageryLayers.addImageryProvider(
      new Cesium.WebMapTileServiceImageryProvider({
        // 影像注记
        url:
          `https://t{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${
            tianDiTuKey}`,
        subdomains,
        layer: "tdtCiaLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        show: true,
      }),
    );
    this.#initObliquePhotography();
    this.#registerClickEvent();
    this.#mapMethods = new MapMethods(this.#viewer);
    this.#pointClickEvent = new PointClickEvent(this.#viewer, this.#mapMethods);
    return { mapMethods: this.#mapMethods, viewer: this.#viewer };
  };

  // 倾斜摄影
  #initObliquePhotography = () => {
    this.#viewer.scene.globe.depthTestAgainstTerrain = true;
    Cesium.ExperimentalFeatures.enableModelExperimental = true;
    createObliquePhotography(
      "http://192.168.192.215:8021/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E4%B8%9C/merge_tile.json",
      this.#viewer,
    );
    createObliquePhotography(
      "http://192.168.192.215:8021/ware/upload/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/%E6%9B%B9%E5%A6%83%E7%94%B8%E6%B8%AF%E8%A5%BF/merge_tile.json",
      this.#viewer,
    );
    createObliquePhotography(
      "http://192.168.192.215:8021/ware/upload/qhdxys/merge_tile.json",
      this.#viewer,
    );
    createObliquePhotography(
      "http://192.168.192.215:8021/ware/upload/qhdgysh/merge_tile.json",
      this.#viewer,
    );
    createObliquePhotography(
      "http://192.168.192.215:8021/ware/upload/%E6%B2%A7%E5%B7%9E%E6%B8%AF%E8%A5%BF/%E6%B2%A7%E5%B7%9E%E6%B8%AF%E8%A5%BF/merge_tile.json",
      this.#viewer,
    );
    createObliquePhotography(
      "http://192.168.192.215:8021/ware/upload/%E6%B2%A7%E5%B7%9E%E6%B8%AF%E4%B8%9C/%E6%B2%A7%E5%B7%9E%E6%B8%AF%E4%B8%9C/merge_tile.json",
      this.#viewer,
    );
  };

  // 注册点击事件
  #registerClickEvent = () => {
    this.#viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    this.#viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(this.#viewer.scene.canvas);
    screenSpaceEventHandler.setInputAction((movement) => {
      const pick = this.#viewer.scene.pick(movement.position);
      if (Cesium.defined(pick) && pick.id?.id) {
        this.#pointClickEvent.pointClickEvent(pick.id);
      }
      else {
        this.#pointClickEvent.closePopup();
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  };
}