cesium 实战系列之鼠标拾取、点击、双击、悬浮、信息查询
初始化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();
