场景
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>
博客园：
https://www.cnblogs.com/badaoliumangqizhi/
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
