由于在
componentDidMount
时无法获取
Map
的内容(
https://github.com/PaulLeCam/react-leaflet/issues/106#issuecomment-161594328),因此您无法在该点上获取
FeatureGroup
的边界,并且在您分配的所有
refs
中,只有
Map
引用将在
this.refs
中可用。
但是,根据
此GitHub评论,您可以为
FeatureGroup
提供一个
onAdd
处理程序函数:
<FeatureGroup ref="features" onAdd={this.onFeatureGroupAdd}>...
然后您可以使用 Map
引用来访问 leafletElement
,并使用传入的事件目标的边界调用 fitBounds
,该事件目标将是 FeatureGroup
:
onFeatureGroupAdd = (e) => {
this.refs.map.leafletElement.fitBounds(e.target.getBounds());
}
这将会"缩放"地图到你的
FeatureGroup
边界内,以达到预期效果。
更新:
我修改了我的React组件,以便通过查询参数控制缩放和中心。上述解决方案的问题在于,如果你通过单击来缩放一个
MarkerClusterGroup
,例如,它会更新url中的缩放比例,重新渲染地图并重新调用
onFeatureGroupAdd
,从而撤消所有标记聚类的好处。
我需要的是访问所需的缩放级别,以使新绘制的圆保持在范围内,然后使用正确的缩放级别和中心更新url。
onDrawCircle = (e) => {
...
var targetZoom = this.refs.map.leafletElement.getBoundsZoom(e.layer.getBounds());
functionToUpdateUrl(targetZoom, e.layer.getBounds().getCenter());
}
}
为了能够控制整个地图,在
onZoomEnd
和
onDragEnd
事件处理程序中,我还需要调用
functionToUpdateUrl
函数,像这样:
onChangeView = (e) => {
functionToUpdateUrl(e.target._zoom, this.refs.map.leafletElement.getCenter());
}
还有一个用于处理集群点击的函数:
onClusterClick = (e) => {
functionToUpdateUrl(e.target._zoom, (e.layer ? e.layer.getBounds().getCenter() : e.target.getBounds().getCenter()));
}
那么,在渲染地图元素时,传递这些属性:
<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}>
onadd
而不是onAdd
,<FeatureGroup onadd={onFeatureGroupAdd}>
。 - notclive