react-leaflet - 如何计算界限

Question

我正在尝试使用 React-leaflet 但无法使 boundsOptions 工作。这显然是因为它们只有在我们预先计算界限时才起作用。

如何计算给定点和缩放级别或半径的边界？

const position = [40.706213526877455, -74.0044641494751];
const zoom = 13;

return (<Map ref="leaflet" center={ position } boundsOptions={ { paddingBottomRight: [100, 100] } zoom={ zoom } } />)

Answer 1

您可以使用 getBounds()

this.refs.leaflet.leafletElement.getBounds()

Answer 2

使用 计算的界限cheap-ruler，即：

getBounds(center) {
  const ruler = cheapRuler(center[0], 'meters');
  const bbox = ruler.bufferPoint(center, 100000);
  const p1 = Leaflet.latLng(bbox[0], bbox[1]);
  const p2 = Leaflet.latLng(bbox[2], bbox[3]);

  return Leaflet.latLngBounds(p1, p2);
}