Refre sh листовка карта в реакции - PullRequest
Новая
       8

Refre sh листовка карта в реакции

0 голосов
/ 21 марта 2020

Я хочу обновить sh круги на листе карты после увеличения: 

import React from "react";
import {
  Map as LeafletMap,
  TileLayer,
  Marker,
  Circle,
  Tooltip,
  Popup
} from "react-leaflet";

import MarkerClusterGroup from "react-leaflet-markercluster";
import data from "./data.json";

const TILE_LAYER_ATTRIBUTION =
  "Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL";
const TILE_LAYER_URL =
  "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png";

export function Map() {
  const position = [55.2854062,23.9327383];
  const initialZoom = 8;
  let showTooltip = false;
  let mapRef = React.createRef();

  const renderMarkers = () => {
    showTooltip = mapRef && mapRef.viewport && mapRef.viewport.zoom > 8 ? true : false;
    let circles = [];
    circles = data.map(item => (
      <Circle key={item.id}
        center={[item.latitude, item.longitude]}
        color="red"
        fillColor="red"
        radius={100}
      >
        <Tooltip className="circle-tooltip" permanent={true} direction={"center"}>
        {showTooltip ? <span>1</span> : <span></span>
      }
        </Tooltip>
        <Popup>
          <p>
            {item.address}, {item.city}
          </p>
          <p>{item.time}</p>
        </Popup>
      </Circle>
    ));

    return circles;
  };


  return (
    <LeafletMap ref={(ref) => { mapRef = ref }} center={position} zoom={initialZoom} onzoomend={() => renderMarkers() }>
      <TileLayer attribution={TILE_LAYER_ATTRIBUTION} url={TILE_LAYER_URL} />
      {
        <MarkerClusterGroup showCoverageOnHover={false}>
          {renderMarkers()}
        </MarkerClusterGroup>
      }
    </LeafletMap>
  );
}

однако они не перерисовываются после вызова функции renderMarkers (). Что здесь может быть не так?

1 Ответ

1 голос
/ 22 марта 2020

showTooltip должна быть переменной состояния, использующей useState, поэтому при ее изменении компонент будет перерисован.

Более того, я думаю, что если вы используете функциональные компоненты, это должно быть useRef вместо createRef (), а затем 

<LeafletMap
      ref={mapRef}
...

Так должно быть так: 

  let [showTooltip, setShowTooltip] = React.useState(false);
  let mapRef = React.useRef();

  const renderMarkers = () => {
    const map = mapRef.current;

    if (map) {
      console.log(map.leafletElement.getZoom());
      // change here the showTooltip flag
      setShowTooltip(map.leafletElement.getZoom() > 13 ? true : false);
    }
  };



<MarkerClusterGroup showCoverageOnHover={false}>
          {data.map(item => (
            <Circle
 ....
<MarkerClusterGroup/>

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

Демо

...