Leaflet中通过setZIndex实现图层层级控制
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中通过setZIndex实现图层层级控制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
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/leaflet@1.7.1/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/leaflet@1.7.1/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>?總結
以上是生活随笔為你收集整理的Leaflet中通过setZIndex实现图层层级控制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中使用Leaflet.Gr
- 下一篇： Leaflet中使用Leaflet.dr