Javascript 添加有关高亮显示状态的图例和信息

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

我将

React 16.13

与

typescript

一起使用，因此在这个阶段使用钩子，而不是类组件（仍然可以使用，但尽量避免使用）。我使用的库是React传单。我整天都在网上阅读，我不知道如何将这两件事添加到我的项目中，我想一旦我知道如何做一件事，另一件就会很容易实现

下面是我的代码：

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;

const-App:React.FC=（）=>{
常量[mapCenter，setMapCenter]=useState([
36.778259,
-119.417931
]);
const[geoJson，setGeoJson]=useState（[]）；
const geoJsonRef=useRef（null）；
useffect（（）=>{
if（data.type==“拓扑”）{
for（输入data.objects）{
if（data.objects.hasOwnProperty（键））{
setGeoJson（topojson.feature（data，data.objects[key]）；
}
}
}
}, []);
const highlightFeature=（e:L.mouseevent）=>{
设层=e.目标；
layer.setStyle({
体重：5，
颜色：#666“，
dashArray:“”，
填充不透明度：0.7
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
};
const resetHighlight=（e:L.mouseevent）=>{
geoJsonRef.current.element.resetStyle（e.target）；
};
constOneachFeature=（feature:GeoJSON.feature，layer:L.layer）=>{
layer.bindPopup（feature.properties！.NAME10）；
分层({
鼠标悬停：Highlight功能，
mouseout:resetHighlight
});
};
返回(
);
};
导出默认应用程序；

---

事先为这一团代码感到抱歉。只是不知道如何实现传奇或信息大如文件显示。任何建议或例子将不胜感激，感谢阅读

反应传单只是一个包装。您只需使用本机传单代码的片段，以使您的信息块更有组织性和可重用性

您可以使用本地传单的代码。要实现图例和突出显示的信息框，您需要做的唯一一件事就是拥有一个地图参考，您可以使用

useploaple

hook获取该参考，因为您使用的是hook

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

const HighlightedGeoJson=（）=>{
const{map}=useplopal（）；
useffect（（）=>{
//控件，该控件在悬停时显示状态信息
const info=L.control（）；
info.onAdd=（）=>{
info._div=L.DomUtil.create（“div”，“info”）；
info.update（）；
返回信息。\u div；
};
info.update=props=>{
信息。\u div.innerHTML=
“美国人口密度”+
（道具
? "" +
道具名称+
“
”+
道具密度+
“人民/军情二处”
：“在一个州上空盘旋”）；
};
信息地址（地图）；
const highlightFeature=e=>{
常数层=e.目标；
layer.setStyle({
体重：5，
颜色：#666“，
dashArray:“”，
填充不透明度：0.7
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
信息更新（图层、特征、属性）；
};
让我们一起来；
const resetHighlight=e=>{
geojson.resetStyle（e.target）；
info.update（）；
};
常数zoomToFeature=e=>{
fitBounds（e.target.getBounds（））；
};
const onEachFeature=（特征，层）=>{
分层({
鼠标悬停：Highlight功能，
mouseout:resetHighlight，
单击：缩放自然
});
};
geojson=L.geojson（statesData{
风格
onEachFeature:onEachFeature
}).addTo（地图）；
}, []);
返回null；
};

---

您好，您如何访问L.Browser/您如何在此处定义

L

<代码>使用传单不包括Browser object.Hi<代码>使用传单和

L

是两件不同的事情。它们之间没有相关性<代码>L可通过导入查看演示了解更多信息。实际上，解决方案是

从“传单”导入L。我认为，
react传单
过去在这方面有误导性的例子（或者只是我），在v3中，您使用了
useMap
，以防止混淆。