увеличивать динамически, чтобы уместить все маркеры React-sheet - PullRequest
Новая
       71

увеличивать динамически, чтобы уместить все маркеры React-sheet

0 голосов
/ 06 мая 2020

Я использую реактивную листовку. чтобы показать карту в моем приложении реакции. Я тоже показываю маркер на карте. Проблема в том, что уровень масштабирования не подходит, потому что иногда маркеры могут быть довольно близко друг к другу, а иногда они будут очень далеко друг от друга. Есть ли способ установить уровень масштабирования в зависимости от расстояния до маркеров, чтобы пользователь мог видеть все маркеры сразу?

Вот мой код 


<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>

PS: My версия реакции-листовки - 2.4.0

1 Ответ

0 голосов
/ 07 мая 2020

Предполагая, что 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>
  );
}
...