Cesium-鼠标拾取椭球、地形、模型坐标点详解

• 前言
• 获取椭球体表面的经纬度坐标（方法一）
• 获取椭球体表面的经纬度坐标（方法二）
• 获取地形表面的经纬度高程坐标（方法一）
• 获取地形表面的经纬度高程坐标（方法二）
• 获取模型表面的经纬度高程坐标（此方法借鉴于官方示例）

前言

Cesium 中的三维坐标可分为三种情况：椭球表面、地形和模型。

获取椭球体表面的经纬度坐标（方法一）

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function(evt) { 
    var cartesian = viewer.camera.pickEllipsoid(evt.position, viewer.scene.globe.ellipsoid);  
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);  
    var lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度值  
    var lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度值  
    var mapPosition = {
        x: lng, 
        y: lat,
        z: cartographic.height // cartographic.height 的值始终为零
    };
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); 

获取相机高度可以通过此法获得：

// 获取相机的高度
height = Math.ceil(viewer.camera.positionCartographic.height);

获取椭球体表面的经纬度坐标（方法二）

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 设置鼠标移动事件的处理函数，这里负责监听x, y坐标值变化
handler.setInputAction(function(evt) {
    // 得到当前三维场景的椭球体，即地球
    var ellipsoid = scene.globe.ellipsoid;
    // 通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
    cartesian = viewer.camera.pickEllipsoid(evt.endPosition, ellipsoid);
    // 将笛卡尔坐标转换为地理坐标
    var cartographic = ellipsoid.cartesianToCartographic(cartesian);
    // 将弧度转换为度的十进制表示
    lng = Cesium.Math.toDegrees(cartographic.longitude);
    lat = Cesium.Math.toDegrees(cartographic.latitude);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)

获取地形表面的经纬度高程坐标（方法一）

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function(evt) {  
    var ray = viewer.camera.getPickRay(evt.position);  
    var cartesian = viewer.scene.globe.pick(ray, viewer.scene); 
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian); 
    var lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度值  
    var lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度值  
    var mapPosition = {
        x: lng,
        y: lat,
        z: cartographic.height // cartographic.height的值为地形高度 
    }; 
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

获取地形表面的经纬度高程坐标（方法二）

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function(evt) {  
    var ray = viewer.camera.getPickRay(evt.position);  
    var cartesian = viewer.scene.globe.pick(ray, viewer.scene);  
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);  
    var lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度值  
    var lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度值  
    // height 结果与 cartographic.height 相差无几，注意：cartographic.height 可以为 0，也就是说，可以根据经纬度计算出高程。  
    var height = viewer.scene.globe.getHeight(cartographic);  
    var mapPosition = {
        x: lng,
        y: lat,
        z: height.height // height 的值为地形高度
    };
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

获取模型表面的经纬度高程坐标（此方法借鉴于官方示例）

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);  
handler.setInputAction(function(evt) {  
    var scene = viewer.scene;  
    if (scene.mode !== Cesium.SceneMode.MORPHING) {  
        var pickedObject = scene.pick(evt.position);  
        if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.node) {  
            var cartesian = viewer.scene.pickPosition(evt.position);  
            if (Cesium.defined(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; // 模型高度  
                mapPosition = {
                    x: lng,
                    y: lat,
                    z: height
                } 
            }  
        }  
    }  
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); 

如果您觉得这篇文章对您有帮助，欢迎给我的 github项目 点一个⭐ ο(=•ω＜=)ρ⌒☆