Question

我正在使用 LeafletJS （https://leafletjs.com/reference-1.3.4.html）和 Leaflet.markerclusterer （https://github.com/Leaflet/Leaflet.markercluster）在我的网站上创建地图。我已经快完成工作了，但是我无法弄清楚最后一部分。

我要做的是像这样在视口中显示标记列表：

然后，如果在底行中单击它们之一，它将panTo()正确区域。

我遇到的问题是，如果（如您在我的示例中看到的）链接恰好在此级别的集群中，则看不到它。如何迫使它缩放。

我需要的是一次放大一个步骤直到可见的方法。

window.VARS.markerCluster.eachLayer(function (layer) {

        if (layer.options.linkid == linkid) {

                console.dir(layer);
                window.VARS.Map_Modal.panTo(layer.getLatLng());

        }

});

这是我在Google Maps上使用的一些代码，用于实现相同的功能，但是很麻烦，

           var zoom = window.VARS.Google_Map_Modal.getZoom();
            window.VARS.Google_Map_Modal.setCenter(window.VARS.markers[e.getAttribute('data-what')].getPosition());
            var zoomInterval = setInterval(function() {
                 if(!window.VARS.markers[e.getAttribute('data-what')].map) {
                     zoom++
                     if (zoom < 15) {
                        window.VARS.Google_Map_Modal.setZoom(zoom++);
                    }
                 } else {
                     clearInterval(zoomInterval);
                 }
            }, 300);

Answer 1

由于您正在使用 Leaflet.markercluster 库，因此可以轻松使用zoomToShowLayer，它是markerClustersGroup对象的一种方法。因此，要执行此操作，您必须找到引用您的markerCLustersGroup对象的变量，该对象像这样初始化，在代码中的某个位置：

var myMarkerClusterGroup = L.markerClusterGroup();

一旦您有组，就可以像这样调用所述方法：

myMarkerClustersGroup.zoomToShowLayer(layer);

...代替使用window.VARS.Map_Modal.panTo(layer.getLatLng());

这是official documentation中有关此方法的文档：

zoomToShowLayer （图层，回调）：缩放以显示给定的标记（如果需要，则为蜘蛛状），当标记在地图上可见时调用回调。

Answer 2

好吧，所以不要直接回答原始问题，但这确实是我要实现的目标。使用这个额外的插件：

https://github.com/ghybs/Leaflet.MarkerCluster.Freezable

我能够在某个阶段（当标记减少时）禁用集群：

        // disable clustering at certain zoom
        if (window.VARS.Map_Modal.getZoom() >= 12) {
            window.VARS.markerCluster.freezeAtZoom();
        } else {
            window.VARS.markerCluster.enableClustering();
        }

然后我不需要放大，因为它们在当前视口中可见。我确信这不是一个完美的解决方案，但是它应该可以满足我的需求。

我仍然很想知道是否有人有其他解决方案（将来会针对其他人）

放大以便标记在LeafletJS中可见

2 个答案: