cesium 鼠标点击事件获取各种坐标

cesium点击事件

new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
.setInputAction((movement)=>{
		console.log(movement)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

屏幕坐标

屏幕坐标,就是点击后,获取的点距离你的浏览器左边和上边的距离

new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
.setInputAction((movement)=>{
		console.log("屏幕坐标:",movement);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)

世界坐标(也叫笛卡尔坐标Cartesian3)

pickEllipsoid(windowPosition, ellipsoid, result) → Cartesian3
windowPostion → 二维坐标(屏幕坐标)
ellipsoid     → 椭球体
result        → 返回结果
文档注释:
	如果选中了椭球面或映射，则返回椭球面或映射在世界坐标下的表面上的点。如果没有选中椭球面或映射，
	则返回undefined

场景坐标

pickPosition(windowPosition, result) → Cartesian3
文档注释:
	返回从深度缓冲区和窗口位置重建的笛卡尔坐标位置。从深度缓冲区在二维重建的
	位置可能略有不同，那些重建的三维和哥伦布视图。这是由于透视和正投影深度值分布的差异造成的。
	设置场景#pickTranslucentDepth为true，以包含半透明原语的深度;否则，
	这本质上就是挑选半透明的原语。

问题列表:

如何解决坐标偏移?
因为上述坐标都是在没有加高程的情况下,我们知道,作为GIS应用,不可能不加高程的;但是加了高程之后,坐标就存在偏移情况,那么如何解决呢?
首先,我们把已经掌握的知识情报总结一下:

总结完后,我发现,其实,我们只需要辨别清楚pickEllipsoid和getPickRay在高程时的精度区别即可
首先啊,我们要弄清楚个问题,就是为什么要区分高程对其影响,因为我们在画点,线面时,很多时候,是期望点,线,面是贴地的

明显看到了鼠标点击位置和实际位置的偏移,这个时候,我们换成ray,来试试

Cesium根据经纬转为屏幕坐标

export function renderPopup(viewer: Cesium.Viewer, data: any) {
    const { x, y, xm, dw, lxdh, dz, height = 20 } = data;
    let dom = document.getElementById('iot-video-popup-wrap');
    if (!dom) {
        let div = document.createElement('div');
        div.id = 'iot-video-popup-wrap';
        viewer.container.appendChild(div);
        dom = div;
    }
    ReactDOM.render(<IOTVideoPopup />, dom);
    const postRender = () => {
        let position = new Cesium.Cartesian3.fromDegrees(x, y, height);//转笛卡尔坐标
       //转屏幕坐标
        let screenPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
        const { x: left, y: top } = screenPostion;
        if (left && top) {
            dom.style.left = left + 'px';
            dom.style.top = top + 'px';
        }
    }
    viewer.scene.postRender.addEventListener(postRender)
}

获取椭球上的点的经纬度（椭球上的点）

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(event) {
    let cartesian = viewer.camera.pickEllipsoid(event.position);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度，椭球面height永远等于0
    let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

获取地表面的点的经纬度（地形上的点）

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(event){
    let ray = viewer.camera.getPickRay(event.position);
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度
    let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

获取场景里的点的经纬度（模型上的点）

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (event) {
    let cartesian = viewer.scene.pickPosition(event.position);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度
    let coordinate = {
        longitude: Number(lng.toFixed(6)),
        latitude: Number(lat.toFixed(6)),
        altitude: Number(alt.toFixed(2))
    };
    console.log(coordinate);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);