代码分离

src/components/CesiumMap/index.vue

@@ -6,7 +6,7 @@
 
 <script setup>
 import * as Cesium from 'cesium';
-import { CustomBaiduImageryProvider } from "./CustomBaiduImageryProvider.js";
+import { useConfigSetting } from './mixins/useConfigSetting.js';
 
 const props = defineProps({
   options: {
@@ -25,8 +25,6 @@ onMounted(async () => {
 
 // 初始化地图
 const initMap = async () => {
-  let terrainProvider = await Cesium.createWorldTerrainAsync()
-
   const oldOptions = {
     // 动画仪表盘
     animation: false,
@@ -70,6 +68,7 @@ const initMap = async () => {
     configJson = {}
   }
   if (props.options.isTerrainProvider) {
+    let terrainProvider = await Cesium.createWorldTerrainAsync()
     // 是否使用自定义地形
     if(props.options.cesiumTerrainProviderUrl) {
       const customTerrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(props.options.cesiumTerrainProviderUrl);
@@ -87,114 +86,14 @@ const initMap = async () => {
   // 隐藏logo
   viewer.cesiumWidget.creditContainer.style.display = 'none'
 
-  setInitConfig();
+  const { setInitConfig } = useConfigSetting(viewer);
+
+  setInitConfig(props.options);
 
   // 取消左键双击
   viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
 }
 
-// 设置初始值
-const setInitConfig = () => {
-  let options = props.options;
-  mapSetView(options);
-  // 地形夸张
-  if (options.terrainExaggeration) {
-    viewer.scene.globe.terrainExaggeration = options.terrainExaggeration;
-  }
-
-  setMapImg(options);
-  setModel(options);
-}
-
-// 设置地图
-const setMapImg = (options) => {
-  if (!options.ditu) {
-    return;
-  }
-
-  if (options.ditu === 'amap') {
-    const gaodeVector = new Cesium.UrlTemplateImageryProvider({
-      url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
-      name: "高德矢量地图",
-    });
-    viewer.imageryLayers.addImageryProvider(gaodeVector);
-  } else if (options.ditu === 'tencent') {
-    const tencentVector = new Cesium.UrlTemplateImageryProvider({
-      url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297",
-      customTags: {
-        sx: function (imageryProvider, x, y, level) {
-          return x >> 4;
-        },
-        sy: function (imageryProvider, x, y, level) {
-          return ((1 << level) - y) >> 4;
-        },
-      },
-      name: "腾讯矢量地图",
-    });
-    viewer.imageryLayers.addImageryProvider(tencentVector);
-  } else if (options.ditu === 'baidu') {
-    const baiduVector = new CustomBaiduImageryProvider({
-      url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
-    });
-    viewer.imageryLayers.addImageryProvider(baiduVector);
-  } else if (options.ditu === 'tianditu') {
-    const tiandituImage = new Cesium.WebMapTileServiceImageryProvider({
-      url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=25129831bd91c81af49d3ecf578f6b3c",
-      layer: "img",
-      style: "default",
-      format: "tiles",
-      tileMatrixSetID: "w",
-      maximumLevel: 18,
-      credit: new Cesium.Credit("© Tianditu", "http://www.tianditu.gov.cn/"),
-      name: "天地图影像地图",
-    });
-    viewer.imageryLayers.addImageryProvider(tiandituImage);
-  }
-}
-
-// 地图设置视角
-const mapSetView = (options) => {
-  let destination = Cesium.Cartesian3.fromDegrees(options.setView.x, options.setView.y, options.setView.z);
-  let orientation = {
-    heading: Cesium.Math.toRadians(options.setView.heading),
-    pitch: Cesium.Math.toRadians(options.setView.pitch),
-    roll: Cesium.Math.toRadians(options.setView.roll)
-  }
-
-  if (options.setView.duration === '默认') {
-    viewer.camera.flyTo({
-      destination,
-      orientation
-    })
-  } else {
-    viewer.camera.flyTo({
-      destination,
-      orientation,
-      duration: options.setView.duration
-    })
-  }
-}
-
-// 设置模型
-const setModel = async (options) => {
-  // 3d模型参数
-  const tilesetOption = {
-    maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值
-    skipLevelOfDetail: true,
-    // baseScreenSpaceError: 1024,
-    // skipScreenSpaceErrorFactor: 16,
-    skipLevels: 5,
-    // immediatelyLoadDesiredLevelOfDetail: false,
-    // loadSiblings: false,
-    // cullWithChildrenBounds: true
-  };
-  for (const url of options.modelList) {
-    const primitive = await Cesium.Cesium3DTileset.fromUrl(url, tilesetOption);
-    if(primitive) {
-      viewer.scene.primitives.add(primitive);
-    }
-  }
-}
 
 onUnmounted(() => {
   if (viewer) {

src/components/CesiumMap/mixins/useConfigSetting.js

@@ -0,0 +1,112 @@
+import { CustomBaiduImageryProvider } from "../CustomBaiduImageryProvider.js";
+import * as Cesium from 'cesium';
+export function useConfigSetting(viewer) {
+// 设置初始值
+    const setInitConfig = (options) => {
+        // 设置视角
+        mapSetView(options);
+        // 地形夸张
+        if (options.terrainExaggeration) {
+            viewer.scene.globe.terrainExaggeration = options.terrainExaggeration;
+        }
+        // 设置底图
+        setMapImg(options);
+        // 设置模型
+        setModel(options);
+    }
+
+    // 设置地图
+    const setMapImg = (options) => {
+        if (!options.ditu) {
+            return;
+        }
+
+        if (options.ditu === 'amap') {
+            const gaodeVector = new Cesium.UrlTemplateImageryProvider({
+                url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+                name: "高德矢量地图",
+            });
+            viewer.imageryLayers.addImageryProvider(gaodeVector);
+        } else if (options.ditu === 'tencent') {
+            const tencentVector = new Cesium.UrlTemplateImageryProvider({
+                url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297",
+                customTags: {
+                    sx: function (imageryProvider, x, y, level) {
+                        return x >> 4;
+                    },
+                    sy: function (imageryProvider, x, y, level) {
+                        return ((1 << level) - y) >> 4;
+                    },
+                },
+                name: "腾讯矢量地图",
+            });
+            viewer.imageryLayers.addImageryProvider(tencentVector);
+        } else if (options.ditu === 'baidu') {
+            const baiduVector = new CustomBaiduImageryProvider({
+                url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
+            });
+            viewer.imageryLayers.addImageryProvider(baiduVector);
+        } else if (options.ditu === 'tianditu') {
+            const tiandituImage = new Cesium.WebMapTileServiceImageryProvider({
+                url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=25129831bd91c81af49d3ecf578f6b3c",
+                layer: "img",
+                style: "default",
+                format: "tiles",
+                tileMatrixSetID: "w",
+                maximumLevel: 18,
+                credit: new Cesium.Credit("© Tianditu", "http://www.tianditu.gov.cn/"),
+                name: "天地图影像地图",
+            });
+            viewer.imageryLayers.addImageryProvider(tiandituImage);
+        }
+    }
+
+    // 地图设置视角
+    const mapSetView = (options) => {
+        let destination = Cesium.Cartesian3.fromDegrees(options.setView.x, options.setView.y, options.setView.z);
+        let orientation = {
+            heading: Cesium.Math.toRadians(options.setView.heading),
+            pitch: Cesium.Math.toRadians(options.setView.pitch),
+            roll: Cesium.Math.toRadians(options.setView.roll)
+        }
+
+        if (options.setView.duration === '默认') {
+            viewer.camera.flyTo({
+                destination,
+                orientation
+            })
+        } else {
+            viewer.camera.flyTo({
+                destination,
+                orientation,
+                duration: options.setView.duration
+            })
+        }
+    }
+
+    // 设置模型
+    const setModel = async (options) => {
+        // 3d模型参数
+        const tilesetOption = {
+            maximumScreenSpaceError: 1, // 应对大疆一键生成的模型问题；如模型能正常显示但文件加载太过频繁，可增大数值
+            skipLevelOfDetail: true,
+            // baseScreenSpaceError: 1024,
+            // skipScreenSpaceErrorFactor: 16,
+            skipLevels: 5,
+            // immediatelyLoadDesiredLevelOfDetail: false,
+            // loadSiblings: false,
+            // cullWithChildrenBounds: true
+        };
+        for (const url of options.modelList) {
+            const primitive = await Cesium.Cesium3DTileset.fromUrl(url, tilesetOption);
+            if(primitive) {
+                viewer.scene.primitives.add(primitive);
+            }
+        }
+    }
+
+
+    return {
+        setInitConfig
+    }
+}