Cesium获取鼠标点击位置(PickPosition)
2018-12-11 本文已影响2人
WebGiser
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