Leaflet中使用layerGroup图层组实现图层切换
場景
Vue+Leaflet實(shí)現(xiàn)加載OSM顯示地圖：
Vue+Leaflet實(shí)現(xiàn)加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
Vue+Leaflet實(shí)現(xiàn)加載Stamen顯示地圖：
Vue+Leaflet實(shí)現(xiàn)加載Stamen顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
參考上面實(shí)現(xiàn)的效果，如果要實(shí)現(xiàn)切換地圖圖層，以及控制標(biāo)記圖層整個(gè)所有標(biāo)記的marker顯示與隱藏怎么弄。
leaflet官方提供了組件與教程，可以通過LayerGroup去存儲并控制整個(gè)marker的顯示與隱藏。
以及LayerControl實(shí)現(xiàn)地圖圖層切換功能。
官方教程：
Layer Groups and Layers Control - Leaflet - a JavaScript library for interactive maps
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質(zhì)_CSDN博客-C#,SpringBoot,架構(gòu)之路領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、聲明layerGroup，圖層組，用來存儲城市標(biāo)記marker
??????? //聲明圖層組，存儲城市標(biāo)記markervar cities = L.layerGroup();2、聲明兩個(gè)城市的marker并添加進(jìn)圖層組
??????? //聲明兩個(gè)城市marker并添加進(jìn)圖層組var linyi = L.marker([36.01, 120.24]).bindPopup('這里屬于青島').addTo(cities);var qingdao = L.marker([35.51, 117.92]).bindPopup('這里屬于臨沂').addTo(cities);3、聲明兩個(gè)地圖圖層
?//聲明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、新建圖層空間的數(shù)據(jù)源
??????? //新建圖層控件的數(shù)據(jù)源-地圖var baseLayers = {'osm地圖': osmLayer,'stamen地圖': stamenLayer};新建圖層控件的數(shù)據(jù)源-城市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">//聲明圖層組，存儲城市標(biāo)記markervar cities = L.layerGroup();//聲明兩個(gè)城市marker并添加進(jìn)圖層組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]});//新建圖層控件的數(shù)據(jù)源-地圖var baseLayers = {'osm地圖': osmLayer,'stamen地圖': stamenLayer};新建圖層控件的數(shù)據(jù)源-城市var overlays = {'城市': cities};//新建圖層控件并添加到地圖var layerControl = L.control.layers(baseLayers, overlays).addTo(map);</script> </body></html>?8、效果
?
總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用layerGroup图层组实现图层切换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Leaflet中自定义marker的ic
- 下一篇： Leaflet中使用markerClus