一、事件绑定介绍
二维里面地图上绑定事件的方式是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 版权协议,转载请附上原文出处链接和本声明。