Question

如何将地图聚焦在某个位置？

我的设置基于这篇文章：
How do you make a highlighted outline appear in leaflet.js on mouseover and by hyperlink?

我在另一个图层的页面一侧有一个链接列表，并将其设置为允许地图在单击链接时突出显示建筑物，但也希望将地图的焦点移动到那栋楼。

所以对于这段代码：

function setHighlight (layer) {
  // Check if something's highlighted, if so unset highlight
  if (highlight) {
    unsetHighlight(highlight);
  }
  // Set highlight style on layer and store to variable
  layer.setStyle(style.highlight);
  highlight = layer;
}

我还想关注调用函数的多边形。例如：

var group = new L.LayerGroup([
new L.Polygon([
    [-50, -50], [50, -50], [50, -10], [-50, -10]
], {
    'label': 'Polygon 1',
    'popup': 'Polygon 1'
}),
new L.Polygon([
    [-50, 10], [50, 10], [50, 50], [-50, 50]
], {
    'label': 'Polygon 2',
    'popup': 'Polygon 2'
})
]).addTo(map);

是否有定义添加到多边形以指示其位置？或者是否有可以将地图聚焦在多边形中心的代码？

谢谢！

Answer 1

您可以在getBounds上调用L.Polygon方法，该方法会返回L.LatLngBounds个对象。该对象有一个getCenter方法，它将返回一个包含多边形中心坐标的L.LatLng对象。您可以使用panTo方法L.Map来平移地图。或者，您可以使用L.LatLngBounds的{{1}}方法使用fitBounds对象缩放并平移到多边形：

L.Map

使用看起来像这样的代码：

// Have a polygon
var polygon = new L.Polygon(...).addTo(map)

// Get bounds object
var bounds = polygon.getBounds()

// Fit the map to the polygon bounds
map.fitBounds(bounds)

// Or center on the polygon
var center = bounds.getCenter()
map.panTo(center)

在Leaflet.js中，如何将地图聚焦在外部JS突出显示的多边形上？

1 个答案: