mars3d 鼠标移动地图显示坐标参数

<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
  <div id="mousePosition"></div>
</template>

<script>
import * as mars3d from 'mars3d'

export default {
  data() {
    return {
      map: null,    // 地图数据
      mousePositionElement: null    // 坐标数据
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      // 创建三维地球场景
      const mapOptions = {}
      this.map = new mars3d.Map('cesiumContainer', mapOptions)

      // 获取鼠标位置显示元素
      this.mousePositionElement = document.getElementById('mousePosition')

      // 监听鼠标移动事件
      this.map.on(mars3d.EventType.mouseMove, this.showMouseCoordinates)
    },

    showMouseCoordinates(event) {
      // 获取鼠标在屏幕上的位置
      const windowPosition = event.endPosition

      // 转换为笛卡尔空间直角坐标
      const cartesian3 = mars3d.PointUtil.getCurrentMousePosition(this.map.scene, windowPosition)

      // 将笛卡尔坐标转换为地理坐标（经纬度）
      const position = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian3)

      // 将坐标格式化为字符串
      const lng = Cesium.Math.toDegrees(position.longitude).toFixed(6)
      const lat = Cesium.Math.toDegrees(position.latitude).toFixed(6)
      const height = position.height.toFixed(2)

      // 更新鼠标位置显示元素的内容
      this.mousePositionElement.textContent = `经度：${lng}° 纬度：${lat}° 高程：${height}米`
    }
  }
}
</script>

<style scoped>
#mousePosition {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
  z-index: 1000;
}
</style>