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);//初始化图层显示与隐藏控件自动识别

发表评论

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...