Cesium获取当前点击位置坐标

获取点击坐标一般情况下有三种,分别是获取椭球面上的坐标,或者开启地形图以后的坐标,以及拾取模型上面的坐标。
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;
}

大家可以根据情况使用其中的一种事件测试。

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值