GCSGUI/src/components/map/SceneViewer.vue

<template>
  <div id="cesium-viewer" ref="viewerDivRef">

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// import * as Cesium from 'cesium'
import { Viewer, Ion } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import {
  TDTLayerType,
  TDTProjectionType,
  getTDTProvider,
  getTDTTerrainProvider,
} from '@/utils/map/TDTProvider'
import { initViewer, perfViewer, showNavigator } from '@/utils/map/sceneViewer'
import { flyToChina } from '@/utils/map/camera'
import BottomBar from "@/components/map/BottomBar.vue";
const viewerDivRef = ref<HTMLDivElement>()
let viewer: Viewer

window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
// window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署

Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E'
// 修改相机的默认矩形范围
// window.Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
//   window.Cesium.Rectangle.fromDegrees(
//     75.0, // 西经
//     0.0, // 南纬
//     140.0, // 东经
//     60.0, // 北纬
//   )

onMounted(() => {
  //初始化
  viewer = initViewer(viewerDivRef.value as HTMLElement)
  // 性能优化
  perfViewer(viewer)
  // 定位到中国
  flyToChina(viewer)
  // 显示罗盘和比例尺
  showNavigator(viewer)

  //添加天地图影像
  viewer.imageryLayers.addImageryProvider(
    getTDTProvider(TDTLayerType.Img, TDTProjectionType.WebMercator),
  )
  //添加天地图影像注记
  viewer.imageryLayers.addImageryProvider(
    getTDTProvider(TDTLayerType.Cia, TDTProjectionType.WebMercator),
  )
  // 添加三维地形服务
  viewer.terrainProvider = getTDTTerrainProvider()

  // 挂载在window，供全局组件共享
  window.Viewer = viewer
})

</script>

<style scoped>
#cesium-viewer {
  width: 100%;
  height: 100%;
}
</style>