reactjs - 将 map 拟合到 react 传单中的要素图层边界

Question

我想要实现的目标:

有一个<Map><FeatureGroup><Circle />[1 or more]...</FeatureGroup></Map>层次结构并使 map 边界适合要素组，以便所有圆圈都在视口(viewport)中。

如果只有一个圆圈，它应该适合该圆圈的边界(即:放大)。

我尝试过的:

1. 给予FeatureGroup一个ref并调用getBounds就可以传递到Map 。由于生命周期FeatureGroup当时不存在componentDidMount被调用 - 它稍后渲染( https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-161594328 )。
2. 正在存储Circle状态并对其调用 getBounds(假设在本例中只有一个圆圈。这也不起作用。

我想我可能需要对 React Context 做一些事情，但我不确定我现在是否完全理解它，所以我需要一些帮助。

其他信息

我正在使用react-leaflet@2.1.2

感谢您提供的任何帮助!

Answer 1

由于 Map 的内容在 componentDidMount 时间 ( https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-161594328 ) 不可用，因此您无法获取 FeatureGroup 的边界到那时，在您分配的所有 refs 中，只有 Map ref 在 this.refs 中可用。

但是，根据此 GitHub 评论:https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-366263225您可以为 FeatureGroup 提供一个 onAdd 处理函数:

<FeatureGroup ref="features" onAdd={this.onFeatureGroupAdd}>...

然后您可以使用 Map 引用来访问 leafletElement 并使用传入事件目标的边界调用 fitBounds，这将是FeatureGroup:

  onFeatureGroupAdd = (e) => {
    this.refs.map.leafletElement.fitBounds(e.target.getBounds());
  }

然后，这将根据需要将 map “缩放”到 FeatureGroup 的范围内。

更新

我修改了我的 React 组件，以便缩放和居中由查询参数控制。上述解决方案的问题在于，例如，如果您通过单击来放大 MarkerClusterGroup，它会更新 url 中的缩放，重新渲染 map 并重新调用 onFeatureGroupAdd，从而消除了所有标记簇的优点。

我需要的是访问将新绘制的圆很好地保持在边界内所需的缩放级别，然后使用正确的缩放级别和中心更新网址。

  onDrawCircle = (e) => {
    ...
    var targetZoom = this.refs.map.leafletElement.getBoundsZoom(e.layer.getBounds());
        // Call function to update url here:
        functionToUpdateUrl(targetZoom, e.layer.getBounds().getCenter());
    }
  }

为了能够控制整个 map ，我还在 onZoomEnd 和 onDragEnd 事件处理程序中调用 functionToUpdateUrl，如下所示:

  onChangeView = (e) => {
      functionToUpdateUrl(e.target._zoom, this.refs.map.leafletElement.getCenter());
  }

还有一个用于处理集群点击:

  onClusterClick = (e) => {
     // This time we want the center of the layer, not the map?
     functionToUpdateUrl(e.target._zoom, (e.layer ? e.layer.getBounds().getCenter() : e.target.getBounds().getCenter()));
  }

然后，在渲染 Map 元素时，传递以下属性:

  <Map
    center={center}
    ref='map'
    zoom={zoom}
    maxZoom={18}
    onZoomEnd={this.onChangeView}
    onDragEnd={this.onChangeView}
  >
  ....
  </Map>

并记住为任何 MarkerClusterGroup 提供其 onClusterClick 回调:

<MarkerClusterGroup onAdd={this.onMarkerGroupAdd} onClusterClick={this.onClusterClick}>