cesium 获取鼠标点击位置的经度纬度海拔高度

方法类型	核心方法/属性	获取的坐标类型	是否考虑地形/模型影响	典型应用场景
椭球体表面坐标	`viewer.camera.pickEllipsoid()`	椭球体表面的经纬度，高度为0	否	快速获取地球椭球体基础上的经纬度，忽略所有地形和模型
地形表面坐标	`viewer.scene.globe.pick()` + `getPickRay()`	地形表面的经纬度和实际海拔高度	是 (仅地形)	需要获取真实地形海拔高度的场景
模型表面坐标	`viewer.scene.pickPosition()`	模型表面的精确经纬度和高度	是 (地形和模型)	点击3D模型、建筑物等实体时获取其表面精确坐标
当前相机高度 (视角海拔)	`viewer.camera.positionCartographic.height`	相机距离地面的高度	-	获取当前视角的海拔高度，常用于显示视角高度

获取经纬度和海拔高度

获取到笛卡尔坐标后，需要将其转换为经纬度（弧度），再转换为度数，并获取高度信息。

js 复制代码

// 将笛卡尔坐标转换为地理坐标（弧度）
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
// 或将笛卡尔坐标转换为地理坐标（弧度）的另一种方式，适用于地形坐标
// var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);

// 将弧度转换为度
var longitude = Cesium.Math.toDegrees(cartographic.longitude); // 经度
var latitude = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度
var height = cartographic.height;                              // 高度（米）

获取椭球体表面坐标（忽略地形和模型）

这种方法获取的是鼠标点击方向与地球椭球体相交点的坐标，高度为0，不考虑地形起伏和模型

js 复制代码

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (click) {
    var cartesian = viewer.camera.pickEllipsoid(click.position, viewer.scene.globe.ellipsoid);
    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var height = 0; // 椭球体表面高度为0
        console.log("经度: " + lng + ", 纬度: " + lat + ", 高度: " + height);
    } else {
        console.log("未点击到椭球体上");
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

获取地形表面坐标（考虑地形）

这种方法通过射线与地形的交点来获取坐标，可以得到地形的真实海拔高度

js 复制代码

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (click) {
    var ray = viewer.camera.getPickRay(click.position);
    if (!ray) return;
    
    var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    if (cartesian) {
        var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
        // 或者使用 Cesium.Cartographic.fromCartesian(cartesian);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height; // 地形海拔高度
        console.log("经度: " + lng + ", 纬度: " + lat + ", 高度: " + height);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

获取模型表面坐标（考虑地形和模型）

这种方法可以获取鼠标点击到的3D模型、建筑物等实体表面的精确坐标

js 复制代码

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (click) {
    // 检查场景是否支持pickPosition方法且点击到了实体
    if (viewer.scene.pickPositionSupported) {
        var cartesian = viewer.scene.pickPosition(click.position);
        if (cartesian) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            var lng = Cesium.Math.toDegrees(cartographic.longitude);
            var lat = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height; // 模型表面的高度
            console.log("经度: " + lng + ", 纬度: " + lat + ", 高度: " + height);
        }
    } else {
        console.log("当前环境不支持pickPosition");
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

实时显示鼠标位置的坐标（鼠标移动事件）

除了点击获取，你也可以实时显示鼠标所在位置的坐标

js 复制代码

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
    var cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(movement.endPosition), viewer.scene);
    if (cartesian) {
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
        var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
        var height = cartographic.height.toFixed(2);
        // 将坐标显示在页面某个元素上
        document.getElementById('coordsDisplay').innerHTML = `经度: ${lng}, 纬度: ${lat}, 高度: ${height}米`;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

注意事项

方法选择 ：选择哪种方法取决于你的具体需求。如果只关心基底椭球体，用 pickEllipsoid；如果需要真实地形高度，用 globe.pick；如果要精确获取模型上的点，用 pickPosition1。
异步地形数据 ：当地形服务 enabled 时，globe.pick 的结果会受到地形数据加载状态的影响。确保地形数据已加载完毕以获得准确的高度值。
未定义值处理 ：总是检查方法返回的 cartesian 或 cartographic 是否为 undefined，以避免在未点击到有效位置时运行转换代码4。
精度问题：转换后的经纬度和小数位数可以根据需要确定。
性能考虑 ：特别是在 MOUSE_MOVE 事件中频繁调用坐标转换操作可能对性能有一定影响，应确保代码优化。