Leaflet中通過setZIndex實現圖層層級控制
阿新 • • 發佈：2022-04-06
場景
Leaflet中使用layerGroup圖層組實現圖層切換：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122326506
在上面實現圖層組切換的效果上，如果再一個地圖中新增一個或者多個layer,
怎樣控制圖層層級(優先順序)
圖層層級控制，即進行多個圖層的層級控制和管理。圖層層級越高，則越優先顯示。
在Leaflet中可以通過設定layer的setZIndex()方法改變圖層的索引。
注：
部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。
實現
1、設定圖層索引
//宣告osm地圖圖層 var osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "osm" }); osmLayer.setZIndex(10); osmLayer.addTo(map);
2、完整示例程式碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>leaflet圖層層級控制</title> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.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/[email protected]/dist/leaflet.js"></script> <script type="text/javascript" src="./js/L.Graticule.js"></script> <script type="text/javascript"> var map = L.map('map').setView([36.09, 120.35], 13); //宣告osm地圖圖層 var osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "osm" }); osmLayer.setZIndex(10); osmLayer.addTo(map); //宣告stamen地圖圖層 var stamenLayer = L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png", { attribution: "stamen" }); stamenLayer.setZIndex(1); stamenLayer.addTo(map); </script> </body> </html>