React-Leaflet点击GeoJSON实体时高亮样式不生效问题求助

按照教程制作分级着色地图，GeoJSON数据导入、颜色配置均正常，但点击实体时，虽然信息能正常显示，边框却没有按配置变大：

点击实体前：

点击实体后：

问题代码 #

import React,{useState} from 'react';
import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet'
import data from  '../GeoJSON/data_exemple_PRA.json';
import 'leaflet/dist/leaflet.css';

function CarteRisquesPRACour() {
    const [onselect, setOnselect] = useState({});
    /* function determining what should happen onmouseover, this function updates our state*/
    const highlightFeature = (e=> {
        const { risques7, libelle } = e.target.feature.properties;
        e.target.setStyle({
            strokeWidth: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });
        setOnselect({
            risques:risques7,
            libelle:libelle,
        });
    });
    /*resets our state i.e no properties should be displayed when a feature is not clicked or hovered over */
    const resetHighlight= (e =>{
        setOnselect({});
        e.target.setStyle(style(e.target.feature));
    })
    /* this function is called when a feature in the map is hovered over or when a mouse moves out of it, the function calls two functions
     highlightFeature and resetHighlight*/
    const onEachFeature= (feature, layer)=> {
        layer.on({
            click: highlightFeature,
            mouseout: resetHighlight
        });
    }

    const getColorRisVulne=(d => {
        return  d > 3500 ? '#530d0d' :
                d > 2750 ? '#530d0d' :
                d > 2500 ? '#69120e' :
                d > 2000 ? '#7f1810' :
                d > 1750 ? '#941d11' :
                d > 1500 ? '#aa2213' :
                d > 1000 ? '#c02714' :
                d > 750 ? '#cb3915' :
                d > 670 ? '#cf5315' :
                d > 650 ? '#d36e15' :
                d > 600 ? '#d78815' :
                d > 520 ? '#dba215' :
                d > 490 ? '#debd15' :
                d > 465 ? '#e2d715' :
                d > 430 ? '#d6d616' :
                d > 400 ? '#c7ce17' :
                d > 360 ? '#b7c517' :
                d > 320 ? '#a8bd18' :
                d > 275 ? '#98b519' :
                d > 210 ? '#89ad1a' :
                d > 190 ? '#6f9917' :
                d > 165 ? '#558415' :
                d > 140 ? '#3b6f12' :
                d > 110 ? '#205a10' :
                d > 0 ? '#06450e' :
                '#ffffff'; //le dernier on ne met pas son nom car le reste
    })
    const style = (feature => {
        return ({
            weight: 0.5,
            opacity: 1,
            color: '#000000',
            dashArray: '3',
            fillOpacity: 0.7,
            fillColor: getColorRisVulne(feature.properties.risques7)
        });
    });
    const feature = data.features.map(feature=>{
        return(feature);
    });
    return(
        <div className="totalCarte">
            <div className="">
                {!onselect.risques && (
                <div className='paragraphe infos_carte'>
                    Cliquez sur une zone pour avoir plus de détails
                </div>
                )}
                {onselect.risques && (
                    <div className='paragraphe infos_carte' >
                        {onselect.libelle} : {onselect.risques} €/ha
                    </div>
                )}
                <MapContainer center={[48.832,2.623]} zoom={10} scrollWheelZoom={false} >
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <GeoJSON data={feature}
                    style={style} 
                    onEachFeature={onEachFeature}/>
                </MapContainer>
            </div>
        </div>

    )
}

export default CarteRisquesPRACour;

解决方法 #

问题出在highlightFeature函数里的样式属性名错误：Leaflet中控制边框宽度的属性是weight，而非strokeWidth。把strokeWidth: 5改成weight: 5即可生效。

修改后的highlightFeature函数：

const highlightFeature = (e=> {
    const { risques7, libelle } = e.target.feature.properties;
    e.target.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });
    setOnselect({
        risques:risques7,
        libelle:libelle,
    });
});

若要高亮效果更突出，可额外添加opacity: 1确保边框完全不透明，避免和原有样式冲突。

内容的提问来源于stack exchange，提问作者Aliénor