如何解决React Leaflet 使用 MapContainer 显示图例
我使用的是 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
映射 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;
}
我没有收到任何错误,但无法看到图例。
解决方法
尝试将地图实例放置在依赖项数组中。在第一个渲染图中为空,因此无法将图例添加到地图中。
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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。