一、Cesium4种获取鼠标点击位置
原文地址:Cesium获取鼠标点击位置
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();
};