我有一个带有标记的图层,markerLayer
。我还有一个额外的标记user_marker
。我希望地图适合显示额外的标记和周围的下一个k标记。
我知道有leaflet-knn,但它需要GeoJSON,而不是传单层,并且会返回一个坐标数组,这并不是我想要的。还有leaflet.GeometryUtil,但只能选择返回特定半径内的所有图层,而不是最接近的k。
是否存在我忽略的传单中的内置解决方案,或者使用内置小册子或使用外部库放大到某个标记周围的k个最近标记的简单解决方案?
答案 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());
}
}