鼠标悬停时GeoJSON图层的颜色变化

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<div id="map" style="width: 800px; height: 600px;"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
    }).addTo(map);
</script>

<script>
    var geojsonFeature = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[51.509, -0.08], [51.503, -0.06], [51.51, -0.047], [51.52, -0.06], [51.51, -0.08]]]
        }
    };

    var geojsonLayer = L.geoJSON(geojsonFeature).addTo(map);
</script>

<script>
    geojsonLayer.on('mouseover', function (e) {
        var layer = e.target;
        layer.setStyle({
            fillColor: 'red' // 设置图层颜色为红色
        });
    });

    geojsonLayer.on('mouseout', function (e) {
        var layer = e.target;
        layer.setStyle({
            fillColor: 'blue' // 设置图层颜色为蓝色（恢复默认颜色）
        });
    });
</script>