需求场景:boss想针对分子公司进行统一展示,有可能在地图上统一添加、移除、统一调整图标等操作。常规做法可以采用遍历法,去循环所有的marker,批量操作。此时,可以采用layerGroup的方式,将所有分子公司存放在一个layer中,通过分组,可以批量操作存放在layerGroup中的所有元素,本文将重点阐述如何在Leaflet中使用layerGroup进行统一管理。
官方描述:
一、定义map操作对象
varmymap=L.map('mapid',{crs:L.CRS.CustomEPSG4326}).setView([30.673828, 113.554688], 5);
其中,投影方式具体转换可参考
L.CRS.CustomEPSG4326=L.extend({}, L.CRS.Earth, { code: 'EPSG:4326', projection: L.Projection.LonLat, transformation: newL.Transformation(1/180, 1, -1/180, 0.5), scale: function (zoom) { return256*Math.pow(2, zoom-1); } });
二、创建layerGroup
varcities=L.layerGroup();
自定义marker图标
varflagIcon=L.icon({ iconUrl: 'images/flag.png', iconSize: [25, 25], iconAnchor: [25, 25], popupAnchor: [-13, -26] });
将marker添加到layerGroup
L.marker([35.947266, 118.212891],{icon:flagIcon,title:'山东分公司'}).bindPopup('山东分公司').addTo(cities), L.marker([35.925293, 103.842773],{icon:flagIcon,title:'甘肃分公司'}).bindPopup('甘肃分公司').addTo(cities), L.marker([26.564941, 106.699219],{icon:flagIcon,title:'贵阳分公司'}).bindPopup('贵阳分公司').addTo(cities), L.marker([36.606445, 109.522705],{icon:flagIcon,title:'延安分公司'}).bindPopup('延安分公司').addTo(cities);
三、将layerGroup添加到地图上
varoverlays= { "分公司": cities };
L.control.layers([],overlays).addTo(mymap);
四、综合展示
默认首页
显示分公司
五、总结
通过本文可学习在LeafLet中如何对marker进行分组批量管理,可以提供一种可行的统一管理机制,并提供了完整的操作效果示意图和关键代码。