Ограничить панорамирование путями в Leaflet

Question

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

http://leafletjs.com/reference.html

maxBounds, кажется, ограничивается только прямоугольной областью. Динамический сброс прямоугольника, чтобы держать пользователей ближе к пути, кажется вероятным, но не очень привлекательным.

Answer 1

Способ сделать это действительно с помощью maxBounds вариант или setMaxBounds метод вашего L.Map пример. Например, если вы хотите ограничить границы карты полилинией, вам понадобятся границы этой полилинии. Вам не нужно рассчитывать это самостоятельно, вы можете использовать getBounds метод L.Polyline класс, который возвращает L.LatLngBounds объект. Этот объект может быть использован с setMaxBounds метод L.Map:

var map = new L.Map('leaflet', {...});

var polyline = new L.Polyline([
    [52.366667, 4.9],
    [51.507222, -0.1275]
]).addTo(map);

// Get bounds
var bounds = polyline.getBounds();

// Set view to bounds
map.fitBounds(bounds);

// Restrict view to bounds
map.setMaxBounds(bounds);

Пример на Плункер: http://plnkr.co/edit/jFw7mB?p=preview

getBounds Метод существует на всех классах, расширенных от L.Path лайк L.MultiPolyline, L.Polygon, L.MultiPolygon, L.Rectangle, L.Circle а также L.CircleMarker,

Он также существует на слоях L.FeatureGroup а также L.GeoJSON что очень удобно, если вам нужно установить границы для нескольких объектов на вашей карте. Вы содержите их в L.FeatureGroup а затем позвоните getBounds метод на L.FeatureGroup пример:

// Empty featuregroup
var featureGroup = new L.FeatureGroup().addTo(map);

// Add some features to featuregroup
var polyline1 = new L.Polyline([
    [52.366667, 4.9],
    [51.507222, -0.1275]
]).addTo(featureGroup);

var polyline2 = new L.Polyline([
    [52.366667, 4.9],
    [48.8567, 2.3508]
]).addTo(featureGroup);

var polyline3 = new L.Polyline([
    [52.366667, 4.9],
    [52.516667, 13.383333]
]).addTo(featureGroup);

// Get bounds of featuregroup
var bounds = featureGroup.getBounds();

// Set view to bounds
map.fitBounds(bounds);

// Restrict view to bounds
map.setMaxBounds(bounds);

Пример на Плункер: http://plnkr.co/edit/yoax8c?p=preview

Ссылка:

• L.Map.setBounds: http://leafletjs.com/reference.html
• L.Map.setMaxBounds: http://leafletjs.com/reference.html
• L.Path.getBounds: http://leafletjs.com/reference.html
• L.FeatureGroup.getBounds: http://leafletjs.com/reference.html