当前位置：首页 > news >正文

地图可视化实践录：leaflet学习之右键菜单

news 2025/11/7 17:38:08

本文在地图页面上实现右键菜单，并实现拾取坐标的事件。

背景

从前面的demo可以看到，经纬度需要自己找并输入，不是很方便。本文实现鼠标右键菜单功能，并实现拾取坐标的事件。

设计

在地图页面上单击鼠标右键，弹出菜单，有若干功能项，根据功能项响应事件。
读取当前鼠标所在经纬度，并显示。

实现

页面设计

右键菜单的css在<style></style>添加设置，具体如下：

/* 右键菜单样式 */.context-menu {position: absolute;z-index: 1000;background: white;border: 1px solid #ccc;border-radius: 5px;box-shadow: 2px 2px 5px rgba(0,0,0,0.2);padding: 0;display: none;width: 150px;transform: translate(-5px, -5px); /* 使菜单向左上方偏移 */}.context-menu ul {list-style: none;margin: 0;padding: 0;}.context-menu li {padding: 2px 15px;cursor: default; /* 菜单项也使用箭头光标 *//* border-bottom: 1px solid #eeee; */ /*不要横线*/transition: background 0.2s;font-size: 14px;}/* 分组分隔线 - 在第3项后添加较粗的分隔线 *//* .context-menu li:nth-child(3) {border-bottom: 2px solid #cccccc;}.context-menu li:nth-child(5) {border-bottom: 2px solid #cccccc;} */.context-menu li:last-child {border-bottom: none;}.context-menu li:hover {/* background: #efefef; */background: #f7f7f7;}

在body中添加右键菜单代码：

       ....<button onclick="clearMap()">清除图层</button><!-- 右键菜单 --><div id="context-menu" class="context-menu"><ul><li data-action="r-show-coords">显示经纬度</li></ul></div></div>
</body>

其中，响应r-show-coords

响应事件

在utils.js文件的showMap函数中设置右键菜单，并在click事件中添加菜单的事件处理。如下：

function showMap() {// ....// ------------ 右键事件 开始const contextMenu = document.getElementById('context-menu');let lastRClickEvt = null; // 改为保存事件对象mymap.on('contextmenu', function (e) {// / 阻止默认的右键菜单e.originalEvent.preventDefault();lastRClickEvt = e;// 显示自定义右键菜单contextMenu.style.display = 'block';contextMenu.style.left = (e.originalEvent.pageX - 3) + 'px';contextMenu.style.top = (e.originalEvent.pageY - 3) + 'px';}); // end of contextmenu// 单击事件  点击其他地方隐藏右键菜单mymap.on('click', function() {contextMenu.style.display = 'none';});// 处理菜单点击contextMenu.querySelectorAll('li').forEach(item => {item.addEventListener('click', function(e) {const action = this.getAttribute('data-action');handleRightClick(action, lastRClickEvt);contextMenu.style.display = 'none';});});// ------------ 右键事件 结束
}

其中，handleRightClick为具体事件命令的实现函数，当前实现功能如下：

// 右键具体命令实现
function handleRightClick(action, e) {if (!e || !e.latlng) return;var latlng = e.latlng.lng.toFixed(6) + "," + e.latlng.lat.toFixed(6)var zoom = mymap.getZoom()const output = document.getElementById('txtOutput');// 根据各命令响应switch(action) {case 'r-show-coords':output.value = `缩放等级: ${zoom} \r\n经纬度信息(经度, 纬度): ${latlng}`break;}
}