Я пытался добавить легенду и / или раздел информации в правом верхнем углу, чтобы показать описание моего выделенного состояния, но я не смог этого сделать, поэтому мне пришлось опубликовать некоторые рекомендации.
Я использую 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='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
<GeoJSON
data={geoJson}
style={GetStyle}
onEachFeature={onEachFeature}
ref={geoJsonRef}
/>
</Map>
</div>
);
};
export default App;
Заранее извините за блоб кода. Просто не знаете, как реализовать легенду или информацию, как в документальном шоу. Буду признателен за любые советы или примеры, спасибо за чтение!