初始化cesium鼠标事件handler
大家是否还记得我之前在初始化cesium地图的时候，里面有一行代码
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);这行代码就是初始化cesium地图鼠标事件的，可能都不记得了，那简单的回顾一下。
function cesiumMapInit() { //初始化cesium三维地球 Cesium.Ion.defaultAccessToken ="xxxxxxxxxxxx"; viewer = new Cesium.Viewer("cesiumContainer", {地图初始化参数}); //初始化handler handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); }简单运用鼠标事件
在地图图斑点击、地块信息查询、图标点击、地图绘制等等都需要用到鼠标事件，那在初始化之后，如何运用呢？
注册鼠标左键
handler.setInputAction((movement) => {}, Cesium.ScreenSpaceEventType.LEFT_CLICK);注册鼠标右键
handler.setInputAction((movement) => {}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);注册左键双击
handler.setInputAction((movement) => {}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);注册鼠标移动事件
handler.setInputAction((movement) => {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);以上是较为常用的几个鼠标事件，除此之外还有
| 事件 | 说明 |
|---|---|
LEFT_CLICK | 左键单击 |
LEFT_DOUBLE_CLICK | 左键双击 |
LEFT_DOWN | 左键按下 |
LEFT_UP | 左键抬起 |
RIGHT_CLICK | 右键单击 |
RIGHT_DOWN | 右键按下 |
RIGHT_UP | 右键抬起 |
MIDDLE_CLICK | 中键单击 |
MOUSE_MOVE | 鼠标移动 |
WHEEL | 鼠标滚轮 |
具体实例
以鼠标左键为例，比如要查看鼠标位置的经纬度，那么就可以这样写
handler.setInputAction((movement) => { //注册左键点击事件 //获取点击坐标 let cartesian = viewer.scene.camera.pickEllipsoid( movement.position, viewer.scene.globe.ellipsoid ); if (cartesian) { let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian); //将弧度转为度的十进制度表示 let lng = Cesium.Math.toDegrees(cartographic.longitude); let lat = Cesium.Math.toDegrees(cartographic.latitude); console.log(lng, lat); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);这样就可以通过鼠标左键点击地图的某个位置来获取此位置的经纬度信息。
比如地图上加载了一些模型，要通过鼠标点击获取模型信息，就可以这样写
handler.setInputAction((movement) => { //注册左键点击事件 //获取点击模型 let pick = viewer.scene.pick(movement.position); if (Cesium.defined(pick) && pick.id) { let c = new Cesium.Cartesian2( movement.position.x, movement.position.y ); this.name = pick.id.name; } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);比如想要获取图层上某一点的信息，那么就需要借助wms图层的请求方法，可以这样写
handler.setInputAction((movement) => { //注册左键点击事件 let cartesian = viewer.scene.camera.pickEllipsoid( movement.position, viewer.scene.globe.ellipsoid ); if (cartesian) { let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic( cartesian ); //将弧度转为度的十进制度表示 let lng = Cesium.Math.toDegrees(cartographic.longitude); let lat = Cesium.Math.toDegrees(cartographic.latitude); let bbox = getBBox(lng, lat); let layerName = "你的图层名称"; // 模拟Geoserver的点击事件 this.api.getMapInfo( { query_layers: layerName, layers: layerName, bbox: bbox, }).then(res => { if (res.features) { // 获取最后一条数据 let data = res.features[0].properties; } else { } }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);其中的getBBox、getMapInfo 的相关写法其实之前的文章中已经给出过，这里再attach一份
function getMapInfo(params) { params.service = "WMS"; params.version = "1.1.1"; params.request = "GetFeatureInfo"; params.transparent = true; params.exceptions = "application/vnd.ogc.se_inimage"; params.info_format = "application/json"; params.feature_count = 50; params.x = 50; params.y = 50; params.srs = "EPSG:4326"; params.width = 101; params.height = 101; params.format = "image/png"; return get("/geoserver/wms", params); } function getBBox(lng, lat) { var lng1 = lng - 0.000332; var lng2 = lng + 0.000332; var lat1 = lat - 0.000332; var lat2 = lat + 0.000332; var bbox = lng1.toFixed(6) + "," + lat1.toFixed(6) + "," + lng2.toFixed(6) + "," + lat2.toFixed(6); return bbox; }鼠标事件销毁
在页面结束的时候进行组件销毁，防止内存泄漏
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); // 全部清空 handler.destroy();
