Leaflet鼠标悬停时图层样式无法保持高亮的问题求助

问题原因 #

你代码中的setSelected是React状态更新函数，状态更新会触发组件重渲染，导致地图图层被重新渲染，之前通过setStyle设置的高亮样式被重置回默认值，所以高亮仅维持到重渲染完成的短暂时间。

解决方案 #

1. 保留高亮图层引用，重渲染后恢复样式 #

在组件内维护变量存储当前高亮的图层实例，在状态更新触发重渲染后，重新为该图层应用高亮样式：

// 组件内定义变量存储高亮图层
let highlightedLayer = null;

function highlightFeature(e) {
    var layer = e.target;
    const { name, CWILAYA } = e.target.feature.properties;
    setSelected({
        name: name,
        CWILAYA: CWILAYA
    });
    // 保存当前高亮图层的引用
    highlightedLayer = layer;
    layer.setStyle({
        weight: 6,
        fillOpacity: 1
    });
    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
}

// 新增mouseout事件，重置图层默认样式
function resetHighlight(e) {
    var layer = e.target;
    // 这里替换成你自己的默认样式参数
    layer.setStyle({
        weight: 2,
        fillOpacity: 0.5
    });
    highlightedLayer = null;
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
}

// 在React组件中添加useEffect，状态更新后恢复高亮样式
useEffect(() => {
    if (highlightedLayer) {
        highlightedLayer.setStyle({
            weight: 6,
            fillOpacity: 1
        });
        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            highlightedLayer.bringToFront();
        }
    }
}, [selected]);

2. 避免图层因重渲染重复创建 #

如果你的图层是在组件渲染函数内直接创建的，每次重渲染都会重新生成图层实例，导致之前的样式丢失。可以用useRef存储图层实例，确保图层只初始化一次：

import { useRef, useEffect } from 'react';

function YourMapComponent() {
    const mapRef = useRef(null);
    const geoJsonLayerRef = useRef(null);

    useEffect(() => {
        // 仅在组件首次挂载时初始化地图和图层
        if (!mapRef.current) {
            const map = L.map('map').setView([36.7201600, 3.1800000], 6);
            mapRef.current = map;

            // 加载GeoJSON数据并创建图层，存入ref
            geoJsonLayerRef.current = L.geoJson(yourGeoData, {
                onEachFeature: onEachFeature
            }).addTo(map);
        }
    }, []);

    // 高亮、重置函数保持上述修改后的逻辑
}

额外检查点 #

• 确认没有其他定时任务或第三方插件在自动重置图层样式
• 检查默认样式的定义，确保重置样式的参数与初始样式一致

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