React leaflet 如何计算边界

我试图使用React传单，但无法使boundsOptions起作用。这显然是因为它们只有在我们预先计算边界时才起作用

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

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

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

const position=[40.706213526877455，-74.0044641494751]；
常数zoom=13；
返回（）

使用

廉价标尺计算边界，即：

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

使用廉价标尺计算的边界，即：

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

您可以使用getBounds（）

您可以使用getBounds（）

我试过了，但我只能在绘制完整个地图后才能从
ref
获取传单的参考。这种方法有副作用，例如第一次通过时不需要的动画。我可能可以解决这个问题。我试过了，但我只能在整个地图渲染后从
ref
获取传单的参考。这种方法有副作用，例如第一次通过时不需要的动画。我可能可以解决这个问题。你是在地图渲染之前还是之后计算边界？组件中React传单的代码将不适合贴图边界，除非您通过
bounds
属性发送。@EvanSiroky我下面的解决方案在渲染之前计算它，这是最佳的，因为我避免了不需要的动画。您是在贴图渲染之前还是之后计算边界？组件中React传单的代码将不适合贴图边界，除非您通过
bounds
属性发送。@EvanSiroky我下面的解决方案在渲染之前计算它，这是最佳的，因为我避免了不需要的动画。