Cesium获取当前点击位置坐标

原创

暮志未晚 2023-01-30 16:33:43 博主文章分类：cesium ©著作权

©著作权归作者所有：来自51CTO博客作者暮志未晚的原创作品，请联系作者获取转载授权，否则将追究法律责任

获取点击坐标一般情况下有三种，分别是获取椭球面上的坐标，或者开启地形图以后的坐标，以及拾取模型上面的坐标。
ps：如果当前点无法获取到坐标，会返回undefined。

下面提供三种情况下的点击事件代码：

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

//todo：在显示地形情况下点击创建点
handler.setInputAction(function (event) {
    if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
        console.log('当前浏览器不支持地形图');
        return;
    }
    var earthPosition = viewer.scene.pickPosition(event.position); //获取到地形图上面的坐标
    if (Cesium.defined(earthPosition)) {
        createPoint(earthPosition); //调用创建点的方法
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

//todo：在椭球下点击创建点
handler.setInputAction(function (event) {
    var earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid); //返回在椭球上面的点的坐标
    if (Cesium.defined(earthPosition)) {
        createPoint(earthPosition); //在点击位置添加一个点
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

//todo：拾取模型表面的位置
handler.setInputAction(function (evt) {
    var scene = viewer.scene;
    var pickedObject = scene.pick(evt.position); //判断是否拾取到模型
    if (scene.pickPositionSupported && Cesium.defined(pickedObject)) {
        var cartesian = viewer.scene.pickPosition(evt.position);
        if (Cesium.defined(cartesian)) {
            var cartographic = Cesium.Cartographic.fromCartesian(cartesian); //根据笛卡尔坐标获取到弧度
            var lng = Cesium.Math.toDegrees(cartographic.longitude); //根据弧度获取到经度
            var lat = Cesium.Math.toDegrees(cartographic.latitude); //根据弧度获取到纬度
            var height = cartographic.height;//模型高度
            annotate(cartesian, lng, lat, height);
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

var annotations = viewer.scene.primitives.add(new Cesium.LabelCollection());

//信息提示框
function annotate(cartesian, lng, lat, height) {
    createPoint(cartesian);
    annotations.add({
        position: cartesian,
        text:
            'Lon: ' + lng.toFixed(5) + '\u00B0' +
            '\nLat: ' + lat.toFixed(5) + '\u00B0' +
            "\nheight: " + height.toFixed(2) + "m",
        showBackground: true,
        font: '14px monospace',
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY
    });
}

//添加点
function createPoint(worldPosition) {
    var point = viewer.entities.add({
        position: worldPosition,
        point: {
            color: Cesium.Color.WHITE,
            pixelSize: 5
        }
    });
    return point;
}