Leaflet中使用Leaflet-MiniMap插件实现小地图效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用Leaflet-MiniMap插件实现小地图效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基礎(chǔ)上，怎樣使用插件實現(xiàn)小地圖效果如下
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。
實現(xiàn)
1、插件地址
https://github.com/Norkart/Leaflet-MiniMap
2、注意這里的官方說明
不要將小地圖組件添加到主地圖的圖層上，需要單獨聲明一個圖層。
3、下載源碼引入所需的js、css、image文件
4、修改css中圖片的路徑
5、完整示例代碼
? <!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" /><link rel="stylesheet" href="./css/Control.MiniMap.min.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</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/Control.MiniMap.min.js"></script><script type="text/javascript">var map = L.map('map');var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';var osmAttrib='Map data © OpenStreetMap contributors';var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});map.addLayer(osm);map.setView(new L.LatLng(36.09, 120.35),10);//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controlsvar osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);</script> </body></html>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用Leaflet-MiniMap插件实现小地图效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用leaflet-si
- 下一篇： Leaflet中使用Leaflet.Ma