在React Leaflet中通过Map.Locate获取GeoJSON要素的方法

开发导入GeoJSON数据的地图时，需要实现「定位我」按钮功能：点击后将地图缩放至用户位置，并获取该位置所在GeoJSON区域的关联属性。目前点击地图区域能成功获取属性，但调用map.locate()时无法实现该功能。尝试在GeoJSON组件的onEachRegion方法中给每个区域图层添加locationfound监听器，但该监听器从未触发。

相关代码如下：

MapView组件 #

//...Imports
export const MapView: React.FC<{
    setRegion: any,
    locating: boolean,
    setLocating: any
}> = (props) => {

    const geoStyle = {
        fillOpacity: 0,
        weight: 0.5
    }

    const onEachRegion = (region: Feature, layer: L.Layer) => {
        const code = region.properties?.BCR;

        layer.on({
            click: (event: L.LeafletEvent) => {
                props.setRegion(code)
            }
        })

        // 无效的监听器：locationfound是Map对象触发的，不是单个区域图层
        layer.on({
            locationfound: (event: L.LeafletEvent) => {
                props.setRegion(code)
            }
        })
    }

    return(
        <div>
            <MapContainer center={[45, -95]} zoom={3} attributionControl={false} ref={setMapRef}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
                        contributors'
                    url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <AttributionControl prefix={'Leaflet'}/>
                <GeoJSON
                    data={BCRData as GeoJsonObject}
                    style={geoStyle}
                    onEachFeature={onEachRegion}
                />
                <LocationMarker locating={props.locating} setLocating={props.setLocating} setRegion={props.setRegion} />
            </MapContainer>
        </div>
    )
}

LocationMarker组件 #

export const LocationMarker: React.FC<{
    locating: boolean,
    setLocating: any,
    setRegion: any // 新增：传递setRegion方法
}> = (props) => {
    const [position, setPosition] = useState<LatLngExpression>([0,0]);

    const icon = L.icon( {
        iconUrl: '/images/marker-icon.png',
        iconAnchor: [12, 41],
    });

    const map = useMapEvents({
        click(e) {
            setPosition(e.latlng)
        },
        locationfound(e) {
            setPosition(e.latlng)
            map.flyTo(e.latlng, 8)
            
            // 核心：获取用户位置后，查找所在的GeoJSON区域
            map.eachLayer((layer) => {
                // 判断当前图层是否是目标GeoJSON区域图层
                if (layer instanceof L.GeoJSON && layer.feature?.properties?.BCR) {
                    // 先做粗略范围判断提升性能，再做精确点-in-多边形检测
                    if (layer.getBounds().contains(e.latlng) && 
                        (layer as any).pointInLayer(e.latlng)) {
                        props.setRegion(layer.feature.properties.BCR)
                        return // 找到匹配区域后停止遍历
                    }
                }
            })
        }
    })

    useEffect(() => {
        if (props.locating) {
            map.locate({ enableHighAccuracy: true }) // 可选：开启高精度定位
            props.setLocating(false)
        }
    }, [props.locating]);

    return(
        <Marker position={position} icon={icon} />
    )
}

1. 移除无效监听器：locationfound事件由Leaflet的Map对象触发，并非单个GeoJSON区域图层，给区域图层添加该监听器不会生效，直接删除这部分代码。
2. 传递区域设置方法：给LocationMarker组件新增setRegion属性，让定位成功后能直接设置对应区域属性。
3. 定位后查找所属区域：在locationfound事件回调中，遍历地图所有图层，判断用户位置是否落在目标GeoJSON区域内：
   • 通过图层类型和feature属性筛选出目标区域图层
   • 先用getBounds().contains做粗略范围判断提升性能，再用pointInLayer做精确的点-in-多边形检测
   • 找到匹配区域后调用setRegion并终止遍历

如果GeoJSON数据量较大，遍历所有地图图层会影响性能，建议在MapView中将所有区域图层存储到一个集合中，避免遍历无关图层：

// 在MapView组件中添加
const regionLayers = useRef<Map<string, L.Layer>>(new Map())

const onEachRegion = (region: Feature, layer: L.Layer) => {
    const code = region.properties?.BCR;
    if (code) {
        regionLayers.current.set(code, layer)
    }
    // ...原有click事件逻辑
}

// 将regionLayers通过props或Context传递给LocationMarker，直接遍历该集合查找

内容的提问来源于stack exchange，提问作者isaa