FuJianModelPlatform/RuoYi-Vue3/src/supermap-cesium-module/components/viewer/viewer.js

import { addScene, addS3mLayers } from "../../js/common/layerManagement.js"
import { actions, storeDate } from '../../js/store/store.js'   //局部状态管理
import EventManager from '../../js/common/eventManager/EventManager.js'   //事件管理
import { onBeforeUnmount } from 'vue'
import createTooltip from '../../js/tool/tooltip2.js'
import resource from '../../js/local/lang.js'  //语言资源

// Cesium 已经在 index.html 中通过 script 标签全局引入，无需再次导入
//初始化地球 
function initViewer(props, callback) {
  //初始化viewer
  if (window.viewer) {
    // window.viewer.destroy();
    window.viewer = null;
    // return;
  }
  let viewer;
  let isPCBroswer = (window.isPCBroswer = Cesium.FeatureDetection.isPCBroswer());
  if (isPCBroswer) {
    viewer = new Cesium.Viewer("cesiumContainer", {
      selectionIndicator: false,
      timeline: true,
      baseLayerPicker: false,
      //shadows: true,
      infoBox: false,
      // geocoder: true,  //查询
      // skyBox: false, // 关闭天空盒会一同关闭太阳，场景会变暗
      navigation: false,
      // contextOptions: {
      //   requestWebgl2: true
      // },
      scale: true // 添加比例尺
    });
    // 太阳光默认打开
    // viewer.scene.globe.enableLighting = true;
    //隐藏时间线控件
    try {
      const timelineContainer = document.getElementsByClassName("cesium-viewer-timelineContainer")[0];
      if (timelineContainer) {
        timelineContainer.style.visibility = "hidden";
      }
    } catch (error) {
      console.error('隐藏时间线控件失败:', error);
    }
  } else {
    // 手机端
    viewer = new Cesium.Viewer("cesiumContainer", {
      selectionIndicator: false,
      infoBox: false,
      skyBox: false,
      navigation: false,
      contextOptions: {
        requestWebgl2: true
      }
    });
    let scene = viewer.scene;
    if (Cesium.defined(scene.sun)) {
      scene.globe.enableLighting = false;
    }
    if (Cesium.defined(scene.moon)) {
      scene.moon.show = false;
    }
    document.documentElement.style.height = window.innerHeight + "px";
    document.addEventListener(
      "touchmove",
      function (e) {
        e.preventDefault();
      },
      false
    );
  }

  viewer.scene.debugShowFramesPerSecond = true; //帧率
  viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 没有影像图层时地球的底色
  // viewer.scene.globe.depthTestAgainstTerrain = false; //地形深度
  window.viewer = viewer;
  window.scene = viewer.scene;
  scene.moon.show = false;
  viewer.eventManager = new EventManager(viewer);  //添加事件管理派发
  let widget = viewer.cesiumWidget;
  actions.setIsViewer(true);  //初始化viewer标志 
  if (viewer.geocoder) {
    // 请开发者自行到supermap online官网（http://www.supermapol.com/）申请key
    viewer.geocoder.viewModel.geoKey = "fvV2osxwuZWlY0wJb8FEb2i5";
    // document.querySelector(".cesium-geocoder-input").placeholder =
    //   Resource.searchPlaceHolder;  //语言配置，后面维护
  }
  if (!window.tooltip) {
    window.tooltip = createTooltip(viewer._element);
  }
  
  // 设置默认视角
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(119.290381, 26.10377, 50000), // 指定位置，高度50公里
    orientation: {
      heading: Cesium.Math.toRadians(0), // 方向角
      pitch: Cesium.Math.toRadians(0), // 俯仰角
      roll: 0 // 翻滚角
    }
  });

  // 添加天地图影像底图和注记
  const tiandituKey = '3fb1e9fda20ee995dc815c8243553ce8';
  
  // 添加天地图影像底图（使用HTTPS）
  const imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: `https://t0.tianditu.gov.cn/img_c/wmts?service=WMTS&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tiandituKey}`,
    layer: 'img',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 15,
    show: true
  });
  
  // 添加天地图影像注记（使用HTTPS）
  const labelProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: `https://t0.tianditu.gov.cn/cia_c/wmts?service=WMTS&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${tiandituKey}`,
    layer: 'cia',
    style: 'default',
    format: 'image/png',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
    maximumLevel: 15,
    show: true
  });
  
  // 添加图层到viewer
  viewer.imageryLayers.addImageryProvider(imageryProvider);
  viewer.imageryLayers.addImageryProvider(labelProvider);



  function openingAnimation() {
    const lon = 118.247854;
    const lat = 26.107280;
    const height = 300000;
    const pitch = Cesium.Math.toRadians(-50);
    
    // 计算相机位置，使得在俯仰角为-50度时，指定位置在视图中心
    // 相机应该在指定位置的南方（假设heading为0）
    // 水平距离 = 高度 * tan(俯仰角)
    const horizontalDistance = height * Math.tan(-pitch);
    // 纬度偏移 = 水平距离 / 地球半径 * 180 / π
    const latOffset = horizontalDistance / 6371000 * 180 / Math.PI;
    const cameraLat = lat - latOffset;
    
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(lon, cameraLat, height),
      orientation: {
        heading: 0.0,
        pitch: pitch,
        roll: 0.0
      },
      duration: 0 // 立即完成，不使用动画
    });
  }

  // 添加图层
  try {
    if (props && props.openingAnimation) {
      openingAnimation();
    }
    if (props && props.afterInitviewer) {
      props.afterInitviewer();
    }
    if (props && props.sceneUrl) {
      addScene(props.sceneUrl, {}, (layer) => {
        
      });
    }
    if (props && props.s3mScps) {
      addS3mLayers(props.s3mScps);
    }
  } catch (e) {
    if (widget && widget._showRenderLoopErrors) {
      let title = resource.showRenderLoopErrors;
      widget.showErrorPanel(title, undefined, e);
    }
  };

  // 销毁
  onBeforeUnmount(() => {
    if (viewer) {
      viewer.destroy();
      window.viewer = undefined;
      window.scene = undefined;
    }
  });
  
  // 返回viewer实例
  return viewer;
};

export default initViewer;