需求場景：boss想針對分子公司進行統一展示，有可能在地圖上統一添加、移除、統一調整圖示等操作。正常做法可以采用周遊法，去循環所有的marker，批量操作。此時，可以采用layerGroup的方式，将所有分子公司存放在一個layer中，通過分組，可以批量操作存放在layerGroup中的所有元素，本文将重點闡述如何在Leaflet中使用layerGroup進行統一管理。
官方描述：
一、定義map操作對象
var mymap = 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: new L.Transformation(1 / 180, 1, -1 / 180, 0.5), scale: function (zoom) { return 256 * Math.pow(2, zoom - 1); } });
二、建立layerGroup
var cities = L.layerGroup();
自定義marker圖示
var flagIcon = 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添加到地圖上
var overlays = { "分公司": cities };
L.control.layers([],overlays).addTo(mymap);
四、綜合展示
在地圖中展示了底圖和标簽底圖，展示頁面右上角将分子公司作為一個layerGroup進行統一展示，通過勾選分子公司複選框，可以在地圖上統一顯示，不勾選可以統一隐藏分子公司，以此達到批量操作的效果。操作互動示意圖如下所示：
預設首頁
顯示分公司
五、總結
通過本文可學習在LeafLet中如何對marker進行分組批量管理，可以提供一種可行的統一管理機制，并提供了完整的操作效果示意圖和關鍵代碼。