Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880?
在上面的基礎上，怎樣使用插件實現放大鏡效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、插件地址
GitHub - bbecquet/Leaflet.MagnifyingGlass: A plugin to add a customizable magnifying glass tool to a Leaflet map.
2、下載源碼，引入所需要的leaflet.magnifyingglass.js文件，將css文件直接寫在html中，完整html代碼
? <!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-magnifying-glass {border-radius: 50%;border: 1px solid gray;box-shadow: 0 0 5px gray;position: absolute;overflow: hidden;-moz-box-sizing: border-box;box-sizing: border-box;}.leaflet-magnifying-glass>.leaflet-container {height: 100%;width: 100%;}/* Webkit-only workaround for the border-radius clipping bug, applied to the map container */.leaflet-magnifying-glass-webkit {border-radius: 50%;-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);}</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.magnifyingglass.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);var tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";L.tileLayer(tileUrl, {attribution: ''}).addTo(map);var magnifyingGlass = L.magnifyingGlass({zoomOffset: 3,layers: [L.tileLayer(tileUrl)]});map.addLayer(magnifyingGlass);// make the glass disappear on click...magnifyingGlass.on('click', function () {map.removeLayer(magnifyingGlass);})// ...and reappear on right clickmap.on('contextmenu', function (mouseEvt) {if (map.hasLayer(magnifyingGlass)) {return;}map.addLayer(magnifyingGlass);magnifyingGlass.setLatLng(mouseEvt.latlng);});</script> </body></html>?總結
以上是生活随笔為你收集整理的Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet-Mi
- 下一篇： Leaflet中使用leaflet.ea