feat: 添加离线地图链接并优化 Cesium 初始化配置

src/pages/cesium/README.md

@@ -10,3 +10,6 @@
 - https://www.npmjs.com/package/vue-cesium
 - https://zouyaoji.top/vue-cesium/#/zh-CN/component/controls/vc-navigation
 - https://cesium.pages.dev/
+
+## 离线地图
+- https://github.com/CesiumGS/cesium/tree/main/Documentation/OfflineGuide

src/pages/cesium/cesium-helper/00.cesium-init.ts

@@ -11,9 +11,14 @@ _configureCesium();
 export function cesium_init(container: Element) {
   const viewer = new Cesium.Viewer(container, {
     animation: true, // .cesium-viewer-animationContainer https://cesium.com/learn/ion-sdk/ref-doc/Animation.html
-    baseLayerPicker: !true,
+    ...{
+      baseLayer: Cesium.ImageryLayer.fromProviderAsync(
+        Cesium.TileMapServiceImageryProvider.fromUrl(Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')),
+      ),
+      baseLayerPicker: !true,
+      geocoder: !true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false，则不会创建Geocoder小部件。
+    },
     fullscreenButton: !true, // 全屏按钮
-    geocoder: !true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false，则不会创建Geocoder小部件。
     // globe: false, // 地球
     homeButton: true, // Home按钮
     infoBox: false, // InfoBox小部件。
@@ -34,7 +39,7 @@ export function cesium_init(container: Element) {
 
   viewer.scene.debugShowFramesPerSecond = true;
 
-  _configureMapTile(viewer);
+  // _configureMapTile(viewer);
 
   return viewer;
 }
@@ -63,10 +68,10 @@ function _configureCesium() {
 
   // 默认视图区域
   Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
-    75.0, // 西经
-    10.0, // 南纬
-    140.0, // 东经
-    60.0, // 北纬
+    75, // 西经
+    10, // 南纬
+    140, // 东经
+    60, // 北纬
   );
 }
 
@@ -77,15 +82,11 @@ function _configureMapTile(viewer: Cesium.Viewer) {
     url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
   });
 
-  if (!viewer.baseLayerPicker) {
-    // 如果没有底图选择器
-    viewer.imageryLayers.removeAll();
-    viewer.imageryLayers.addImageryProvider(provider);
-  } else {
+  if (viewer.baseLayerPicker) {
     // 如果有底图选择器
     const customLayerViewModel = new Cesium.ProviderViewModel({
       category: 'Cesium ion', // 或 'Other 、Cesium ion'、'Bing Maps' 等
-      creationFunction: function () {
+      creationFunction() {
         return provider;
       },
       iconUrl: 'gaodeImage.png',
@@ -95,7 +96,15 @@ function _configureMapTile(viewer: Cesium.Viewer) {
     // 设置高德地图为默认图层
     viewer.baseLayerPicker.viewModel.imageryProviderViewModels.unshift(customLayerViewModel);
     const selectedViewModel = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0];
+    if (!selectedViewModel) {
+      console.error('未找到默认底图');
+      return;
+    }
     viewer.baseLayerPicker.viewModel.selectedImagery = selectedViewModel;
+  } else {
+    // 如果没有底图选择器
+    viewer.imageryLayers.removeAll();
+    viewer.imageryLayers.addImageryProvider(provider);
   }
 }
 
@@ -103,10 +112,10 @@ function _flyToDemo(viewer: Cesium.Viewer) {
   // 将三维球定位到中国
   viewer.camera.flyTo({
     complete: function complete() {},
-    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
+    destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17_850_000),
     orientation: {
-      heading: Cesium.Math.toRadians(348.4202942851978),
-      pitch: Cesium.Math.toRadians(-89.74026687972041),
+      heading: Cesium.Math.toRadians(348.420_294_285_197_8),
+      pitch: Cesium.Math.toRadians(-89.740_266_879_720_41),
       roll: Cesium.Math.toRadians(0),
     },
   });