leaflet图层管理,图层组
目录
leaflet图层管理,图层组
图层组
图层组指多个图层组织成一个图层进行统一管理
var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');
//不需要按照一个marker来管理,可以统一管理,add remove添加删除操作
var cities = L.layerGroup([littleton, denver, aurora, golden]);
图层控制
图层分为两种:
基本图层
地图底图,多个底图只能显示一个
覆盖物
叠加到地图上的其他要素,marker、line等其他overlays
//基本图层
var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
streets = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});
//添加底图和图层组
var map = L.map('map', { center: [39.73, -104.99], zoom: 10, layers: [grayscale, cities] });
//定义图层对象
var baseMaps = { "<span style='color: gray'>Grayscale</span>": grayscale, //前面是控件显示的图层名称支持html
"Streets": streets }; //
var overlayMaps = { "Cities": cities };
//初始化图层控制控件
L.control.layers(baseMaps, overlayMaps).addTo(map);//参数为要管理的图层及图层组,不需要管理的无需添加
//添加到地图
L.control.layers(baseMaps, overlayMaps).addTo(map);//初始化图层显示与隐藏控件自动识别