鼠标经纬度显示

ruoyi-ui/src/views/cesiumMap/index.vue

@@ -34,6 +34,10 @@
       @delete="deleteEntityFromContextMenu"
       @update-property="updateEntityProperty"
     />
+    <!-- 鼠标经纬度显示 -->
+    <div class="coordinates-display">
+      {{ coordinatesText }}
+    </div>
   </div>
 </template>
 <script>
@@ -116,7 +120,9 @@ export default {
         arrow: { color: '#FF0000', width: 6 },
         text: { color: '#000000', font: '48px Microsoft YaHei, PingFang SC, sans-serif', backgroundColor: 'rgba(255, 255, 255, 0.8)' },
         image: { width: 150, height: 150 }
-      }
+      },
+      // 鼠标经纬度
+      coordinatesText: '经度: --, 纬度: --'
     }
   },
   components: {
@@ -441,6 +447,7 @@ export default {
         this.initPointMovement()
         this.initRightClickHandler()
         this.initHoverHandler()
+        this.initMouseCoordinates()
         console.log('Cesium离线二维地图已加载')
         console.log('Cesium离线二维地图已加载')
         // 1. 定义全局拾取处理器
@@ -2649,6 +2656,23 @@ export default {
       // ... 原有的比例尺更新代码保持不变
     },
 
+    // 初始化鼠标经纬度显示
+    initMouseCoordinates() {
+      // 创建屏幕空间事件处理器
+      this.mouseCoordinatesHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+      // 鼠标移动事件：更新经纬度
+      this.mouseCoordinatesHandler.setInputAction((movement) => {
+        const cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid)
+        if (cartesian) {
+          const cartographic = Cesium.Cartographic.fromCartesian(cartesian)
+          const longitude = Cesium.Math.toDegrees(cartographic.longitude)
+          const latitude = Cesium.Math.toDegrees(cartographic.latitude)
+          this.coordinatesText = `经度: ${longitude.toFixed(6)}, 纬度: ${latitude.toFixed(6)}`
+        } else {
+          this.coordinatesText = '经度: --, 纬度: --'
+        }
+      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    },
     destroyViewer() {
       this.stopDrawing()
       this.clearAll()
@@ -2663,6 +2687,11 @@ export default {
         this.rightClickHandler = null
       }
 
+      if (this.mouseCoordinatesHandler) {
+        this.mouseCoordinatesHandler.destroy()
+        this.mouseCoordinatesHandler = null
+      }
+
       if (this.viewer) {
         this.viewer.destroy()
         this.viewer = null
@@ -2702,4 +2731,22 @@ export default {
 :deep(.cesium-credit-textContainer) {
   display: none !important;
 }
+
+/* 鼠标经纬度显示样式 */
+.coordinates-display {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-family: Arial, sans-serif;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  pointer-events: none;
+  min-width: 200px;
+  text-align: right;
+}
 </style>