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

教条

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

我的设置基于以下内容：
如何在鼠标悬停时和通过超链接在leaflet.js中显示突出显示的轮廓？

我在页面侧面的不同层中有一个链接列表，并将其设置为允许单击链接时地图突出显示建筑物，但也希望将地图的焦点移至该建筑物。

因此，对于此代码：

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

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

谢谢！

iH8

您可以在getBounds上调用方法L.Polygon，这将返回一个L.LatLngBounds对象。该对象具有一个getCenter方法，该方法将向您返回一个L.LatLng包含多边形中心坐标的对象。您可以使用的panTo方法来平移地图L.Map。或者你也可以使用L.LatLngBounds对象进行缩放和平移使用多边形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)

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

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

    // Fit map to layer bounds
    var bounds = layer.getBounds();
    map.fitBounds(bounds);

    highlight = layer;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。