问题
I'm here because I read this topic and this one
I'm looking for some help to use the SubGroup plugin.
I'm building a map like this
var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
});
then I'm adding code for custom markers, like this
var ccl18Icon = L.AwesomeMarkers.icon({
prefix: 'fa', //font awesome rather than bootstrap
iconColor: 'white',
markerColor: 'orange', // see colors above
icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
});
I add my map
var map = L.map('map')
.addLayer(cartoDb)
.setView([46.85, 2.3518], 6);
Then I create an OnEachFeature function, inside of which I get all my geoJson properties, and a "layer.on" function. Like this
function onEachFeature(feature, layer) {
var html = '';
if (feature.properties.Myfirstproperty) {
html += '<p class="myfirstproperty">' + feature.properties.Myfirstproperty+ '</p>';
}
(....more html)
layer.on('click', function() {
$('#layer_infos .fill').html(html);
if (L.Browser.mobile) {
$('#infos').addClass("slide");
$('#filters').removeClass('slide');
$('.hamburger').text('Sélect something').fadeIn();
}
})
I duplicate this part because I have two maps in tabs, only changing the id and class of elements
Then I get all data from geoJson file
var promise = $.getJSON("examen.json");
promise.then(function(data) {
var all = L.geoJson(data);
var ccl18 = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.Category == "ccl18";
},
onEachFeature: onEachFeature,
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: ccl18Icon
})
}
})
After all this code, I create click functions to show hide layer, depending on chekcbox filters, something like this.
$("#ccl18").click(function() {
if (this.checked) {
map.addLayer(ccl18)
map.fitBounds(allexamens.getBounds(), {
padding: [50, 50]
});
map.removeLayer(glucomarker)
} else {
map.removeLayer(ccl18)
}
});
I post all this code because I don't know if I can use the SubGroup plugin with my configuration. What I'm looking for, is to let user click on multiple checkbox filters and to cluster markers even if they are from different categories; For the moment, I can cluster each group separatly, but not different groups together. I saw this code, from the plugin author :
var parentGroup = L.markerClusterGroup().addTo(map);
var overlays = {};
for (var i = 1; i <= 5; i += 1) {
overlays['Group ' + i] = L.featureGroup.subGroup(
parentGroup,
getArrayOfMarkers()
).addTo(map);
}
L.control.layers(null, overlays, {
collapsed: false,
}).addTo(map);
function getArrayOfMarkers() {
var result = [];
for (var i = 0; i < 10; i += 1) {
result.push(L.marker();
}
return result;
}
but I don't understand how to implement it.. Does someone managed to make it work with geoJson data ? Any help would be appreciated !!
Thanks
回答1:
Ok finaly I found my solution.
I'm using markercluster plugin only.
When I get the geoJsonfile datas, I add the following
var promise = $.getJSON("examen.json");
var clusters = L.markerClusterGroup(); // a new cluster group for my first map
var clusterade = L.markerClusterGroup(); // a new cluster group for my second map
promise.then(function(data) {
In my click actions (checkbox filters) I add my layer to the cluster group, and not to the map directly, as I was doing before . Something like this :
$("#ccl18").click(function() {
if (this.checked) {
ccl18.addTo(clusters);
map.fitBounds(allexamens.getBounds(), {
padding: [50, 50]
});
} else {
clusters.removeLayer(ccl18);
map.fitBounds(allexamens.getBounds(), {
padding: [50, 50]
});
}
});
It's an if statement that says : "add layer to cluster if I click on the checkbox, otherwise remove layer". And I add a fitBounds to the parent layer which let me zoom-out from the cluster.
I add this code to all my checkbox actions.
Then, at the very end of my file, I juste add the clusters to the maps.
clusters.addTo(map);//my clusters for my first map
clusterade.addTo(map2);//my clusters for my second map
So now, when I check two checkbox, the cluster is shown on the map
And when I click on the cluster, I can clearly see my different markers.
回答2:
I continue my investigations...
I'm still trying with clustermarker plugin because I think it is possible like this
Just after calling my geoJson' data, I instanciate the L.markerClusterGroup, like this
var promise = $.getJSON("examen.json");
var clusters = L.markerClusterGroup(); // this is new
promise.then(function(data) {
Then inside each "onEachFeature" function, I place the following, so each layer is added to my clusters.
function onEachFeature(feature, layer) {
var html = '';
if (feature.properties.Myfirstproperty) {
html += '<p class="myfirstproperty">' + feature.properties.Myfirstproperty+ '</p>';
}
(....more html)
layer.on('click', function() {
$('#layer_infos .fill').html(html);
if (L.Browser.mobile) {
$('#infos').addClass("slide");
$('#filters').removeClass('slide');
$('.hamburger').text('Sélect something').fadeIn();
}
})
layer.addTo(clusters); // this is new
}
In order to call the clusters, I add somewhere
clusters.addTo(map);
This group all the clusters,from map A AND from map B like this:
In my project I have two tabs, each map and markers are separated. But all clusters are shown here. And As I use "clusters.addTo(map);", all clusters are shown but I can only click on markers from map A if I'm on map A, and only markers from map B if I'm on map B.
What I want is to have clusters separated, and to use it with my filters : if I click on two or three checkbox, it display only the corresponding clusters..For the moment the clusters are displayed on the map but the checkbox filters don't work, which seems logical because the function 'clusters.addTo(map)" is here to add clusters..
Do I need the subgroup plugin or PruneCluster to achieve this ??
来源：https://stackoverflow.com/questions/61148036/how-to-use-leaflet-clusters-with-tow-maps-in-tabs-and-multiples-geojson-categori