添加关于突出显示状态的图例和信息

Question

我一直在尝试在右上角添加图例和/或信息部分以显示有关我突出显示的状态的描述，但我无法这样做，因此我不得不 post一些指导。

我正在使用 React 16.13 和 typescript，所以在这个阶段使用钩子而不是 class 组件（仍然可以使用，但尽量避免使用）。我使用的库是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;

提前对代码块表示抱歉。只是不确定如何像文档显示的那样实现图例或大信息。任何建议或示例将不胜感激，感谢阅读！

Answer 1

React-leaflet 只是一个包装器。您只需使用本机传单代码片段来使您的块更有条理和可重用。

您可以使用原生传单的代码。要实现图例和突出显示的信息框，您唯一需要做的就是拥有一个地图参考，您可以使用 useLeaflet 钩子获取该地图参考，因为您正在使用钩子。

我为您创建了两个包装器，一个用于图例，一个用于可视化 geojson 并显示信息框。这是后者：

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

Demo

添加关于突出显示状态的图例和信息

Adding a Legend and Info about the highlighted state

javascript

geojson

leaflet

reactjs

react-leaflet