显示鼠标实时坐标位置

src/components/Combinations/LayerManage/LayerManage.vue

@@ -10,17 +10,19 @@
       @lower="lower"
     ></layer-manage-split>
     <LayerLegend></LayerLegend>
+    <mousePoint></mousePoint>
   </div>
 </template>
 
 <script>
 import { Collect, GetResourceTree, GetMyCollect } from "@/api/map";
 import LayerLegend from "./LayerLegend.vue";
+import mousePoint from "./mousePoint";
 import xml2js from "xml2js";
 let geoLayers = [];
 export default {
   name: "LayerManage",
-  components: { LayerLegend },
+  components: { LayerLegend, mousePoint },
   data() {
     return {
       modellayerlist: [],
@@ -265,8 +267,8 @@ export default {
               keyWord: "SmID",
             });
           } else if (obj.dataexplain == "分层分户") {
-            store.setLayerList(layers[0][0]);    
-            layers[0][0].title = obj.title
+            store.setLayerList(layers[0][0]);
+            layers[0][0].title = obj.title;
             // layers[0][0].indexedDBSetting.isAttributesSave = true;
           }
           // store.state.S3MList.push(layers[0]);

src/components/Combinations/LayerManage/mousePoint.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="mousePoint"
+    v-show="$route.path !== '/overview' || !store.state.viewer_flag"
+  >
+    坐标：{{ lonString }}，{{ latString }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      handler: {},
+      lonString: 0,
+      latString: 0,
+      searchHeight: 0,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  methods: {
+    init() {
+      this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+      this.handler.setInputAction((e) => {
+        // 将屏幕空间的位置转换为笛卡尔世界坐标
+        let position = scene.pickPosition(e.endPosition);
+        // const cartesian = viewer.camera.pickEllipsoid(
+        //   e.endPosition,
+        //   viewer.scene.globe.ellipsoid
+        // );
+        if (position) {
+          //   // 将笛卡尔坐标转换为笛卡尔地理坐标（经度和纬度）
+          const cartographic = Cesium.Cartographic.fromCartesian(position);
+          this.lonString = Cesium.Math.toDegrees(
+            cartographic.longitude
+          ).toFixed(6);
+          this.latString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
+            6
+          );
+          this.searchHeight = cartographic.height.toFixed(2);
+        }
+        //   // 显示经纬度
+        //   console.log(
+        //     `Longitude: ${lonString}, Latitude: ${latString}`
+        //   );
+        //   // 显示经纬度
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    },
+  },
+  beforeDestroy() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = undefined;
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.mousePoint {
+  width: 250px;
+  background: url(/static/images/ghzc/内容框.png) no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  padding: 0px 10px;
+  box-sizing: content-box;
+  text-align: left;
+  line-height: 40px;
+  overflow: hidden;
+  position: absolute;
+  right: 40px;
+  top: 95vh;
+}
+</style>