場景

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 在mapbox中指定圖層層級例如讓標點置於最上方 leaflet 根據縮放級別控制圖層的顯示 Leaflet中使用layerGroup圖層組實現圖層切換 Leaflet中添加的不同圖層樣式圖標 leaflet圖層管理，圖層組 leaflet疊加圖片圖層 Leaflet02各種圖層圖例 Leaflet添加圖片圖層：ImageOverlay leaflet結合geoserver利用WFS服務實現圖層新增功能(附源碼下載) arcgis for javascript之ArcGISDynamicMapServiceLayer圖層控制的實現