Leaflet中使用layerGroup图层组实现图层切换
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用layerGroup图层组实现图层切换
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
Vue+Leaflet實現加載OSM顯示地圖：
Vue+Leaflet實現加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
Vue+Leaflet實現加載Stamen顯示地圖：
Vue+Leaflet實現加載Stamen顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
參考上面實現的效果，如果要實現切換地圖圖層，以及控制標記圖層整個所有標記的marker顯示與隱藏怎么弄。
leaflet官方提供了組件與教程，可以通過LayerGroup去存儲并控制整個marker的顯示與隱藏。
以及LayerControl實現地圖圖層切換功能。
官方教程：
Layer Groups and Layers Control - Leaflet - a JavaScript library for interactive maps
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、聲明layerGroup，圖層組，用來存儲城市標記marker
??????? //聲明圖層組，存儲城市標記markervar 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">//聲明圖層組，存儲城市標記markervar 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、效果
?
總結
以上是生活随笔為你收集整理的Leaflet中使用layerGroup图层组实现图层切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中自定义marker的ic
- 下一篇： Leaflet中使用markerClus