場景

Vue+Leaflet實現加載OSM顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394

Vue+Leaflet實現加載Stamen顯示地圖：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122318989

參考上面實現的效果，如果要實現切換地圖圖層，以及控制標記圖層整個所有標記的marker顯示與隱藏怎么弄。

leaflet官方提供了組件與教程，可以通過LayerGroup去存儲並控制整個marker的顯示與隱藏。

以及LayerControl實現地圖圖層切換功能。

官方教程：

https://leafletjs.com/examples/layers-control/

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、聲明layerGroup，圖層組，用來存儲城市標記marker

        //聲明圖層組，存儲城市標記marker
        var cities = L.layerGroup();

2、聲明兩個城市的marker並添加進圖層組

        //聲明兩個城市marker並添加進圖層組
        var linyi = L.marker([36.01, 120.24]).bindPopup('這里屬於青島').addTo(cities);
        var qingdao = L.marker([35.51, 117.92]).bindPopup('這里屬於臨沂').addTo(cities);

3、聲明兩個地圖圖層

        //聲明osm地圖圖層
        var osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "osm"
        });

        //聲明stamen地圖圖層
        var stamenLayer = L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png", {
            attribution: "stamen"
        });

4、聲明地圖並添加地圖圖層

        //聲明地圖並添加圖層
        var map = L.map('map', {
            center: [36.09, 120.35],
            zoom: 13,
            layers: [osmLayer, stamenLayer]
        });

5、新建圖層空間的數據源

        //新建圖層控件的數據源-地圖
        var baseLayers = {
            'osm地圖': osmLayer,
            'stamen地圖': stamenLayer
        };

        ////新建圖層控件的數據源-城市
        var overlays = {
            '城市': cities
        };

6、新建圖層控件並添加到地圖

        //新建圖層控件並添加到地圖
        var layerControl = L.control.layers(baseLayers, overlays).addTo(map);

7、完整代碼

<!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">
        //聲明圖層組，存儲城市標記marker
        var cities = L.layerGroup();

        //聲明兩個城市marker並添加進圖層組
        var linyi = L.marker([36.01, 120.24]).bindPopup('這里屬於青島').addTo(cities);
        var qingdao = L.marker([35.51, 117.92]).bindPopup('這里屬於臨沂').addTo(cities);

        //聲明osm地圖圖層
        var osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "osm"
        });

        //聲明stamen地圖圖層
        var stamenLayer = L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png", {
            attribution: "stamen"
        });

        //聲明地圖並添加圖層
        var map = L.map('map', {
            center: [36.09, 120.35],
            zoom: 13,
            layers: [osmLayer, stamenLayer]
        });

        //新建圖層控件的數據源-地圖
        var baseLayers = {
            'osm地圖': osmLayer,
            'stamen地圖': stamenLayer
        };

        ////新建圖層控件的數據源-城市
        var overlays = {
            '城市': cities
        };

        //新建圖層控件並添加到地圖
        var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
    </script>
</body>

</html>

8、效果

免責聲明！

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

猜您在找 leaflet圖層管理，圖層組 ArcGIS API for Javascript 圖層切換漸變效果實現 leaflet疊加圖片圖層學習cesium，關於圖層界面的切換 Leaflet中通過setZIndex實現圖層層級控制 leaflet 基本案例-圖層控件：基礎圖層+業務圖層 Leaflet02各種圖層圖例 Leaflet添加圖片圖層：ImageOverlay 立創EDA學習-走線、過孔、圖層切換、拐角八，Geoserver圖層組（/layergroups）