Leaflet.js - Установите координаты geoJSON на карте
У меня есть карта leaflet.js, на которой есть точки и linestrings, которые поступают из внешнего файла JSON.
Если я добавлю: map.setView(новый L.LatLng(0,0), 10);
Он будет центрировать карту по широте и долготе 0,0. Как я могу установить его так, чтобы центр карты и масштабирование соответствовали всем точкам JSON на нем?
Ответы
Ответ 1
Вы можете добавить все свои слои в FeatureGroup, у которого есть метод getBounds
. Поэтому вы должны просто сказать myMap.fitBounds(myFeatureGroup.getBounds());
Метод getBounds для L.FeatureGroup доступен только в основной ветке (не последняя версия, 0.3.1), на данный момент, по крайней мере.
Ответ 2
Аналогичный случай со мной. Я нарисовал все маркеры из данных GeoJson. Поэтому я написал функцию, которая вызывается повторно при нажатии кнопки. Просто попробуйте, если это соответствует вашим требованиям.
function bestFitZoom()
{
// declaring the group variable
var group = new L.featureGroup;
// map._layers gives all the layers of the map including main container
// so looping in all those layers filtering those having feature
$.each(map._layers, function(ml){
// here we can be more specific to feature for point, line etc.
if(map._layers[].feature)
{
group.addLayer(this)
}
})
map.fitBounds(group.getBounds());
}
Лучшее использование записи этой функции состоит в том, что даже состояние карты/маркеров изменилось, оно получит последнее/текущее состояние маркеров/слоев. Всякий раз, когда этот метод вызывается, все слои будут видны до скромного уровня масштабирования.
Ответ 3
Мне нужно было сделать это, показывая направление пользователя от своего источника до места назначения. Я сохраняю список маршрутов в массиве L.LatLng
под названием directionLatLngs
, тогда вы можете просто вызвать
map.fitBounds(directionLatLngs);
Это работает, потому что map.fitBounds
принимает объект L.LatLngBounds
, который является всего лишь массивом L.LatLng
http://leafletjs.com/reference.html#latlngbounds