运行效果

cesium鼠标移入右下角显示经纬度

cesium版本

"cesium": "^1.114.0",

实例代码

<template>
  <div class="home">
    <div class="homeInner" ref="cesiumContainer">

    </div>
    <!-- 经纬度显示容器 -->
    <div class="coordinates">
      经度: {{ longitude }}°, 纬度: {{ latitude }}°
    </div>
  </div>
</template>

<script>
import {
  Viewer,
  ScreenSpaceEventType,
  ScreenSpaceEventHandler,
  Cartesian2,
  Cartographic,
  Math as CesiumMath
} from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';

export default {
  data() {
    return {
      viewer: null,
      longitude: 0, // 经度
      latitude: 0,  // 纬度
    };
  },
  mounted() {
    // 创建 Cesium Viewer 实例
    this.viewer = new Viewer(this.$refs.cesiumContainer, {
      // 初始化参数，根据需要进行设置
    });

    // 添加鼠标移动事件监听器
    const handler = new ScreenSpaceEventHandler(this.viewer.scene.canvas);
    handler.setInputAction((movement) => {
      // 获取鼠标位置的笛卡尔坐标
      const cartesian = this.viewer.camera.pickEllipsoid(movement.endPosition, this.viewer.scene.globe.ellipsoid);
      if (cartesian) {
        // 将笛卡尔坐标转换为地理坐标
        const cartographic = Cartographic.fromCartesian(cartesian);
        // 将弧度转换为度
        const longitude = CesiumMath.toDegrees(cartographic.longitude);
        const latitude = CesiumMath.toDegrees(cartographic.latitude);
        // 在这里可以处理经纬度信息，例如显示到界面上
        console.log(`经度: ``{longitude.toFixed(2)}, 纬度: ``{latitude.toFixed(2)}`);
        // 更新数据对象中的经纬度值
        this.longitude = longitude.toFixed(2);
        this.latitude = latitude.toFixed(2);
      }
    }, ScreenSpaceEventType.MOUSE_MOVE);
  },
  beforeDestroy() {
    // 销毁 Viewer 实例和事件监听器
    if (this.viewer) {
      this.viewer.destroy();
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;

  .homeInner {
    position: fixed;
    width: 100%;
    height: 100%;
  }
  .coordinates {
    position: fixed;
    right: 10px; // 右下角位置
    bottom: 30px;
    background-color: rgba(0, 0, 0, 0.7); // 半透明背景
    color: white; // 文字颜色
    padding: 5px; // 内边距
    border-radius: 5px; // 边框圆角
    z-index: 1000; // 确保在最上层
  }
}
</style>

在这段代码中，我们首先在 mounted 钩子中创建了 Cesium Viewer 实例，并将其保存在组件的 data 中。然后，我们创建了一个 ScreenSpaceEventHandler 来监听鼠标移动事件。当鼠标在 Cesium 容器内移动时，我们获取鼠标位置的笛卡尔坐标，将其转换为地理坐标（经纬度），并将其打印到控制台。你可以根据需要将这些信息显示在界面上。