使用MapContainer显示React Leaflet图例

Question

我正在使用React leaflet 3.1.0，我想在地图上显示一个图例。我为从MapContainer whenCreated({setMap})获得的图例和通过图实例构建了一个组件。

Map组件：

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='&copy; <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

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

我没有得到任何错误，但图例看不到。

Answer 1

尝试将映射实例放置在依赖项数组中。在第一个渲染贴图中为空，因此无法将图例添加到贴图中。

function Legend({ map }) {
  console.log(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);
    }
  }, [map]); //here add map
  return null;
}

Demo