fix: cesium类型修改，Viewer挂载在window上供全局组件使用

src/components/map/SceneViewer.vue

@@ -4,7 +4,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import * as Cesium from 'cesium'
+// import * as Cesium from 'cesium'
+import { Viewer } from 'cesium'
 import 'cesium/Build/Cesium/Widgets/widgets.css'
 import {
   TDTLayerType,
@@ -15,19 +16,20 @@ import {
 import { initViewer, perfViewer } from '@/utils/map/sceneViewer'
 import { flyToChina } from '@/utils/map/camera'
 const viewerDivRef = ref<HTMLDivElement>()
-let viewer: Cesium.Viewer
+let viewer: Viewer
 window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium/'
 // window.CESIUM_BASE_URL = 'libs/cesium/' //打包部署
 
-Cesium.Ion.defaultAccessToken =
+window.Cesium.Ion.defaultAccessToken =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3YjU4MjJlMS0wMWE4LTRhOWQtYjQ1OC04MTgzMzFhMzQ5ZjAiLCJpZCI6MTE1ODUxLCJpYXQiOjE2NjkyMDM1MzN9.8ajEuv3VKYg8wvFiQlUWWY6Ng6JfY4PuVgRyStL1B-E'
 // 修改相机的默认矩形范围
-Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
-  75.0, // 西经
-  0.0, // 南纬
-  140.0, // 东经
-  60.0, // 北纬
-)
+// window.Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
+//   window.Cesium.Rectangle.fromDegrees(
+//     75.0, // 西经
+//     0.0, // 南纬
+//     140.0, // 东经
+//     60.0, // 北纬
+//   )
 
 onMounted(() => {
   //初始化
@@ -47,6 +49,9 @@ onMounted(() => {
   )
   // 添加三维地形服务
   viewer.terrainProvider = getTDTTerrainProvider()
+
+  // 挂载在window，供全局组件共享
+  window.Viewer = viewer
 })
 </script>
 

src/global.d.ts

@@ -1,13 +1,14 @@
-import * as C from 'cesium'
+// import * as Cesium from 'cesium'
+import type { Cesium, Viewer } from 'cesium'
 
 // 扩展全局变量
 declare global {
   // 定义全局Cesium类型
-  const Cesium: typeof C
+  const Cesium: Cesium
   // 允许扩展 Window
   interface Window {
-    Cesium: typeof C
+    Cesium: Cesium
     CESIUM_BASE_URL: string
-    Viewer: C.Viewer
+    Viewer: Viewer
   }
 }

src/utils/map/TDTProvider.ts

@@ -1,5 +1,9 @@
 // 天地图影像服务
-import { WebMapTileServiceImageryProvider } from 'cesium'
+import {
+  WebMapTileServiceImageryProvider,
+  GeographicTilingScheme,
+  WebMercatorTilingScheme,
+} from 'cesium'
 //地图服务枚举类型：_c为墨卡托投影，_w为经纬度投影
 enum TDTLayerType {
   Vec = 'vec', //矢量底图
@@ -37,8 +41,8 @@ export function getTDTProvider(
   // 切片方式
   const tilingScheme =
     projectionType == TDTProjectionType.WGS84
-      ? new Cesium.GeographicTilingScheme()
-      : new Cesium.WebMercatorTilingScheme()
+      ? new GeographicTilingScheme()
+      : new WebMercatorTilingScheme()
   const tileMatrixLabels =
     projectionType == TDTProjectionType.WGS84
       ? new Array(19).fill(1).map((v, i) => `${i}`)
@@ -74,7 +78,7 @@ export function getTDTTerrainProvider() {
       TDT_tk
     terrainUrls.push(url)
   }
-  // @ts-ignore
+
   const provider = new Cesium.GeoTerrainProvider({
     urls: terrainUrls,
   })

src/utils/map/camera.ts

@@ -6,7 +6,7 @@ import { Viewer, Cartesian3, Math } from 'cesium'
  */
 function flyToChina(viewer: Viewer) {
   viewer.camera.flyTo({
-    destination: Cartesian3.fromDegrees(103.84, 31.15, 12550000),
+    destination: Cartesian3.fromDegrees(103.84, 31.15, 10350000),
     orientation: {
       heading: Math.toRadians(348.4202942851978),
       pitch: Math.toRadians(-89.74026687972041),

src/utils/map/sceneViewer.ts

@@ -1,10 +1,17 @@
 // Viewer初始化
-import { Viewer, TileMapServiceImageryProvider } from 'cesium'
+import {
+  Viewer,
+  TileMapServiceImageryProvider,
+  ImageryLayer,
+  RequestScheduler,
+  SceneMode,
+  buildModuleUrl,
+} from 'cesium'
 
 //离线地球底图
 const earth_native = TileMapServiceImageryProvider.fromUrl(
   // 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
-  Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
+  buildModuleUrl('Assets/Textures/NaturalEarthII'),
 )
 /**
  * Viewer初始化
@@ -20,7 +27,7 @@ function initViewer(container: string | Element): Viewer {
     timeline: false, //是否显示时间线控件
     animation: false, //是否显示动画控件
     sceneModePicker: true, //是否显示投影方式控件
-    sceneMode: Cesium.SceneMode.SCENE3D, //设置场景模式，3D球体
+    sceneMode: SceneMode.SCENE3D, //设置场景模式，3D球体
     // terrain: Cesium.Terrain.fromWorldTerrain(),
     baseLayerPicker: false, //是否显示图层选择控件
     requestRenderMode: true, //启用请求渲染模式
@@ -28,8 +35,9 @@ function initViewer(container: string | Element): Viewer {
     fullscreenButton: false, //右下角 全屏控件
     orderIndependentTranslucency: false,
     contextOptions: { webgl: { alpha: true } },
+    maximumRenderTimeChange: Infinity, // 无操作时自动渲染帧率，设为数字会消耗性能，Infinity为无操作不渲染
     // mapProjection: new Cesium.WebMercatorProjection(),
-    baseLayer: Cesium.ImageryLayer.fromProviderAsync(earth_native, {}),
+    baseLayer: ImageryLayer.fromProviderAsync(earth_native, {}),
   })
   //去除cesium logo，隐藏版本信息
   const creditContainer = viewer.cesiumWidget.creditContainer as HTMLDivElement
@@ -59,8 +67,8 @@ function perfViewer(viewer: Viewer) {
   viewer.scene.sun.show = false
   viewer.scene.skyBox.show = false
   // 优化加载WMTS图层速度
-  Cesium.RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
-  Cesium.RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流
+  RequestScheduler.maximumRequestsPerServer = 18 // 设置cesium请求调度器的最大并发数量
+  RequestScheduler.throttleRequests = false //关闭请求调度器的请求节流
 }
 
 export { initViewer, perfViewer }