Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基礎上，怎樣使用Leaflet.contextmenu插件實現地圖上顯示右鍵菜單效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、插件地址
GitHub - aratcliffe/Leaflet.contextmenu: A context menu for Leaflet.
2、下載源碼，引入所需要的leaflet.contextmenu.js文件和放大和縮小的圖標文件zoom-in.png和zoom-out.png
3、修改代碼中顯示放大縮小圖片路徑地址
?4、完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet實現鼠標右鍵菜單</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}.leaflet-contextmenu {display: none;box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);-webkit-border-radius: 4px;border-radius: 4px;padding: 4px 0;background-color: #fff;cursor: default;-webkit-user-select: none;-moz-user-select: none;user-select: none;}.leaflet-contextmenu a.leaflet-contextmenu-item {display: block;color: #222;font-size: 12px;line-height: 20px;text-decoration: none;padding: 0 12px;border-top: 1px solid transparent;border-bottom: 1px solid transparent;cursor: default;outline: none;}.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {opacity: 0.5;}.leaflet-contextmenu a.leaflet-contextmenu-item.over {background-color: #f4f4f4;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;}.leaflet-contextmenu a.leaflet-contextmenu-item-disabled.over {background-color: inherit;border-top: 1px solid transparent;border-bottom: 1px solid transparent;}.leaflet-contextmenu-icon {margin: 2px 8px 0 0;width: 16px;height: 16px;float: left;border: 0;}.leaflet-contextmenu-separator {border-bottom: 1px solid #ccc;margin: 5px 0;}</style> </head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/leaflet.contextmenu.js"></script><script type="text/javascript">var map = L.map('map', {contextmenu: true,contextmenuWidth: 140,contextmenuItems: [{text: '顯示坐標',callback: showCoordinates}, {text: '作為地圖中心',callback: centerMap}, '-', {text: '地圖放大',icon: './icon/zoom-in.png',callback: zoomIn}, {text: '地圖縮小',icon: './icon/zoom-out.png',callback: zoomOut}]}).setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);function showCoordinates(e) {alert(e.latlng);}function centerMap(e) {map.panTo(e.latlng);}function zoomIn(e) {map.zoomIn();}function zoomOut(e) {map.zoomOut();}</script> </body></html>?總結
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用awesome-ma
- 下一篇： Leaflet中使用leaflet-ci