将传单标记群集添加到图层吗？

时间：2018-12-12 16:39:02

标签： javascript leaflet

我有一张传单地图，其中的位置需要过滤到不同的组/层中。

  • 所有位置
  • 免费露营地
  • 道路通行营地
  • Leanto露营地
  • 付费RSVP露营地
  • 独木舟携带
  • 发射船
  • 山峰

我的群集现在可以正常工作，但是我不确定如何将群集绑定到图层，因此当我检查图层时，它只会将它们显示为群集。我的当前地图可以在这里查看：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);

0 个答案:

没有答案
相关问题
最新问题