700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > cesium获取点击内容信息_Cesium获取鼠标点击位置(PickPosition)

cesium获取点击内容信息_Cesium获取鼠标点击位置(PickPosition)

时间:2024-01-26 11:49:19

相关推荐

cesium获取点击内容信息_Cesium获取鼠标点击位置(PickPosition)

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。