地图点击事件
1.构造方法：
const mapEvents = new MchCesium.CesiumMapEvent(viewer);
2.参数说明：
viewer：Cesium创建的view实例。
3.on开启点击事件
mapEvents.on(eventType, callback);
参数说明：
eventType{string} 事件类型（click左键点击，rightclick右键点击，dblclick双击）
callback 回调函数
4.off关闭点击事件
mapEvents.off(eventType, callback);
参数说明：
eventType{string} 事件类型（click左键点击，rightclick右键点击，dblclick双击）
callback 移除回调函数
5.代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content="cesium开发加载地图点击事件" /> <meta name="keywords" content="microbee-http,软件开发框架,cesium,地图点击事件" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://mhc.ixiera.com/mhc/main.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script> <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script> <title>地图点击事件</title> <style> body { position: relative; } .btnbar { position: absolute; top: 10px; left: 10px; } button { margin: 10px; border: solid 1px #ccc; border-radius: 3px; padding: 5px 10px; } </style> </head> <body> <div id="cesiumContainer"></div> <div class="btnbar"> <button id="startEvent">开启点击事件</button> <button id="endEvent">关闭点击事件</button> </div> <script> // 初始化地图 const view3D = MchCesium.init('cesiumContainer'); const mapEvents = new MchCesium.CesiumMapEvent(MchCesium.viewer); // 定义点击回调 function showInfoClick(event) { console.log(event); console.log('点击位置:'+ event.longitude+','+event.latitude); } // 开启点击事件 document.getElementById('startEvent').onclick = function(e){ mapEvents.on('click', showInfoClick); } // 关闭点击事件 document.getElementById('endEvent').onclick = function(e){ mapEvents.off('click', showInfoClick); } </script> </body> </html>
6.效果展示：
Demo地址：
返回顶部
热线电话
微信
扫一扫