缩放到特定的标记周围的k个标记

时间:2016-10-05 23:20:01

标签: javascript leaflet

我有一个带有标记的图层,markerLayer。我还有一个额外的标记user_marker。我希望地图适合显示额外的标记和周围的下一个k标记。

我知道有leaflet-knn,但它需要GeoJSON,而不是传单层,并且会返回一个坐标数组,这并不是我想要的。还有leaflet.GeometryUtil,但只能选择返回特定半径内的所有图层,而不是最接近的k。

是否存在我忽略的传单中的内置解决方案,或者使用内置小册子或使用外部库放大到某个标记周围的k个最近标记的简单解决方案?

3 个答案:

答案 0 :(得分:0)

您不一定需要Leaflet插件。您可以简单地使用distanceTo方法,并按距离user_marker对标记进行排序。然后调用fitBounds方法。我创建了一个working example here

以下是代码的关键步骤:

var testData = [{lat:37.7859,lon:-122.1362},{lat:37.6921,lon:-122.0312},{lat:37.823,lon:-122.6112},{lat:37.7478,lon:-122.1562},{lat:37.6759,lon:-122.0458},{lat:37.555,lon:-122.050}];

var marker_layer = new L.layerGroup();
var user_marker = L.marker(L.latLng(37.7829, -122.1312)).addTo(map);

//k closest markers
var k = 3;
var dist_markers = [];

$.each(testData, function(index, p) {
     var latlng = L.latLng(p.lat, p.lon)
   var marker = L.marker(latlng);
   marker.addTo(marker_layer);
   dist = L.latLng(37.7829, -122.1312).distanceTo(latlng);
   dist_markers.push([dist,marker]);
});

dist_markers.sort(Comparator);
var close_markers = dist_markers.slice(0,k)
close_markers = close_markers.map(function(d) {return d[1];});
var group = new L.featureGroup(close_markers);

marker_layer.addTo(map);
user_marker.addTo(map);

map.on('click', function() {
         map.fitBounds(group.getBounds());
});

答案 1 :(得分:0)

  

我知道有传单,但它需要GeoJSON,而不是传单层

所以?只需将您的标记放在L.LayerGroup中并使用其toGeoJSON() method

通过一些反向引用,您应该能够从knn搜索中再次获取标记。

答案 2 :(得分:0)

这是我最终使用L.GeometryUtil找到的解决方案。

function fit_around_marker(user_marker, number) {
    if (number >= markerLayer.getLayers().length) {
        map.fitBounds(markerLayer.getBounds());
    } else {
        var p = user_marker.getLatLng();
        var fit_layers = markerLayer.getLayers();
        var fit_array = [];
        var r = 1;
        while (fit_array.length < number) {
            fit_array = L.GeometryUtil.layersWithin(map, fit_layers, p, r++);
        }
        var fit_markers = [user_marker];
        for (index = 0; index < fit_array.length; ++index) {
            fit_markers.push(fit_array[index]["layer"]);
        }
        console.log(fit_markers);
        var fit_layer = L.featureGroup(fit_markers);
        map.fitBounds(fit_layer.getBounds());
    }
}