Question

我无法在传单多边形上重置样式。 setStyle在悬停时效果很好，但是当我停止悬停时重置它不起作用。我得到 Uncaught TypeError：对象[object Object]没有方法'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);
});

Answer 2

这可能是一个背景问题：

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

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

如何在多边形上重置样式？

2 个答案: