常规上传

src/components/devInfoBox.vue

@@ -1,145 +1,152 @@
 <template>
   <div class="devInfoBoxCom">
-      <div class="item">===&nbsp;帧率与内存&nbsp;===</div>
-      <div class="item">运行帧率:&nbsp;{{ fps }}</div>
-      <div class="item">响应时长:&nbsp;{{ ms }}</div>
-      <div class="item">内存占用:&nbsp;{{ jsHeapSize }}</div>
-      <template v-if="gVendor || gRenderer">
-        <div class="item" style="margin-top: 12px">
-          ====&nbsp;显卡信息&nbsp;====
+    <div class="item">=============&nbsp;帧率与内存&nbsp;=============</div>
+    <div class="item">运行帧率:&nbsp;{{ fps }}</div>
+    <div class="item">响应时长:&nbsp;{{ ms }}</div>
+    <div class="item">内存占用:&nbsp;{{ jsHeapSize }}</div>
+    <template v-if="gVendor || gRenderer">
+      <div class="item title" style="margin-top: 12px">
+        ===============&nbsp;显卡信息&nbsp;==============
+      </div>
+      <el-tooltip
+        effect="dark"
+        :content="gVendor"
+        placement="top-end"
+        v-if="gVendor"
+      >
+        <div class="item title">制造商:&nbsp;{{ gVendor }}</div>
+      </el-tooltip>
+      <el-tooltip
+        effect="dark"
+        :content="gRenderer"
+        placement="top-end"
+        v-if="gRenderer"
+      >
+        <div class="item">
+          型号:&nbsp;
+          <span style="display: inline-black">{{ gRenderer }}</span>
         </div>
