如何在单击 Leaflet 地图时更改群集缩放级别?
How to change cluster zoom level on click with Leaflet map?
我有一个缩放级别为 2-7 并使用 MarkerCluster 插件的传单地图,默认情况下我有 L.MarkerClusterGroup 禁用缩放级别 2 的聚类(这意味着没有聚类),我正在尝试允许用户单击一个按钮,然后将聚类缩放级别更改为 5。这可能吗?
我知道我可以通过制作两个 markercluster 组来做到这一点,一个没有聚类,一个有聚类,remove/add 它基于点击,但这看起来非常混乱。真的,有几种方法可以做到,但它们非常笨拙。
代码:
默认(2 是最低级别的缩放):
var markers = new L.MarkerClusterGroup (
{
disableClusteringAtZoom: 2,
maxClusterRadius: 100,
animateAddingMarkers: true
});
我想做的能做的:
$('#mcluster').click(function() {
//do some code that sets the disableClusterAtZoom to 5
});
我找不到在缩放时禁用集群或为 disableClustering 设置新值的方法,但我找到了一种不太笨拙的方法来实现这一点。
var markers = new L.LayerGroup(); //non cluster layer is added to map
markers.addTo(map);
var clusters = new L.MarkerClusterGroup (
{
disableClusteringAtZoom: 5,
maxClusterRadius: 100,
animateAddingMarkers: true
}); //cluster layer is set and waiting to be used
var clusterStatus = 'no'; //since non cluster group is on by default, the status for cluster is set to no
$('#mcluster').click(function( event ) {
if(clusterStatus === 'no'){
clusterStatus = 'yes';
var current1 = markers.getLayers(); //get current layers in markers
map.removeLayer(markers); // remove markers from map
clusters.clearLayers(); // clear any layers in clusters just in case
current1.forEach(function(item) { //loop through the current layers and add them to clusters
clusters.addLayer(item);
});
map.addLayer(clusters);
} else {
clusterStatus = 'no'; //we're turning off clustering here
var current2 = clusters.getLayers(); //same code as before just reversed
map.removeLayer(clusters);
markers.clearLayers();
current2.forEach(function(item) {
markers.addLayer(item);
});
map.addLayer(markers);
}
});
我确信有一个更优雅的解决方案,但随着我不断增长的知识,这就是我想出的。
我知道您几个月前就需要一个解决方案,但只是想让您知道,我最近发布了一个 sub-plugin for Leaflet.markercluster,它可以完全满足您的需求(带有一些额外的代码): Leaflet.MarkerCluster.Freezable (demo here).
var mcg = L.markerClusterGroup().addTo(map),
disableClusteringAtZoom = 2;
function changeClustering() {
if (map.getZoom() >= disableClusteringAtZoom) {
mcg.disableClustering(); // New method from sub-plugin.
} else {
mcg.enableClustering(); // New method from sub-plugin.
}
}
map.on("zoomend", changeClustering);
$('#mcluster').click(function () {
disableClusteringAtZoom = (disableClusteringAtZoom === 2) ? 5 : 2;
changeClustering();
});
mcg.addLayers(arrayOfMarkers);
// Initially disabled, as if disableClusteringAtZoom option were at 2.
changeClustering();
演示:http://jsfiddle.net/fqnbwg3q/3/
注意:在上面的演示中,我使用了一种改进来确保当聚类为 re-enabled 时标记与动画合并。在使用 enableClustering()
:
之前简单地使用超时
// Use a timeout to trigger clustering after the zoom has ended,
// and make sure markers animate.
setTimeout(function () {
mcg.enableClustering();
}, 0);
我有一个缩放级别为 2-7 并使用 MarkerCluster 插件的传单地图,默认情况下我有 L.MarkerClusterGroup 禁用缩放级别 2 的聚类(这意味着没有聚类),我正在尝试允许用户单击一个按钮,然后将聚类缩放级别更改为 5。这可能吗?
我知道我可以通过制作两个 markercluster 组来做到这一点,一个没有聚类,一个有聚类,remove/add 它基于点击,但这看起来非常混乱。真的,有几种方法可以做到,但它们非常笨拙。
代码:
默认(2 是最低级别的缩放):
var markers = new L.MarkerClusterGroup (
{
disableClusteringAtZoom: 2,
maxClusterRadius: 100,
animateAddingMarkers: true
});
我想做的能做的:
$('#mcluster').click(function() {
//do some code that sets the disableClusterAtZoom to 5
});
我找不到在缩放时禁用集群或为 disableClustering 设置新值的方法,但我找到了一种不太笨拙的方法来实现这一点。
var markers = new L.LayerGroup(); //non cluster layer is added to map
markers.addTo(map);
var clusters = new L.MarkerClusterGroup (
{
disableClusteringAtZoom: 5,
maxClusterRadius: 100,
animateAddingMarkers: true
}); //cluster layer is set and waiting to be used
var clusterStatus = 'no'; //since non cluster group is on by default, the status for cluster is set to no
$('#mcluster').click(function( event ) {
if(clusterStatus === 'no'){
clusterStatus = 'yes';
var current1 = markers.getLayers(); //get current layers in markers
map.removeLayer(markers); // remove markers from map
clusters.clearLayers(); // clear any layers in clusters just in case
current1.forEach(function(item) { //loop through the current layers and add them to clusters
clusters.addLayer(item);
});
map.addLayer(clusters);
} else {
clusterStatus = 'no'; //we're turning off clustering here
var current2 = clusters.getLayers(); //same code as before just reversed
map.removeLayer(clusters);
markers.clearLayers();
current2.forEach(function(item) {
markers.addLayer(item);
});
map.addLayer(markers);
}
});
我确信有一个更优雅的解决方案,但随着我不断增长的知识,这就是我想出的。
我知道您几个月前就需要一个解决方案,但只是想让您知道,我最近发布了一个 sub-plugin for Leaflet.markercluster,它可以完全满足您的需求(带有一些额外的代码): Leaflet.MarkerCluster.Freezable (demo here).
var mcg = L.markerClusterGroup().addTo(map),
disableClusteringAtZoom = 2;
function changeClustering() {
if (map.getZoom() >= disableClusteringAtZoom) {
mcg.disableClustering(); // New method from sub-plugin.
} else {
mcg.enableClustering(); // New method from sub-plugin.
}
}
map.on("zoomend", changeClustering);
$('#mcluster').click(function () {
disableClusteringAtZoom = (disableClusteringAtZoom === 2) ? 5 : 2;
changeClustering();
});
mcg.addLayers(arrayOfMarkers);
// Initially disabled, as if disableClusteringAtZoom option were at 2.
changeClustering();
演示:http://jsfiddle.net/fqnbwg3q/3/
注意:在上面的演示中,我使用了一种改进来确保当聚类为 re-enabled 时标记与动画合并。在使用 enableClustering()
:
// Use a timeout to trigger clustering after the zoom has ended,
// and make sure markers animate.
setTimeout(function () {
mcg.enableClustering();
}, 0);