美文网首页Cesium网络纪仕
Cesium获取鼠标点击位置(PickPosition)

Cesium获取鼠标点击位置(PickPosition)

作者: WebGiser | 来源:发表于2018-12-11 16:24 被阅读2次

    cesium学习了这么长时间,有时候写鼠标点击事件时,想获取鼠标点击点位置,发现情况很多。比如以下情形:
    1获取鼠标点的对应椭球面位置
    2获取加载地形后对应的经纬度和高程
    3获取倾斜摄影或模型点击处的坐标
    4获取点击处屏幕坐标
    ......
    发现不同场景对坐标需要不一致,因此花费了一点时间,学习下cesium的鼠标点击位置的获取api接口,看了官方文档和对应的示例,我总结了cesium提供以下几种接口(可能还有其它方式,我还没看到吧!)。

    1、屏幕坐标(鼠标点击位置距离canvas左上角的像素值)

    通过:movement.position获取

    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);
    
    屏幕坐标.png
    2、世界坐标(Cartesian3)
    image.png

    通过 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);
    
    世界坐标.png
    3、场景坐标
    image.png

    通过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);
    
    场景坐标.png
    4、地标坐标

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


    image.png
    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);
    
    地标坐标.png

    相关文章

      网友评论

        本文标题:Cesium获取鼠标点击位置(PickPosition)

        本文链接:https://www.haomeiwen.com/subject/vwfehqtx.html