我正在使用 React leaflet 3.1.0,我想在地图中显示图例。
我为图例构建了一个组件,并传递从 MapContainer whenCreated({setMap}) 获取的地图实例。
地图组件:
import { useState } from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import './Map.css';
import Legend from './Legend/Legend';
const INITIAL_MAP_CONFIG = {center: [41.98311,2.82493], zoom: 14}
function Map() {
const [map, setMap] = useState(null);
return (
<MapContainer center={INITIAL_MAP_CONFIG.center} zoom={INITIAL_MAP_CONFIG.zoom} scrollWheelZoom={true} whenCreated={setMap}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Legend map={map} />
</MapContainer>
)
}
export default Map
图例组件:
import { useEffect } from 'react';
import L from 'leaflet';
function Legend({ map }) {
useEffect(() => {
if (map){
const legend = L.control({ position: "bottomright" });
legend.onAdd = () => {
const div = L.DomUtil.create('div', 'info legend');
div.innerHTML =
'<h4>This is the legend</h4>' +
'<b>Lorem ipsum dolor sit amet consectetur adipiscing</b>';
return div;
}
legend.addTo(map);
}
},[]);
return null
}
export default Legend
Map CSS:
.leaflet-container {
width: 100vw;
height: 100vh;
}
图例CSS:
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
border-radius: 5px;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
我没有收到任何错误,但看不到图例。