Добавление легенды и информации о выделенном состоянии - PullRequest
Новая
       47

Добавление легенды и информации о выделенном состоянии

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

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

Я использую React 16.13 с typescript, поэтому на этом этапе я использую хуки, а не компоненты класса (которые все еще можно использовать, но пытаюсь избежать этого). Я использую библиотеку React-Leaflet. Я читаю онлайн весь день, и я не могу понять, как добавить эти две вещи в свой проект, я думаю, как только я пойму, как сделать одну, другая будет легко реализована.

Это мой код ниже: 

const App: React.FC = () => {
  const [mapCenter, setMapCenter] = useState<L.LatLngTuple>([
    36.778259,
    -119.417931
  ]);
  const [geoJson, setGeoJson] = useState<TopoJSON[]>([]);
  const geoJsonRef = useRef<GeoJSON>(null);

  useEffect(() => {
    if (data.type === "Topology") {
      for (let key in data.objects) {
        if (data.objects.hasOwnProperty(key)) {
          setGeoJson(topojson.feature(data, data.objects[key]));
        }
      }
    }
  }, []);

  const highlightFeature = (e: L.LeafletMouseEvent) => {
    let layer = e.target;
    layer.setStyle({
      weight: 5,
      color: "#666",
      dashArray: "",
      fillOpacity: 0.7
    });
    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
      layer.bringToFront();
    }
  };

  const resetHighlight = (e: L.LeafletMouseEvent) => {
    geoJsonRef.current!.leafletElement.resetStyle(e.target);
  };

  const onEachFeature = (feature: GeoJSON.Feature, layer: L.Layer) => {
    layer.bindPopup(feature.properties!.NAME10);
    layer.on({
      mouseover: highlightFeature,
      mouseout: resetHighlight
    });
  };

  return (
    <div className="App">
      <Map center={mapCenter} zoom={4} maxZoom={5} minZoom={4}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <GeoJSON
          data={geoJson}
          style={GetStyle}
          onEachFeature={onEachFeature}
          ref={geoJsonRef}
        />
      </Map>
    </div>
  );
 };

export default App;

Заранее извините за блоб кода. Просто не знаете, как реализовать легенду или информацию, как в документальном шоу. Буду признателен за любые советы или примеры, спасибо за чтение!

1 Ответ

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

React-листовка - это просто обертка. вы просто используете фрагменты исходного кода листовки, чтобы сохранить ваши фрагменты более организованными и многократно используемыми.

Вы можете использовать код собственного буклета. Единственное, что вам нужно сделать для реализации легенды и выделенного информационного блока, - это иметь ссылку на карту, которую вы можете использовать, используя useLeaflet hook, так как вы используете hooks.

Я создал для вас две оболочки, один для легенды и один для визуализации ie гео json и отображения информационного окна. Вот последнее: 

const HighlightedGeoJson = () => {
  const { map } = useLeaflet();

  useEffect(() => {
    // control that shows state info on hover
    const info = L.control();

    info.onAdd = () => {
      info._div = L.DomUtil.create("div", "info");
      info.update();
      return info._div;
    };

    info.update = props => {
      info._div.innerHTML =
        "<h4>US Population Density</h4>" +
        (props
          ? "<b>" +
            props.name +
            "</b><br />" +
            props.density +
            " people / mi<sup>2</sup>"
          : "Hover over a state");
    };

    info.addTo(map);

    const highlightFeature = e => {
      const layer = e.target;

      layer.setStyle({
        weight: 5,
        color: "#666",
        dashArray: "",
        fillOpacity: 0.7
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }

      info.update(layer.feature.properties);
    };

    let geojson;

    const resetHighlight = e => {
      geojson.resetStyle(e.target);
      info.update();
    };

    const zoomToFeature = e => {
      map.fitBounds(e.target.getBounds());
    };

    const onEachFeature = (feature, layer) => {
      layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
      });
    };

    geojson = L.geoJson(statesData, {
      style,
      onEachFeature: onEachFeature
    }).addTo(map);
  });

  return null;
};

Демо

...