Блог

У меня есть слой с маркерами в нем, markerLayer . У меня также есть один дополнительный маркер, user_marker . Я хочу, чтобы карта соответствовала, чтобы показать дополнительный маркер и следующие k маркеров вокруг него.

Я знаю, что есть leaflet-knn, но он принимает GeoJSON, а не слои листовки, и возвращает массив координат, что не совсем то, что требуется. Существует также брошюра.GeometryUtil , но у него есть только возможность возвращать все слои в пределах определенного радиуса, а не k ближайших.

Есть ли встроенное решение в листовке, которое я пропустил, или простое решение либо с помощью встроенных листовок, либо с помощью внешней библиотеки для масштабирования до k ближайших маркеров вокруг определенного маркера?

Вам не обязательно нужны плагины для листовок. Вы могли бы просто использовать метод distanceTo и отсортировать свои маркеры по расстоянию до user_marker . Затем вы вызываете метод fitBounds . Я создал здесь рабочий пример.

Ниже приведены важнейшие этапы кода:

 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());
});
  

Я знаю, что есть leaflet-knn, но для этого требуется GeoJSON, а не слои листовки

Итак? Просто соедините свои маркеры в a L.LayerGroup и используйте его toGeoJSON() метод.

С некоторыми обратными ссылками вы сможете снова извлекать маркеры из поиска knn.

Это решение, к которому я в конечном итоге пришел, используя 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());
    }
}