javascript - 如何重置多边形的样式？

Question

我无法在传单多边形上重置样式。 setStyle 在悬停时工作得很好，但是当我停止悬停时重置它不起作用。我遇到了Uncaught TypeError: Object [object Object] has no method 'resetStyle'。我了解该错误的含义，但我不知道如何正确执行此操作。

提前致谢。

$.getJSON('geoJSON.json', function (json) {
    L.geoJson(json, {
        ...
        onEachFeature: function (feature, layer) {
            var defaultStyle = layer.style;

            layer.on('mouseover', function (e) {
                this.setStyle({
                    color: '#2262CC',
                    weight: 3,
                    opacity: 0.6,
                    fillOpacity: 0.65,
                    fillColor: '#2262CC'
                });
            });
            layer.on('mouseout', function (e) {
                this.resetStyle();
            });
        }
    }).addTo(map);
});

Answer 1

上面的代码失败了，因为 resetStyle 函数可以在 geojson 层中找到，而不是在“this”指向的层中找到。

geojson 层还需要为默认样式设置样式路径选项，以便 resetStyle 起作用。

$.getJSON('geoJSON.json', function (json) {
    var geojson = L.geoJson(json, {
        ...
        style: <default style here>
        onEachFeature: function (feature, layer) {
            var defaultStyle = layer.style;

            layer.on('mouseover', function (e) {
                this.setStyle({
                    color: '#2262CC',
                    weight: 3,
                    opacity: 0.6,
                    fillOpacity: 0.65,
                    fillColor: '#2262CC'
                });
            });
            layer.on('mouseout', function (e) {
                geojson.resetStyle();
            });
        }
    }).addTo(map);
});