我有一张传单地图，其中的位置需要过滤到不同的组/层中。
我的群集现在可以正常工作，但是我不确定如何将群集绑定到图层，因此当我检查图层时，它只会将它们显示为群集。我的当前地图可以在这里查看：https://adkproject.com/leaflet-map/map.html如果单击图层选项，它将显示聚类以及标记中的图标。 （不好看）。
我研究了两个插件-Leaflet.FeatureGroup.SubGroup和Leaflet.MarkerCluster.LayerSupport，但不知道哪个插件最好使用。我都尝试过，但不确定如何实现代码。我刚接触传单。
如果有人可以向我提供我应该使用的代码，那将非常有帮助！
这是我的代码（请参阅底部，其中包括层和群集代码，因为其中不能包含所有内容，因此我将展示其中的一部分。）：
var map = L.map('map').setView([44.325254,-74.375112],12);
L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg', {
attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.'
}).addTo(map);
var credctrl = L.controlCredits({
image: "img/kurt.png",
link: "https://paypal.me/kurtvonweisenstein",
text: "ADK Project built by Kurt Von<br/>Click to donate and help support the project!"
}).addTo(map);
var iconCampsite = L.icon({
iconUrl: 'img/camp-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconLeanto = L.icon({
iconUrl: 'img/leanto-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconSwimming = L.icon({
iconUrl: 'img/swimming-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconParking = L.icon({
iconUrl: 'img/parking-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconBoat = L.icon({
iconUrl: 'img/boat-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconPicnic = L.icon({
iconUrl: 'img/picnic-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconCarry = L.icon({
iconUrl: 'img/carry-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconMountain = L.icon({
iconUrl: 'img/mountain-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconChurch = L.icon({
iconUrl: 'img/church-icon.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
var iconStregis = L.icon({
iconUrl: 'img/stregisoutfitters.png',
iconSize: [25, 25],
iconAnchor: [20, 20],
popupAnchor: [-4, -30]
});
L.control.locate({
strings: {
title: "Show icon current location."
}
}).addTo(map);
//Floodwood Road Campsites
var fwood10 = L.marker([44.340510, -74.381034],{icon:iconCampsite})
.bindPopup('<img src="img/fwood10.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site10.html" target="_blank">Floodwood Road - Site 10</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood11 = L.marker([44.338777, -74.400156],{icon:iconCampsite})
.bindPopup('<img src="img/fwood11.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site11.html" target="_blank">Floodwood Road - Site 11</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood14 = L.marker([44.340836, -74.413356],{icon:iconCampsite})
.bindPopup('<img src="img/fwood14.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site14.html" target="_blank">Floodwood Road - Site 14</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood8 = L.marker([44.340083, -74.351763],{icon:iconCampsite})
.bindPopup('<img src="img/fwood8.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site8.html" target="_blank">Floodwood Road - Site 8</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood7 = L.marker([44.339972, -74.351506],{icon:iconCampsite})
.bindPopup('<img src="img/fwood7.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site7.html" target="_blank">Floodwood Road - Site 7</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood6 = L.marker([44.340160, -74.351195],{icon:iconCampsite})
.bindPopup('<img src="img/fwood6.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site6.html" target="_blank">Floodwood Road - Site 6</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood5 = L.marker([44.339845, -74.350283],{icon:iconCampsite})
.bindPopup('<img src="img/fwood5.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site5.html" target="_blank">Floodwood Road - Site 5</a></h3><p>Free, Off-Grid, Road Access</p>', {minWidth: 250});
var fwood4 = L.marker([44.339289, -74.349875],{icon:iconCampsite})
.bindPopup('<img src="img/fwood4.jpg"><h3><a href="https://adkproject.com/floodwoodroad/site4.html" target="_blank">Floodwood Road - Site 4</a></h3><p>Boat Access, Free, Off-Grid, Road Access</p>', {minWidth: 250});
var eastpinelaunch = L.marker([44.339606, -74.411986],{icon:iconBoat})
.bindPopup('<img src="img/eastpinelaunch.jpg"><h3><a href="https://adkproject.com/floodwoodroad/eastpinelaunch.html" target="_blank">Floodwood Road / East Pine Launch</a></h3><p>Small parking area with boat access to East Pine Pond.</p>', {minWidth: 250});
var eastpine1 = L.marker([44.338643, -74.412490],{icon:iconCampsite})
.bindPopup('<img src="img/eastpine1.jpg"><h3><a href="https://adkproject.com/floodwoodroad/eastpine1.html" target="_blank">East Pine Campsite</a></h3><p>Boat Access, Free, Off-Grid, Road Access</p>', {minWidth: 250});
//Hoel Pond
var hoel1 = L.marker([44.352740, -74.350884],{icon:iconCampsite})
.bindPopup('<img src="img/hoel1.jpg"><h3><a href="https://adkproject.com/hoelpond/site1.html" target="_blank">Hoel Pond - Site 1</a></h3><p>Boat Access, First Come First Serve, Free, Off-Grid</p>', {minWidth: 250});
var hoel2 = L.marker([44.353400, -74.352611],{icon:iconCampsite})
.bindPopup('<img src="img/hoel2.jpg"><h3><a href="https://adkproject.com/hoelpond/site2.html" target="_blank">Hoel Pond - Site 2</a></h3><p>Boat Access, First Come First Serve, Free, Off-Grid</p>', {minWidth: 250});
var hoel3 = L.marker([44.348493, -74.357275],{icon:iconCampsite})
.bindPopup('<img src="img/hoel3.jpg"><h3><a href="https://adkproject.com/hoelpond/site3.html" target="_blank">Hoel Pond - Site 3</a></h3><p>Boat Access, Trail Access, First Come First Serve, Free, Off-Grid</p>', {minWidth: 250});
var hoelboat = L.marker([44.346965, -74.344553],{icon:iconBoat})
.bindPopup('<img src="img/hoelboat.jpg"><h3><a href="https://adkproject.com/hoelpond/hoelboatlaunch.html" target="_blank">Hoel Pond Boat Launch / Parking</a></h3><p>Launch small boats only. Launch can be accessed from Hoel Pond Road. Follow gravel road along the golf course.</p>', {minWidth: 250});
//Types of Locations
//FREE CAMPSITES
var freesites = L.layerGroup([fwood10, fwood11, fwood14, fcp16, fcp17, fcp18, fcp19, fcp20, fcp24, fcp25, fcp22, fcp23, fcp28, fcp27, fcp26, fcp1, fcp2,
fcp3, fcp4, fcp5, fcp6, fcp7, fcp8, fcp15, fcp9, fcp14, fcp10, fcp11, fcp12, fcp13, fcp21, usl20, usl19, usl18, usl16, usl9, usl15, usl14, usl13, usl10,
usl8, usl7, usl11, usl1, usl6, usl5, usl4, usl2, usl3, fwood8, fwood7, fwood6, fwood5, fwood4, eastpine1, hoel1, hoel2, hoel3, slang1, slang2, slang3, westpinecampsite,
longpond14, longpond15, longpond13, littlesquare1, littlesquare2, littlesquare3, littlesquare4, littlesquare5, floodwoodpond1, floodwoodpond2, floodwoodpond3,
floodwoodpond4, floodwoodpond5, floodwoodpond6, floodwoodpond8, floodwoodpond7, floodwoodpond9, floodwoodpond10, floodwoodpond11, stoneycreek1, stoneycreek2, stoneycreek3,
stoneycreek4, stoneycreek5, stoneycreek6, stoneycreek7, horseshoe1, horseshoe2, horseshoe3, horseshoe4, polliwog1, polliwog2, polliwog3, polliwog4, polliwog5, floodwoodpolliwog1,
floodwoodpolliwog2
]);
//PAID CAMPSITES
var paidsites = L.layerGroup([middlesaranac68,
middlesaranac69, middlesaranac70, middlesaranac67, middlesaranac63, middlesaranac72, middlesaranac73, middlesaranac74,
middlesaranac75, middlesaranac76, middlesaranac77, middlesaranac66, middlesaranac78, middlesaranac79, middlesaranac80,
middlesaranac81, middlesaranac82, middlesaranac83, middlesaranac84, middlesaranac85, middlesaranac86, middlesaranac87,
lsl2, lsl3, lsl4, lsl5, lsl6, lsl7, lsl8, lsl9, lsl10, lsl11, lsl12, lsl13, lsl14, lsl15, lsl16
]);
//Canoe Carries
var canoecarry = L.layerGroup([fcptogreen, fcptopolliwog, fcptofish, wellertoupper, uslbartletcarry, usltoweller, carrytowestpinepond,
carrytoeastpinepond, longtoslang, longtofloodwood, greentofollensby, floodwoodtomiddle, stoneycreektouppersaranac, horseshoetofollensby,
horseshoetolittlepolliwog, littlepolliwogtohorseshoe, littlepolliwogtopolliwog, polliwogtohoel, polliwogtomiddle, polliwogtofollensby, polliwogtolittlepolliwog
]);
var mountainsummits = L.layerGroup([mtjo, roaringbrookfalls, mtmarcy
]);
var leanto = L.layerGroup([fcp15, middlesaranac63, middlesaranac81, middlesaranac87, usl13, lsl2
]);
//ROAD ACCESS
var roadaccess = L.layerGroup([fwood10, fwood11, fwood14, fwood8, fwood7, fwood6, fwood5, fwood4, eastpine1, westpinecampsite,
floodwoodpond1, floodwoodpolliwog1, floodwoodpolliwog2
]);
//BOAT LAUNCHES
var boatlaunch = L.layerGroup([lauchUpperSaranac1, lauchUpperSaranac2, fcpboat1, fcpboat2, eastpinelaunch, hoelboat, floodwoodlaunch, stoneycreeklaunch,
lowersaranaclaunch
]);
//ALL LOCATIONS
var allsites = L.layerGroup([fwood10, fwood11, fwood14, lauchUpperSaranac1, lauchUpperSaranac2, fcpboat1, fcp16,
fcp17, fcp18, fcp19, fcp20, fcp24, fcp25, fcp22, fcp23, fcp28, fcp27, fcp26, fcp1, fcp2, fcp3, fcp4, fcp5, fcp6, fcp7, fcp8,
fcp15, fcp9, fcp14, fcp10, fcp11, fcp12, fcp13, fcptopolliwog, fcptogreen, fcpboat2, fcptofish, fcp21, fcpisland, middlesaranac68,
middlesaranac69, middlesaranac70, middlesaranac67, middlesaranac63, middlesaranac72, middlesaranac73, middlesaranac74, middlesaranac75,
middlesaranac76, middlesaranac77, middlesaranac66, middlesaranac78, middlesaranac79, middlesaranac80, middlesaranac81, middlesaranac82,
middlesaranac83, middlesaranac84, middlesaranac85, middlesaranac86, middlesaranac87, middlebeach, middleampersandparking, wellertoupper,
usl20, usl19, usl18, chapelisland, usl16, usl9, uslbartletcarry, usl15, usltoweller, usl14, usl13, usl8, usl10, usl7, usl11, usl1,
usl6, usl5, usl4, usl2, usl3, tomiconsrock, adkloj, adklojbeach, mtjo, fwood8, fwood7, fwood6, fwood5, fwood4, eastpinelaunch, eastpine1,
hoel1, hoel2, hoel3, hoelboat, slang1, slang2, slang3, carrytowestpinepond, carrytoeastpinepond, westpinecampsite, longpond14, longpond15,
longtoslang, longpond13, longtofloodwood, giantrockyparking, roaringbrookfalls, greentofollensby, littlesquare1, littlesquare2,
littlesquare3, littlesquare4, littlesquare5, floodwoodpond1, floodwoodpond2, floodwoodpond3, floodwoodpond4, floodwoodpond5,
floodwoodpond6, floodwoodpond7, floodwoodpond8, floodwoodpond9, floodwoodpond10, floodwoodtomiddle, floodwoodbeach, floodwoodfishcreek,
floodwoodlaunch, floodwoodpond11, stregisoutfitters, fishcreek1, fishcreek2, fishcreek3, stoneycreekpond, stoneycreektouppersaranac, stoneycreeklaunch,
stoneycreek1, stoneycreek2, stoneycreek3, stoneycreek4, stoneycreek5, stoneycreek6, stoneycreek7, lslpicnic, lowersaranaclaunch, lsl2, lsl3,
lsl4, lsl5, lsl6, lsl7, lsl8, lsl9, lsl10, lsl11, lsl12, lsl13, lsl14, lsl15, lsl16, horseshoe1, horseshoe2, horseshoe3, horseshoe4, horseshoepicnic,
horseshoetofollensby, horseshoetolittlepolliwog, littlepolliwogtohorseshoe, littlepolliwogtopolliwog, polliwog1, polliwog2, polliwog3, polliwog4, polliwog5,
floodwoodpolliwog1, floodwoodpolliwog2, polliwogtohoel, polliwogtomiddle, polliwogtofollensby, polliwogtolittlepolliwog, mtmarcy
]);
//Map Layers
var overlayMaps = {
"All Locations": allsites,
"Free Campsites": freesites,
"Road Access Campsites": roadaccess,
"Leanto Campsites": leanto,
"Paid RSVP Campsites": paidsites,
"Canoe Carries": canoecarry,
"Boat Launch": boatlaunch,
"Mountain Summits": mountainsummits,
};
L.control.layers(overlayMaps).addTo(map);
// Marker Clusters
var clusters = L.markerClusterGroup({
showCoverageOnHover: false,
spiderfyOnMaxZoom: false,
disableClusteringAtZoom: 14
});
clusters.addLayer(allsites);
map.addLayer(clusters);