使地图完全适合边界 [英] Fit map to bounds exactly

问题描述

有没有一种方法可以使地图完全适合边界?(或尽可能接近).

Is there a way to fit the map exactly to bounds? (or as close a possible).

例如，在此jsfiddle中，即使不填充地图，在点的上方和下方也会留下很多填充:

For example, in this jsfiddle, even without padding the map leaves a lot of padding above and below the points:

http://jsfiddle.net/BC7q4/444/

map.fitBounds(bounds);

$('#fit1').click(function(){ map.fitBounds(bounds); });
$('#fit2').click(function(){ map.fitBounds(bounds, {padding: [50, 50]}); });

我正在尝试尽可能精确地将地图拟合到一组与地图形状紧密匹配的边界，而没有所有额外的填充.

I'm trying to fit a map as precisely as possible to a set of bounds that closely match the map shape without all the extra padding.

设置地图的ne角和sw角也可以，但是我不认为该功能存在.

Setting a map's ne corner and sw corner would work as well, but I don't think that functionality exists.

推荐答案

您很可能正在寻找地图

You are very probably looking for the map zoomSnap option:

强制地图的缩放级别始终是此级别的倍数，尤其是在 fitBounds()或捏缩放之后.默认情况下，缩放级别捕捉到最接近的整数.较低的值(例如 0.5 或 0.1 )可以提供更大的粒度.值 0 表示在fitBounds或捏缩放后，缩放级别将不会被捕捉.

Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.

由于其默认值为 1 ，因此在 fitBounds 之后，地图会将zoom值减小到最接近的可用整数值，因此可能会在边界处引入更多填充

Because its default value is 1, after your fitBounds the map will floor down the zoom value to the closest available integer value, hence possibly introducing more padding around your bounds.

通过指定 zoomSnap:0 ，您要求地图不捕捉缩放值:

By specifiying zoomSnap: 0, you ask the map not to snap the zoom value:

var map = L.map('map', {
  zoomSnap: 0 // http://leafletjs.com/reference.html#map-zoomsnap
}).setView([51.505, -0.09], 5);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var southWest = new L.LatLng(40.712, -74.227),
  northEast = new L.LatLng(40.774, -74.125),
  bounds = new L.LatLngBounds(southWest, northEast);

L.marker([40.712, -74.227]).addTo(map);
L.marker([40.774, -74.125]).addTo(map);

map.fitBounds(bounds);

$('#fit1').click(function() {
  map.fitBounds(bounds);
});
$('#fit2').click(function() {
  map.fitBounds(bounds, {
    padding: [50, 50]
  });
});

body {
  padding: 0;
  margin: 0;
}

#map {
  height: 300px;
  margin-top: 10px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<button id="fit1">fit without bounds</button>
<button id="fit2">fit with bounds</button>
<div id="map"></div>

这篇关于使地图完全适合边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！