-        <el-tooltip
-          effect="dark"
-          :content="gVendor"
-          placement="top-end"
-          v-if="gVendor"
-        >
-          <div class="item">制造商:&nbsp;{{ gVendor }}</div>
-        </el-tooltip>
-        <el-tooltip
-          effect="dark"
-          :content="gRenderer"
-          placement="top-end"
-          v-if="gRenderer"
-        >
-          <div class="item">型号:&nbsp;
-            <span style="display: inline-black;">{{ gRenderer }}</span>
-            </div>
-        </el-tooltip>
-      </template>
-    </div>
+      </el-tooltip>
+    </template>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            fps: "", // 设备帧率
-            ms: "", // 设备响应时间
-            jsHeapSize: "", // 内存占用
-            gVendor: "",
-            gRenderer: "",
-        }
-    },
-    props: {
-        viewer: {
-            type: Object,
-            default: () => null,
-        },
-    },
-    mounted() {
-        this.$nextTick(() =>{
-            this.initSystemInfo();
-        })
+  data() {
+    return {
+      fps: "", // 设备帧率
+      ms: "", // 设备响应时间
+      jsHeapSize: "", // 内存占用
+      gVendor: "",
+      gRenderer: "",
+    };
+  },
+  props: {
+    viewer: {
+      type: Object,
+      default: () => null,
     },
-    methods: {
-        // 初始化性能监控
-        initSystemInfo() {
-        this.viewer.scene.debugShowFramesPerSecond = false;
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initSystemInfo();
+    });
+  },
+  methods: {
+    // 初始化性能监控
+    initSystemInfo() {
+      this.viewer.scene.debugShowFramesPerSecond = false;
 
-        // 性能监控变量
-        let lastFrameTime = performance.now();
-        let frameCount = 0;
-        let fps = 0;
-        let frameTime = 0;
+      // 性能监控变量
+      let lastFrameTime = performance.now();
+      let frameCount = 0;
+      let fps = 0;
+      let frameTime = 0;
 
-        // 获取帧率与响应时长
-        this.viewer.scene.postRender.addEventListener(() => {
-            const now = performance.now();
-            const delta = now - lastFrameTime;
+      // 获取帧率与响应时长
+      this.viewer.scene.postRender.addEventListener(() => {
+        const now = performance.now();
+        const delta = now - lastFrameTime;
 
-            frameCount++;
+        frameCount++;
 
-            // 每秒更新一次数据（避免更新太频繁）
-            if (delta >= 1000) {
-            fps = Math.round((frameCount * 1000) / delta);
-            frameTime = delta / frameCount;
+        // 每秒更新一次数据（避免更新太频繁）
+        if (delta >= 1000) {
+          fps = Math.round((frameCount * 1000) / delta);
+          frameTime = delta / frameCount;
 
-            // 更新显示
-            this.fps = `${fps} FPS`;
-            this.ms = `${frameTime.toFixed(1) + " ms"}`;
+          // 更新显示
+          this.fps = `${fps} FPS`;
+          this.ms = `${frameTime.toFixed(1) + " ms"}`;
 
-            // 重置计数器
-            frameCount = 0;
-            lastFrameTime = now;
-            }
-        });
-
-        // 获取内存占用
-        if (window.performance && performance.memory) {
-            const jsHeapSize = performance.memory.usedJSHeapSize / 1048576;
-            this.jsHeapSize = `${parseInt(jsHeapSize)} MB`;
-            // const memory = performance.memory;
-            // console.log("已分配堆内存:", memory.totalJSHeapSize / 1048576 + " MB");
-            // console.log("已使用堆内存:", memory.usedJSHeapSize / 1048576 + " MB");
-            // console.log("堆内存限制:", memory.jsHeapSizeLimit / 1048576 + " MB");
+          // 重置计数器
+          frameCount = 0;
+          lastFrameTime = now;
         }
+      });
+
+      // 获取内存占用
+      if (window.performance && performance.memory) {
+        const jsHeapSize = performance.memory.usedJSHeapSize / 1048576;
+        this.jsHeapSize = `${parseInt(jsHeapSize)} MB`;
+        // const memory = performance.memory;
+        // console.log("已分配堆内存:", memory.totalJSHeapSize / 1048576 + " MB");
+        // console.log("已使用堆内存:", memory.usedJSHeapSize / 1048576 + " MB");
+        // console.log("堆内存限制:", memory.jsHeapSizeLimit / 1048576 + " MB");
+      }
 
-        // 获取显卡信息
-        const canvas = document.createElement("canvas");
-        const gl = canvas.getContext("webgl");
-        if (gl) {
-            const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
-            if (debugInfo) {
-            const gVendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
-            const gRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
+      // 获取显卡信息
+      const canvas = document.createElement("canvas");
+      const gl = canvas.getContext("webgl");
+      if (gl) {
+        const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        if (debugInfo) {
+          const gVendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
+          const gRenderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
 
-            // console.log("GPU厂商:", gVendor);
-            // console.log("GPU型号:", gRenderer);
+          // console.log("GPU厂商:", gVendor);
+          // console.log("GPU型号:", gRenderer);
 
-            this.gVendor = gVendor;
-            this.gRenderer = gRenderer.split(",")?.[1]
-                ? gRenderer.split(",")?.[1]
-                : "";
-            }
+          this.gVendor = gVendor;
+          this.gRenderer = gRenderer.split(",")?.[1]
+            ? gRenderer.split(",")?.[1]
+            : "";
         }
-        },
-    }
-}
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less">
 .devInfoBoxCom {
-    // width: 130px;
-    position: absolute;
-    // right: 0;
-    // bottom: 0;
-    font-size: 12px;
-    color: #fff;
-    // background: rgba(0, 0, 0, 0.25);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    z-index: 500;
-    user-select: none;
+  width: calc(100% - 20px);
+  position: absolute;
+  // right: 0;
+  // bottom: 0;
+  font-size: 12px;
+  color: #fff;
+  // background: rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  z-index: 500;
+  user-select: none;
 
-    .item {
-      width: 100%;
-      margin-top: 4px;
+  .item {
+    width: 100%;
+    margin-top: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.title{
       overflow: hidden;
-      text-overflow: ellipsis;
+      text-overflow: clip;
       white-space: nowrap;
     }
   }
+}
 </style>

src/views/cesium.vue

@@ -81,8 +81,14 @@
       </el-tooltip>
     </div> -->
     <div class="menuComC">
-        <menuCom @handleInit="resetViewport" @handleBaseMap="setMapImageryProvider" @handleCloudLayer="switchCloudLayer" @handleRainLayer="switchRainLayer"
-    @handleTemperatureLayerr="switchTemperatureLayerr" @handleTopographicMap="switchTopographicMap" />
+      <menuCom
+        @handleInit="resetViewport"
+        @handleBaseMap="setMapImageryProvider"
+        @handleCloudLayer="switchCloudLayer"
+        @handleRainLayer="switchRainLayer"
+        @handleTemperatureLayerr="switchTemperatureLayerr"
+        @handleTopographicMap="switchTopographicMap"
+      />
     </div>
     <div
       class="tag"
@@ -95,9 +101,7 @@
       <span v-else>{{ tagMsg || "" }}</span>
     </div>
     <!-- Loading 层 -->
-    <div id="loading" class="dataLoading">
-        加载中...
-    </div>
+    <div id="loading" class="dataLoading">加载中...</div>
     <!-- <div class="devInfoBox" v-if="showDevInfoBox">
       <div class="item">===&nbsp;帧率与内存&nbsp;===</div>
       <div class="item">运行帧率:&nbsp;{{ fps }}</div>
@@ -126,11 +130,11 @@
       </template>
     </div> -->
     <div class="tempImg" v-if="showtempImg">
-        <img src="../assets/cesiumImg/temp.png" >
+      <img src="../assets/cesiumImg/temp.png" />
     </div>
     <weatherView :viewer="viewer" />
   </div>
-    
+
   <el-dialog
     class="modelDialog"
     v-model="showFjDialog"
@@ -170,9 +174,9 @@ import windLineJson from "../assets/geoJson/windLine_2017121300.json";
 import axios from "axios";
 
 import ModelUnpack from "@/components/modelUnpack.vue";
-import menuCom from "./menuCom.vue"
-import {getTempData} from "@/api/index.js"
-import weatherView from "./weatherComponents/weatherView.vue"
+import menuCom from "./menuCom.vue";
+import { getTempData } from "@/api/index.js";
+import weatherView from "./weatherComponents/weatherView.vue";
 
 export default {
   name: "CesiumMap",
@@ -180,7 +184,7 @@ export default {
   components: {
     ModelUnpack,
     menuCom,
-    weatherView
+    weatherView,
   },
 
   data() {
@@ -195,32 +199,32 @@ export default {
       windLayerTimmer: null, // 风场图计时器
       cloudLayer: null, // 卫星云图
       rainLayer: null, // 降雨图
-      temperatureLayer: null,//温度图
+      temperatureLayer: null, //温度图
       basicMapId: "gaodeyingxiang", // 地球底图 ID
       basicMapList: [
         {
-        id: "gaodeyingxiang",
-        name: "高德影像地图",
-        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
-        minimumLevel: 3,
-        maximumLevel: 18,
-        credit: "basicMap",
+          id: "gaodeyingxiang",
+          name: "高德影像地图",
+          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+          minimumLevel: 3,
+          maximumLevel: 17,
+          credit: "basicMap",
         },
         {
-        id: "gaodeshiliang",
-        name: "高德矢量地图",
-        url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
-        minimumLevel: 3,
-        maximumLevel: 18,
-        credit: "basicMap",
+          id: "gaodeshiliang",
+          name: "高德矢量地图",
+          url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
+          minimumLevel: 3,
+          maximumLevel: 17,
+          credit: "basicMap",
         },
         {
-        id: "carto",
-        name: "Carto地图",
-        url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
-        credit: "basicMap",
+          id: "carto",
+          name: "Carto地图",
+          url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+          credit: "basicMap",
         },
-    ],
+      ],
       earthLayer: [],
       userClickLeft: 0,
       userClickTop: 0,
@@ -235,7 +239,7 @@ export default {
       labelLayer: null, // 城市名称 label 集合
       loadDone: false, // 地球首次加载滚动到 reset 位置是否完成
       showtempImg: false,
-      handlerAction: null
+      handlerAction: null,
     };
   },
 
@@ -245,6 +249,7 @@ export default {
     if (this.showDevInfoBox) {
       this.initSystemInfo();
     }
+    this.test();
     this.getData(106.169866, 38.46637);
   },
 
@@ -261,6 +266,22 @@ export default {
   },
 
   methods: {
+    async test() {
+      // 添加OSM建筑 3D 模型
+      try {
+        Cesium.createOsmBuildingsAsync().then((buildings) => {
+          this.viewer.scene.primitives.add(buildings);
+        });
+
+        this.viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
+          requestVertexNormals: true,
+          requestWaterMask: true,
+        });
+      } catch (e) {
+        console.log("error", e);
+      }
+    },
+
     getData(lat, lon) {
       // axios
       //   .get(
@@ -294,7 +315,7 @@ export default {
       //   39.23
       // );
 
-      const viewer = new Cesium.Viewer("cesiumContainer", {
+      const cesiumOptions = {
         geocoder: false, // 地址搜索控件
         homeButton: false, // 返回地图初始位置控件
         infoBox: false, // 地图默认的信息控件
@@ -304,27 +325,26 @@ export default {
         animation: false, // 动画控制控件
         timeline: false, // 时间线控件
         fullscreenButton: false, // 全屏按钮控件
-        imageryProvider: false, // 是否显示 Cesium 默认地图的底图
+        // imageryProvider: true, // 是否显示 Cesium 默认地图的底图
         vrButton: false,
         selectionIndicator: false,
         shouldAnimate: true,
-        // terrainProvider: await Cesium.createWorldTerrainAsync({
-        //   requestVertexNormals: true,
-        //   requestWaterMask: true,
-        // }),
+        // terrain: Cesium.Terrain.fromWorldTerrain(),
         // terrainProvider: new Cesium.CesiumTerrainProvider({
         //   url: "/static/layer.json", // 对应 public/terrain-data 目录
         //   requestVertexNormals: true, // 保留法线数据（光照效果）
         //   requestWaterMask: false, // 本地地形通常无水面效果（需自定义）
         // }),
-      });
+      };
+
+      const viewer = new Cesium.Viewer("cesiumContainer", cesiumOptions);
 
       // 隐藏 Cesium Logo
       viewer.cesiumWidget.creditContainer.style.display = "none";
 
       this.viewer = viewer;
 
-      this.setMapImageryProvider();
+      // this.setMapImageryProvider();
       this.initGeoJsonData();
     },
 
@@ -471,7 +491,7 @@ export default {
     },
 
     // 初始化性能监控
-    initSystemInfo() {
+    async initSystemInfo() {
       this.viewer.scene.debugShowFramesPerSecond = false;
 
       // 性能监控变量
@@ -710,22 +730,22 @@ export default {
 
     // 设置地球底图
     setMapImageryProvider(val) {
-        if (this.imageryProvider) {
-            this.viewer.imageryLayers.remove(this.imageryProvider);
-            this.imageryProvider = null;
-        }
-        let imageryProvider = null
-        if (val) {
-            imageryProvider = val
-        } else {
-            imageryProvider = this.basicMapList.find((ele) => {
-                return ele.id === this.basicMapId;
-            });
-        }
+      if (this.imageryProvider) {
+        this.viewer.imageryLayers.remove(this.imageryProvider);
+        this.imageryProvider = null;
+      }
+      let imageryProvider = null;
+      if (val) {
+        imageryProvider = val;
+      } else {
+        imageryProvider = this.basicMapList.find((ele) => {
+          return ele.id === this.basicMapId;
+        });
+      }
 
-        this.imageryProvider = new Cesium.UrlTemplateImageryProvider(
-            imageryProvider
-        );
+      this.imageryProvider = new Cesium.UrlTemplateImageryProvider(
+        imageryProvider
+      );
 
       // 添加底图
       this.viewer.imageryLayers.addImageryProvider(this.imageryProvider);
@@ -801,7 +821,19 @@ export default {
         destination: Cesium.Cartesian3.fromDegrees(
           106.169866,
           38.46637,
-          height || 8000000
+          height || 10000
+
+          // 106.2,
+          // 38.467,
+          // 15000.0
+
+          // 113.3191,
+          // 23.109,
+          // 1000
+
+          // 121.47,
+          // 31.23,
+          // 1000
         ),
         orientation: {
           heading: Cesium.Math.toRadians(0),
@@ -896,7 +928,7 @@ export default {
     },
     //显示降雨图
     showRainLayer() {
-        //添加中文底图
+      //添加中文底图
       const imageryProvider = new Cesium.UrlTemplateImageryProvider({
         // url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
         url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
@@ -908,39 +940,38 @@ export default {
 
       this.viewer.imageryLayers.addImageryProvider(imageryProvider);
 
-        // 调用降雨底图
+      // 调用降雨底图
       const rainLayer = new Cesium.UrlTemplateImageryProvider({
         url: "https://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=3b66d35579770393051599f8d518df4a",
         // url: "https://maps.openweathermap.org/maps/2.0/radar/{z}/{x}/{y}?tm=1552861800&appid=3b66d35579770393051599f8d518df4a",
         credit: "降雨影像地图",
       });
 
-
       this.viewer.imageryLayers.addImageryProvider(rainLayer);
-      this.csceneElliposid(this.viewer, 'rain')
+      this.csceneElliposid(this.viewer, "rain");
       this.rainLayer = rainLayer;
     },
 
     showTemperatureLayer() {
-        const imageryProvider = new Cesium.UrlTemplateImageryProvider({
-            url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
-            credit: "影像地图",
-        });
-        imageryProvider.alpha = 0.1; // 透明度
-        imageryProvider.brightness = 0.1; // 亮度
-        imageryProvider.contrast = 0.1; // 对比度
+      const imageryProvider = new Cesium.UrlTemplateImageryProvider({
+        url: "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+        credit: "影像地图",
+      });
+      imageryProvider.alpha = 0.1; // 透明度
+      imageryProvider.brightness = 0.1; // 亮度
+      imageryProvider.contrast = 0.1; // 对比度
 
-        this.viewer.imageryLayers.addImageryProvider(imageryProvider);
+      this.viewer.imageryLayers.addImageryProvider(imageryProvider);
 
-            // 调用温度底图
-        const temperatureLayer = new Cesium.UrlTemplateImageryProvider({
-            url: "https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=3b66d35579770393051599f8d518df4a",
-            credit: "温度影像地图",
-        });
+      // 调用温度底图
+      const temperatureLayer = new Cesium.UrlTemplateImageryProvider({
+        url: "https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=3b66d35579770393051599f8d518df4a",
+        credit: "温度影像地图",
+      });
 
-        this.viewer.imageryLayers.addImageryProvider(temperatureLayer);
-        this.csceneElliposid(this.viewer, 'temp')
-        this.temperatureLayer = temperatureLayer
+      this.viewer.imageryLayers.addImageryProvider(temperatureLayer);
+      this.csceneElliposid(this.viewer, "temp");
+      this.temperatureLayer = temperatureLayer;
     },
 
     // 移除风场图
@@ -967,8 +998,10 @@ export default {
         this.tagMsg = null;
         this.viewer.imageryLayers.remove(this.rainLayer);
         this.rainLayer = null;
-        this.setMapImageryProvider()
-        this.handlerAction.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.setMapImageryProvider();
+        this.handlerAction.removeInputAction(
+          Cesium.ScreenSpaceEventType.LEFT_CLICK
+        );
       }
     },
     // 移除温度图
@@ -977,8 +1010,10 @@ export default {
         this.tagMsg = null;
         this.viewer.imageryLayers.remove(this.temperatureLayer);
         this.temperatureLayer = null;
-        this.setMapImageryProvider()
-        this.handlerAction.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        this.setMapImageryProvider();
+        this.handlerAction.removeInputAction(
+          Cesium.ScreenSpaceEventType.LEFT_CLICK
+        );
       }
     },
 
@@ -993,42 +1028,42 @@ export default {
 
     // 切换卫星云图显隐
     switchCloudLayer(val) {
-        this.showtempImg = false
-        if (this.rainLayer) {
-            this.removeRainLayer();
-        }
-        if (!val && this.cloudLayer) {
-            this.removeCloudLayer();
-        } else {
-            this.showCloudLayer();
-        }
+      this.showtempImg = false;
+      if (this.rainLayer) {
+        this.removeRainLayer();
+      }
+      if (!val && this.cloudLayer) {
+        this.removeCloudLayer();
+      } else {
+        this.showCloudLayer();
+      }
     },
     // 切换降雨图显隐
     switchRainLayer() {
-        this.showtempImg = false
-        if (this.cloudLayer) {
-            this.removeCloudLayer();
-        }
-        if (this.rainLayer) {
-            this.removeRainLayer();
-        } else {
-            this.showRainLayer();
-        }
+      this.showtempImg = false;
+      if (this.cloudLayer) {
+        this.removeCloudLayer();
+      }
+      if (this.rainLayer) {
+        this.removeRainLayer();
+      } else {
+        this.showRainLayer();
+      }
     },
 
     switchTemperatureLayerr(val) {
-        this.showtempImg = val
-        if (this.cloudLayer) {
-            this.removeCloudLayer();
-        }
-        if (this.rainLayer) {
-            this.removeRainLayer();
-        }
-        if (this.temperatureLayer) {
-            this.removeTemperatureLayer();
-        } else {
-            this.showTemperatureLayer();
-        }
+      this.showtempImg = val;
+      if (this.cloudLayer) {
+        this.removeCloudLayer();
+      }
+      if (this.rainLayer) {
+        this.removeRainLayer();
+      }
+      if (this.temperatureLayer) {
+        this.removeTemperatureLayer();
+      } else {
+        this.showTemperatureLayer();
+      }
     },
     switchTopographicMap() {
       this.$router.push({
@@ -1036,83 +1071,91 @@ export default {
       });
     },
     csceneElliposid(viewer, type) {
-        let that = this
-        // 获取 scene 和 ellipsoid
-        var scene = viewer.scene;
-        var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
-
-        // 创建 ScreenSpaceEventHandler
-        var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-
-        // 监听左键点击事件
-        handler.setInputAction(async(click) => {
-            // 获取点击位置的笛卡尔坐标
-            var position = click.position;
-            if (!position) return;
-
-            // 使用 globe.pick 获取包含地形高度的坐标
-            var ray = viewer.camera.getPickRay(position);
-            var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-
-            
-
-            if (cartesian) {
-                // 转换为地理坐标
-                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-                var longitude = Cesium.Math.toDegrees(cartographic.longitude);
-                var latitude = Cesium.Math.toDegrees(cartographic.latitude);
-                var height = cartographic.height;
-
-                // 显示 loading
-                that.showLoading();
-
-                let params = {
-                    lat: latitude,
-                    lon: longitude,
-                    appid: "3b66d35579770393051599f8d518df4a"
-                }
-                let res = await getTempData(params)
-
-                // 取消显示 loading
-                that.hideLoading();
-
-                // 格式化坐标
-                var text = `经度: ${longitude.toFixed(6)}°\n纬度: ${latitude.toFixed(6)}°\n城市: ${res.name}\n降雨量: ${res.rain ? res.rain['1h']+'mm/h' : '无降雨'}`;
-                var text2 = `经度: ${longitude.toFixed(6)}°\n纬度: ${latitude.toFixed(6)}°\n城市: ${res.name}\n温度: ${Math.ceil(res.main.temp-273.15)}℃`;
-                // 创建一个标签
-                var label = labels.add({
-                    position: cartesian,
-                    text: type === 'rain' ? text : text2,
-                    font: '14px monospace',
-                    fillColor: Cesium.Color.fromCssColorString('#1d70df'),
-                    // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                    // outlineColor: Cesium.Color.BLACK,
-                    outlineWidth: 2,
-                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,  // 标签在点的上方
-                    pixelOffset: new Cesium.Cartesian2(0, -20),    // 向上偏移一点
-                    disableDepthTest: true, // 让标签始终可见（即使在地球背面）
-                    scale: 0.8
-                });
-
-                // 5秒后移除标签
-                setTimeout(function() {
-                    labels.remove(label);
-                }, 5000);
-
-                console.log(`点击坐标: ${longitude.toFixed(6)}, ${latitude.toFixed(6)}, ${height.toFixed(2)}m`);
-            }
-        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+      let that = this;
+      // 获取 scene 和 ellipsoid
+      var scene = viewer.scene;
+      var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
+
+      // 创建 ScreenSpaceEventHandler
+      var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+
+      // 监听左键点击事件
+      handler.setInputAction(async (click) => {
+        // 获取点击位置的笛卡尔坐标
+        var position = click.position;
+        if (!position) return;
+
+        // 使用 globe.pick 获取包含地形高度的坐标
+        var ray = viewer.camera.getPickRay(position);
+        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+
+        if (cartesian) {
+          // 转换为地理坐标
+          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+          var height = cartographic.height;
+
+          // 显示 loading
+          that.showLoading();
+
+          let params = {
+            lat: latitude,
+            lon: longitude,
+            appid: "3b66d35579770393051599f8d518df4a",
+          };
+          let res = await getTempData(params);
+
+          // 取消显示 loading
+          that.hideLoading();
+
+          // 格式化坐标
+          var text = `经度: ${longitude.toFixed(6)}°\n纬度: ${latitude.toFixed(
+            6
+          )}°\n城市: ${res.name}\n降雨量: ${
+            res.rain ? res.rain["1h"] + "mm/h" : "无降雨"
+          }`;
+          var text2 = `经度: ${longitude.toFixed(6)}°\n纬度: ${latitude.toFixed(
+            6
+          )}°\n城市: ${res.name}\n温度: ${Math.ceil(res.main.temp - 273.15)}℃`;
+          // 创建一个标签
+          var label = labels.add({
+            position: cartesian,
+            text: type === "rain" ? text : text2,
+            font: "14px monospace",
+            fillColor: Cesium.Color.fromCssColorString("#1d70df"),
+            // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            // outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 标签在点的上方
+            pixelOffset: new Cesium.Cartesian2(0, -20), // 向上偏移一点
+            disableDepthTest: true, // 让标签始终可见（即使在地球背面）
+            scale: 0.8,
+          });
+
+          // 5秒后移除标签
+          setTimeout(function () {
+            labels.remove(label);
+          }, 5000);
+
+          console.log(
+            `点击坐标: ${longitude.toFixed(6)}, ${latitude.toFixed(
+              6
+            )}, ${height.toFixed(2)}m`
+          );
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
-        this.handlerAction = handler
+      this.handlerAction = handler;
     },
     showLoading() {
-        var loadingEl = document.getElementById('loading');
-        loadingEl.style.display = 'block';
+      var loadingEl = document.getElementById("loading");
+      loadingEl.style.display = "block";
     },
 
     hideLoading() {
-        var loadingEl = document.getElementById('loading');
-        loadingEl.style.display = 'none';
+      var loadingEl = document.getElementById("loading");
+      loadingEl.style.display = "none";
     },
   },
 };
@@ -1125,7 +1168,7 @@ export default {
   position: relative;
   box-sizing: content-box;
   position: relative;
-  .menuComC{
+  .menuComC {
     position: fixed;
     bottom: 20px;
     left: 20px;
@@ -1202,28 +1245,28 @@ export default {
     }
   }
 
-  .dataLoading{
-    position: absolute; 
-    top: 50%; 
-    left: 50%; 
-    transform: translate(-50%, -50%); 
-    background: rgba(0,0,0,0.7); 
-    color: white; 
-    padding: 15px 20px; 
-    border-radius: 6px; 
-    font-size: 14px; 
-    pointer-events: none; 
-    display: none; 
+  .dataLoading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 15px 20px;
+    border-radius: 6px;
+    font-size: 14px;
+    pointer-events: none;
+    display: none;
     z-index: 999;
   }
-  .tempImg{
+  .tempImg {
     // width: 40px;
     height: 500px;
     position: absolute;
     right: 0;
     bottom: 0px;
-    img{
-        height: 300px;
+    img {
+      height: 300px;
     }
   }
 }