传单填充不起作用答案

【问题标题】：Leaflet padding not working传单填充不起作用
【发布时间】：2017-12-28 00:45:00
【问题描述】：

我正在开发一个小型 Leaflet 应用程序，无法让“填充”按预期工作。在下面的代码中，在点击处理程序中，我有一行：

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
});

【问题讨论】：

标签： javascript leaflet padding

【解决方案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/

【讨论】：