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

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

背景

从前面的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;
    }
}

测试

在任意位置单击鼠标右键效果：

使用上述坐标定位效果：

小结

通过右键拾取坐标功能，极大方便采集不同位置的坐标。

代码

文中列出了主要的代码片段，另有相关的工程demo，已上传到github仓库。因不定时更新，代码不一定与文中严格对应，以代码仓库为准。如使用，请自行根据实际情况修改。

仓库地址：https://github.com/latelee/mapdemo 。

本文demo文件：100.综合示例.html、utils.js，其它依赖组件文件。