Question

我正在开发一个小型的Leaflet应用程序，并且不能像我期望的那样“填充”工作。在下面的代码中，在click处理程序中，我有一行：

mymap.fitBounds(myLayer.getBounds(), {padding: [1000, 1000]})

我认为应该为myLayer.getBounds（）获取的边界添加填充，然后地图应根据边界和填充缩放到适当的级别。但是，我认为是否传递填充选项没有区别。我也没有通过更改填充数字看到差异。当前发生的是当用户点击由点表示的元素时，地图将根据“maxZoom”值放大该点。因此，例如，如果他们点击奥克兰，地图将根据“maxZoom”显示标记周围的区域; “填充”选项不执行任何操作。

JS代码

//instantiate map
var mymap = L.map('mapid').setView([39.8283, -98.5795], 3);

//apply layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?
  access_token={accessToken}', {
  attribution: 'Map data &copy; <a 
  href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a 
  href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
  Imagery © 
  <a href="http://mapbox.com">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'all-your-tokens-are-belong-to-me'
}).addTo(mymap);

//cities for markers
var locations ={
  boston: {"type": "Point", "coordinates": [-71.05977, 42.35843]},
  oakland: {"type": "Point", "coordinates": [-122.2708, 37.80437]},
  berkeley: {"type": "Point", "coordinates": [-122.2737, 37.8712]},
  london: {"type": "Polygon", "coordinates": [[[-0.08, 51.509], [-0.06, 
  51.503], [-0.047, 51.51]]]},
  dublin: {"type": "Polygon", "coordinates": [[ [-6.2890, 53.3439], 
  [-6.2653, 
  53.3435], [-6.2603, 53.3356], [-6.2936, 53.3320] ]]},
  glasgow: {"type": "Point", "coordinates": [-4.2435, 55.8627]}
};

//define styles
var myStyle = {
  "color": "#ff7800",
  "weight": 5,
  "opacity": 0.65
};

//Create geoJson layer
var myLayer = L.geoJSON(null, {style: myStyle}).addTo(mymap);

//function to add element to geoJson layer
function updateMap(object) {
  myLayer.addData(object);
};

//click on the location's button, add it to the map
$('button').click(function(){
  var region = locations[this.id]
  updateMap(region);
  regionTypeContainer.push(region.type);
  mymap.fitBounds(myLayer.getBounds(), {padding: [1000, 1000]}); // padding 
  //not doing anything
});

Answer 1

fitBounds()方法的padding选项是从fitBounds计算中排除地图视口的某些部分。

如果您尝试fitBounds到单个点（即您的GeoJSON图层组包含单个点要素），则此padding选项不会更改任何内容。即您仍然可以缩放至maxZoom，因为实际上没有适合的区域。

一个非常简单的解决方法是检测getBounds返回“空”区域的情况：bounds.getSouthWest().equals(bounds.getNorthEast())

在这种情况下，您可以改为使用mymap.panTo(bounds.getCenter())，以便地图保持当前的缩放级别。

var bounds = myLayer.getBounds();

if (bounds.getSouthWest().equals(bounds.getNorthEast())) {
  // Only a single point feature to view.
  mymap.panTo(bounds.getCenter());
} else {
  // Some area to fit bounds to.
  mymap.fitBounds(bounds);
}

演示：https://jsfiddle.net/3v7hd2vx/350/

传单填充不起作用

1 个答案: