cesium绑定点击事件,并获取并点击坐标实现方法

  • Post author:
  • Post category:其他


一、事件绑定介绍

二维里面地图上绑定事件的方式是on:map.on(‘mousedown’, function (e) {

console.log(e);

});


在三维里面没有 map,它的事件绑定在Viewer上,首先创建handler 。


this.handler = new Cesium.ScreenSpaceEventHandler(gViewer.scene.canvas);

上述代码创建了一个屏幕控制实例,控制cesium的canvas ;  gViewer 是项目中的viewer;

Cesium官网里面ScreenSpaceEventHandler提供了五个方法,分别是:



setInputAction (action, type, modifier );



removeInputAction (type, modifier );

getInputAction (type, modifier )

destroy ();

isDestroyed () → Boolean;

加粗的两个方法是项目中常用的,下面列上用法:type表示绑定/解绑事件种类,isAdd用于判断绑定/解绑;

// 操作地图事件
            handlerCesium (type,isAdd = true) {
                if(isAdd) {
                    switch (type) {
                        case "onDown":
                            _this.handler.setInputAction(_this.onDown,Cesium.ScreenSpaceEventType.LEFT_DOWN);
                            break;
                        case "onMove":
                            _this.handler.setInputAction(_this.onMove,Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                            break;
                        case "onUp":
                            _this.handler.setInputAction(_this.onUp,Cesium.ScreenSpaceEventType.LEFT_UP);
                            break;
                    }
                } else {
                    switch (type) {
                        case "onDown":
                            _this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN);
                            break;
                        case "onMove":
                            _this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                            break;
                        case "onUp":
                            _this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);
                            break;
                    }
                }
            },

二、获取点击坐标

以onDown事件举例:

onDown (movement) {
    let point;
    let windowPosition = gViewer.camera.getPickRay(movement.position); 
    let cartesionCordinations = gViewer.scene.globe.pick(windowPosition,gViewer.scene);
    point = mapDraw3D.posiTransform(cartesionCordinations);
},

三、posiTransform是把点从笛卡尔坐标转为地理数据类型的经纬度

posiTransform: function (posi) {
    //转坐标
    if (posi) {
        var ellipsoid = gViewer.scene.globe.ellipsoid;
        var cartographic = ellipsoid.cartesianToCartographic(posi);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var position = [lng, lat]
        return position
    }
},



版权声明:本文为qq_41590119原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。