【Cesium】九、Cesium点击地图获取点击位置的坐标，并在地图上添加图标

news2025/1/5 2:39:25

文章目录

一、前言
二、实现方法
三、App.vue

一、前言

查找发现好几种方法可以获取到点击位置的坐标。这里我实现需求就不深究学习了。将几位大佬的方法学习过来稍微整合了一下。

本文参考文章：

cesium 4种拾取坐标的方法
【Cesium基础学习】拾取坐标
cesium拾取当前地图点击位置坐标，并在添加点到图上显示

图一黄色的图标是点击的位置，图二是点击位置答应的经纬度点。
在这里插入图片描述

二、实现方法

 viewer.scene.globe.depthTestAgainstTerrain = true;
  // 创建一个事件处理器来处理屏幕空间事件
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  // 监听鼠标点击事件
  handler.setInputAction(function (click) {
    // 使用pick函数获取点击位置的实际位置
    var cartesian = viewer.scene.pickPosition(click.position);
    if (Cesium.defined(cartesian)) {
      // 将笛卡尔坐标转换为经纬度坐标
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
      var heightString = cartographic.height.toFixed(2);
      console.log('经度：' + longitudeString + '，纬度：' + latitudeString + '，高度：' + heightString)

      // 添加点
      let clickPosition = viewer.scene.camera.pickEllipsoid(click.position);
      viewer.entities.add({
        position: clickPosition,
        point: {
          color: Cesium.Color.YELLOW,
          pixelSize: 30
        }
      })
    }
    // 使用Scene.pick来获取3D Tiles的实际高度
    var pickedObject = viewer.scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {
      // 获取到3D Tiles的高度
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const height = cartographic.height;
      const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
      console.log('点击位置的经度是: ' + lon);
      console.log('点击位置的纬度是: ' + lat);
      console.log('点击位置的高度是: ' + height);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

其中开启深度检测（viewer.scene.globe.depthTestAgainstTerrain = true），否则在没有没有3dTile模型的情况下，会出现空间坐标不准的问题。

关于注意事项，需要根据具体的业务场景和需求进行判断和处理。在实际应用中，通常需要根据拾取到的物体进行相应的业务逻辑处理，例如显示信息窗口、执行特定操作等。

三、App.vue

附上App.vue 完整代码，仅供参考：

<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import * as Cesium from "cesium";
const initFn = async () => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: true,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
  });

  // 将 viewer 暴露到全局
  window.viewer = viewer;

  viewer._cesiumWidget._creditContainer.style.display = "none"; //取消版权信息


  viewer.scene.globe.depthTestAgainstTerrain = true;
  // 创建一个事件处理器来处理屏幕空间事件
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  // 监听鼠标点击事件
  handler.setInputAction(function (click) {
    // 使用pick函数获取点击位置的实际位置
    var cartesian = viewer.scene.pickPosition(click.position);
    if (Cesium.defined(cartesian)) {
      // 将笛卡尔坐标转换为经纬度坐标
      var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
      var heightString = cartographic.height.toFixed(2);
      console.log('经度：' + longitudeString + '，纬度：' + latitudeString + '，高度：' + heightString)

      // 添加点
      let clickPosition = viewer.scene.camera.pickEllipsoid(click.position);
      viewer.entities.add({
        position: clickPosition,
        point: {
          color: Cesium.Color.YELLOW,
          pixelSize: 30
        }
      })
    }
    // 使用Scene.pick来获取3D Tiles的实际高度
    var pickedObject = viewer.scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {
      // 获取到3D Tiles的高度
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const height = cartographic.height;
      const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
      console.log('点击位置的经度是: ' + lon);
      console.log('点击位置的纬度是: ' + lat);
      console.log('点击位置的高度是: ' + height);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

};



onMounted(() => {
  // Cesium 初始化
  initFn();
});
</script>
<style>
#app {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  text-align: center;
}

html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

注意：上面方法虽然在地图上添加了黄色的图标，但是只有一半，下一篇文章【Cesium】十、Cesium画点只有一半的问题，亲测有用会解决。