使地图的边界适合 React-Leaflet 中 FeatureGroup 的内容

Question

我有一个 FeatureGroup，里面有一个 Circle。加载时，我希望地图的视口能够完全显示圆圈。有许多相关的 Whosebug 问题 (, another one, )，我都试过了。 None 使用现代工具为我工作。

import { MapContainer, TileLayer, FeatureGroup, Circle } from 'react-leaflet'

export default function MyMap({volunteer, pollingPlaces}) {

    const coordinates = [40.781753, -73.966583];
    const circle = <Circle pathOptions={{color: 'purple'}} center={coordinates} radius={3*1609} />

    return (
        <MapContainer center={coordinates}
            style={{
                height:"400px",
                width: "400px"
            }}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <FeatureGroup>
                {circle}
            </FeatureGroup>
        </MapContainer>
        )
}

其中一个大问题是string refs are now deprecated, and most of the old answers rely on this. It's also not clear to me how to use the new useMap hook in concert with the createRef method in a function component. (The seems to get the closest, and is from just a year ago, but it still relies on componentDidMount.) Finally, I am unable to get my FeatureGroup to call either the onadd or onAdd method (it's unclear ？请参阅答案下方的评论......）当我将其传递给组件时。 2018年的答案依赖于这个回调。

这三个问题的结合意味着我无法使用任何旧的解决方案。所以我想我会重新问：这些天做这件事的正确方法是什么？

Answer 1

标题中的问题，因为你后面还有一个关于onAdd的问题，我觉得还是分开问比较好，你还是可以用一个ref得到一个参考 FeatureGroup

您只需致电 map.fitBounds。要获取地图引用，您需要在包含 MapContainer 的组件内使用 whenCreated 属性。如果你在 child 中，你将不得不使用 useMap 钩子来获取它。一旦你得到它，你需要使用 featureGroup ref，它是一个 react ref，实际上是一个 object，并且可以通过 current 访问。里面有一些传单方法。您需要的是 getBounds 方法来检索特征组的边界。

const [map, setMap] = useState(null);
  const featureGroupRef = useRef();

  useEffect(() => {
    if (!map) return;
    map.fitBounds(featureGroupRef.current.getBounds());
  }, [map]);

 <MapContainer
      center={coordinates}
      zoom={6}
      style={{
        height: "400px",
        width: "400px"
      }}
      whenCreated={setMap}
 >
  ...

 <FeatureGroup ref={featureGroupRef}>{circle}</FeatureGroup>
</MapContainer>

Demo

使地图的边界适合 React-Leaflet 中 FeatureGroup 的内容

Fit a map's bounds to contents of a FeatureGroup in React-Leaflet

leaflet

reactjs

react-leaflet