【Cesium：语法】Cesium获取鼠标点击位置（PickPosition）

 

转载：Cesium获取鼠标点击位置（PickPosition）

Cesium获取鼠标点击位置（PickPosition）

WebGiser

2018.12.11 16:24 字数 386 阅读 146

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

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

通过：movement.position获取

 viewer =  Cesium.Viewer('cesiumContainer');

 handler=  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。

 viewer =  Cesium.Viewer('cesiumContainer');

 handler =  Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
      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)获取，根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标。

 viewer =  Cesium.Viewer('cesiumContainer');

 handler =  Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
      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

 viewer =  Cesium.Viewer('cesiumContainer');

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

地标坐标.png