12
2019
04

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;
}
« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。