Cesium 点击获取经纬度（二维坐标）

原创已于 2025-02-18 15:20:56 修改 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css3

于 2022-06-15 17:23:59 首次发布

WebGL & Cesium & Three 专栏收录该内容

54 篇文章

订阅专栏

该代码示例展示了如何通过Cesium库，将屏幕坐标转换为椭球体表面的经纬度坐标。当点击事件触发时，利用pickEllipsoid方法获取空间坐标，并通过Cartographic对象将其转换为弧度，再转化为度数的经纬度值。注意，在地形加载情况下，由于地形起伏可能产生一定误差。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面代码适用于 二维坐标，获取椭球体表面的经纬度坐标。

handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event => {
  // 屏幕坐标转为空间坐标
  let cartesian = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
  if (cartesian == undefined) {
    console.log('没有获取到坐标')
  } else {
    // 空间坐标转世界坐标(弧度)
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    // 弧度转为角度（经纬度）
    let lon = Cesium.Math.toDegrees(cartographic.longitude);  // 经度值
    let lat = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度值

    console.log('经纬度是：', { x: lon, y: lat });
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

取消左键点击事件

handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)

pickEllipsoid 返回的是椭圆球体表面的一个Cartesian3坐标。

注意： pickEllipsoid 在加载地形的情况下有一定误差，地形凹凸程度越大，误差越大，所以上述方面只能用于 二维坐标 的获取。

三维坐标请看我的另一篇文章