Cesium获取鼠标点击位置（PickPosition）解决viewer.scene.pickPosition(e.position)不准的问题

2021-01-06 23:32:00 阅读：807 来源： 互联网

标签：PickPosition viewer scene var Cesium position movement

一、Cesium4种获取鼠标点击位置

1.获取鼠标点的对应椭球面位置：世界坐标（Cartesian3）

通过 viewer.scene.camera.pickEllipsoid(movement.position, ellipsoid)获取，可以获取当前点击视线与椭球面相交处的坐标，其中ellipsoid是当前地球使用的椭球对象：viewer.scene.globe.ellipsoid。

var viewer = new Cesium.Viewer('cesiumContainer');
 
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

2.获取加载地形后对应的经纬度和高程：地标坐标

通过viewer.scene.globe.pick(ray, scene)获取，可以获取点击处地球表面的世界坐标，不包括模型、倾斜摄影表面。其中ray=viewer.camera.getPickRay(movement.position)。

var viewer = new Cesium.Viewer('cesiumContainer');
 
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var ray=viewer.camera.getPickRay(movement.position);
     var position = viewer.scene.globe.pick(ray, viewer.scene);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

3.获取倾斜摄影或模型点击处的坐标：场景坐标

通过viewer.scene.pickPosition(movement.position)获取，根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标。

var viewer = new Cesium.Viewer('cesiumContainer');
 
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     var position = viewer.scene.pickPosition(movement.position);
     console.log(position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

4.获取点击处屏幕坐标：屏幕坐标（鼠标点击位置距离canvas左上角的像素值）

var viewer = new Cesium.Viewer('cesiumContainer');
 
var handler= new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
     console.log(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

二、解决viewer.scene.pickPosition(e.position)在没有3dTile模型下的笛卡尔坐标不准问题。

解决方法：viewer.scene.globe.depthTestAgainstTerrain = true; //默认为false

参考博客：Cesium的拾取问题总结

别人的试验结论：

globe.pick的结果相对稳定准确，不论地形深度检测开启与否，不论加载的是默认地形还是别的地形数据；
scene.pickPosition只有在开启地形深度检测，且不使用默认地形时是准确的。
注意点：
globe.pick只能求交地形； 2. scene.pickPosition不仅可以求交地形，还可以求交除地形以外其他所有写深度的物体。
所以使用时可以二者结合来使用。

var viewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator : false,
    infoBox : false,
    // 注释时相当于使用默认地形，解开注释相当于使用全球地形
    //terrainProvider: Cesium.createWorldTerrain()
});
 
// 深度开启或关闭
viewer.scene.globe.depthTestAgainstTerrain = true; 
 
var scene = viewer.scene;
if (!scene.pickPositionSupported) {
    console.log('This browser does not support pickPosition.');
}
 
var handler;
 
Sandcastle.addToolbarButton('Pick position', function() {
    var modelEntity = viewer.entities.add({
        name : 'milktruck',
        position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
        model : {
            uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.gltf'
        }
    });
    viewer.zoomTo(modelEntity);
 
    var labelEntity = viewer.entities.add({
        label : {
            show : false,
            showBackground : true,
            font : '14px monospace',
            horizontalOrigin : Cesium.HorizontalOrigin.LEFT,
            verticalOrigin : Cesium.VerticalOrigin.TOP,
            pixelOffset : new Cesium.Cartesian2(15, 0)
        }
    });
 
    var tempRay = new Cesium.Ray();
    var tempPos = new Cesium.Cartesian3();
 
    // Mouse over the globe to see the cartographic position
    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function(movement) {
 
        var foundPosition = false;
 
        var scene = viewer.scene;
        if (scene.mode !== Cesium.SceneMode.MORPHING) {
            //var pickedObject = scene.pick(movement.endPosition);
            if (true) {
                labelEntity.label.text = '';
 
                var cartesian = viewer.scene.pickPosition(movement.endPosition);
 
                if (Cesium.defined(cartesian)) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);
                    var heightString = cartographic.height.toFixed(2);
 
                    labelEntity.label.text +=
                        'Lon: ' + ('   ' + longitudeString).slice(-7) + '\u00B0' +
                        '\nLat: ' + ('   ' + latitudeString).slice(-7) + '\u00B0' +
                        '\nAlt: ' + ('   ' + heightString).slice(-7) + 'm';        
                }
 
                var ray = scene.camera.getPickRay(movement.endPosition, tempRay);
                var cartesian2 = scene.globe.pick(ray, scene, tempPos);
 
                if (Cesium.defined(cartesian2)) {
                    var cartographic2 = Cesium.Cartographic.fromCartesian(cartesian2);
                    var longitudeString2 = Cesium.Math.toDegrees(cartographic2.longitude).toFixed(2);
                    var latitudeString2 = Cesium.Math.toDegrees(cartographic2.latitude).toFixed(2);
                    var heightString2 = cartographic2.height.toFixed(2);
 
                    labelEntity.label.text += 
                        '\nLon2: ' + ('   ' + longitudeString2).slice(-7) + '\u00B0' +
                        '\nLat2: ' + ('   ' + latitudeString2).slice(-7) + '\u00B0' +
                        '\nAlt2: ' + ('   ' + heightString2).slice(-7) + 'm';           
                }
 
                if (cartesian || cartesian2) {
                    labelEntity.position = cartesian || cartesian2;
                    labelEntity.label.show = true;  
 
                    labelEntity.label.eyeOffset = new Cesium.Cartesian3(0.0, 0.0, 0);
                    labelEntity.label.disableDepthTestDistance  = Number.POSITIVE_INFINITY;
 
                    foundPosition = true;            
                }
            }
        }
 
        if (!foundPosition) {
            labelEntity.label.show = false;
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
 
Sandcastle.reset = function() {
    viewer.entities.removeAll();
    handler = handler && handler.destroy();
};

标签：PickPosition,viewer,scene,var,Cesium,position,movement
来源： https://blog.csdn.net/qq_38870665/article/details/112299972

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9