动态放大以适应所有标记 React-leaflet

Posted 2023-03-28

【中文标题】动态放大以适应所有标记 React-leaflet

【英文标题】：zoom in dynamically to fit all the marker React-leaflet

【发布时间】：2020-08-21 14:18:23

【问题描述】：

我正在使用 react-leaflet。在我的反应应用程序中显示地图。我也在地图上显示标记。问题是缩放级别不合适，因为有时标记可能彼此非常接近，有时它们会相距很远。有没有办法根据标记的距离设置缩放级别，以便用户可以一次看到所有标记？

这是我的代码

<Map center=center maxZoom=9 zoom=5>
  <MarkerClusterGroup showCoverageOnHover=false>
    
      markers.map((fillColor, position, id) => 
         <CircleMarker fillColor=fillColor color=darken(0.1, fillColor) radius=10 fillOpacity=1 key=id center=position onClick=this.onClick />
    
  </MarkerClusterGroup>
</Map>

P.S：我的 react-leaflet 版本是 2.4.0

【问题讨论】：

***.com/questions/50861984/…

@VivekDoshi 有什么方法可以在不使用 ref 的情况下做到这一点？

【参考方案1】：

假设MarkerClusterGroup 是react-leaflet-markercluster 包中的一个组件，以下示例演示了如何自动缩放以覆盖可见标记：

function CustomLayer(props) 
  const groupRef = useRef(null);
  const  markers  = props;
  const mapContext = useLeaflet();
  const  map = mapContext; //get map instance

  useEffect(() => 
    const group = groupRef.current.leafletElement; //get leaflet.markercluster instance  
    map.fitBounds(group.getBounds());  //zoom to cover visible markers
  , []);

  return (
    <MarkerClusterGroup ref=groupRef showCoverageOnHover=false>
      markers.map(( fillColor, position, id ) => (
        <CircleMarker
          fillColor=fillColor
          radius=10
          fillOpacity=1
          key=id
          center=position
        />
      ))
    </MarkerClusterGroup>
  );

用法

function MapExample(props) 
  const  markers, center  = props;
  return (
    <Map center=center maxZoom=9 zoom=5>
      <TileLayer
        url="https://s.tile.openstreetmap.org/z/x/y.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <CustomLayer markers=markers />
    </Map>
  );