当我用钩子缩放地图时，如何使标记显示在地图上

Question

我对前端开发相对陌生，在找到合适的文档来帮助我实现这一功能方面遇到了问题。我一直在尝试使用react传单和react Hooks使一些标记在缩放到某个级别时出现。

这是我的地图代码：

import React, { useEffect } from 'react'; 
import { MapContainer, TileLayer, LayerGroup, Marker } from 'react-leaflet';
import TanitMarker from './marker';
import ZoomControlledLayer from './zoom-controlled-layer';
import CustomPopup from './popup';
import './my-map.scss';
function MyMap() {
const hotel = {
thumbnail: {
src: "./hotel.jpg"
},
name: "",
title: "****",
}
useEffect(() => {
console.log('Map is mounted!');
}, []); 

return (
<div className="map-container">
<MapContainer center={[35.741728, 10.626254]} zoom={8} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<ZoomControlledLayer zoomRef={7}>
<LayerGroup>
<Marker position={[36.4242, 10.6749]}
riseOnHover={true}>
<CustomPopup site={hotel}></CustomPopup>
</Marker>
</LayerGroup>
</ZoomControlledLayer>
</MapContainer>
</div>
)
}
export default MyMap;

我试图使ZoomControlledLayer下的LayerGroup在达到缩放级别7时出现。

提前谢谢。

Answer 1

TileLayers和GridLayers有一个maxZoom和minZoom属性，但看起来LayerGroup没有，所以您必须手动实现它。首先，让我们在状态变量中跟踪地图的缩放级别

import { MapContainer, useMapEvents } from 'react-leaflet';
function ZoomTracker = ({ setZoom }) => {
const map = useMapEvents({
zoom(){
setZoom(map.getZoom())
}
})
return null
}
function MyMap(){
const [zoom, setZoom] = useState()
return (
<MapContainer>
<ZoomTracker setZoom={setZoom} />
<ZoomControlledLayer zoom={zoom} minZoom={7}>
{...all_the_stuff_in_here}
</ZoomControlledLayer>
</MapContainer>
)
}

因此，现在MyMap正在跟踪状态中的当前缩放级别，并将其传递给ZoomControlledLayer组件。现在在您的ZoomControlledLayer:中

const ZoomControlledLayer = ({ zoom, minZoom, children }) => {
if (zoom >= minZoom){
return (
<>
{children}
</>
);
} else {
return null;
}
}

因此，ZoomControlledLayer仅在贴图缩放与minZoom相同或更大时渲染任何内容。我还没有测试过，但希望它足以让你继续前进。您可以在这里阅读更多关于使用react传单v3中的映射事件的信息。