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

Stack Overflow用户

提问于 2020-03-30 18:50:27

回答 1查看 850关注 0票数 3

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

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

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

leaflet

geojson

react-leaflet

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-31 19:29:26

React-leaflet只是一个包装器。您只需使用原生leaflet代码片段来保持代码块更有组织和可重用性。

您可以使用本地leaflet的代码。要实现图例和突出显示的信息框，您需要做的唯一一件事就是拥有一个地图引用，您可以使用useLeaflet钩子获取它，因为您使用的是钩子。

我已经为您创建了两个包装器，一个用于Legend，另一个用于可视化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;
};