Leaflet中使用NavBar插件实现导航(前进后退)效果
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用NavBar插件实现导航(前进后退)效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Leaflet快速入門與加載OSM顯示地圖：
Leaflet快速入門與加載OSM顯示地圖_霸道流氓氣質的博客-CSDN博客_leaflet教程
在上面實現加載地圖顯示的基礎上。
導航組件主要用于恢復地圖的視圖狀態，通過插件Leaflet.NavBar插件實現導航控件的加載顯示。
控件中的左箭頭表示返回上一次的視圖狀態
右箭頭表示返回下一次的視圖狀態
home鍵表示直接返回最初的視圖狀態
注：
博客：
霸道流氓氣質的博客_CSDN博客-C#,架構之路,SpringBoot領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、插件地址
GitHub - davidchouse/Leaflet.NavBar: Simple navigation toolbar for Leaflet.
將插件代碼下載，獲取到css、js和img文件
?
2、頁面中引入js、css并修改css中img路徑
<link rel="stylesheet" href="./css/Leaflet.NavBar.css" /><script type="text/javascript" src="./js/Leaflet.NavBar.js"></script>修改css中img的路徑，獲取將img文件夾放在默認的路徑下
?
3、控件使用
??????? //定義一個導航組件var navbar = L.control.navbar();//將導航組件添加進地圖map.addControl(navbar);?4、完整代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet-NavBar實現導航控件</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><link rel="stylesheet" href="./css/Leaflet.NavBar.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/Leaflet.NavBar.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//定義一個導航組件var navbar = L.control.navbar();//將導航組件添加進地圖map.addControl(navbar);</script> </body></html>?
?
總結
以上是生活随笔為你收集整理的Leaflet中使用NavBar插件实现导航(前进后退)效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue+Openlayers+Draw实
- 下一篇： Leaflet中实现添加比例尺控件与自定