Question

Vue2Leaflet是一个库，用于在Vue2框架中实现Leaflet；可以在地图上显示GeoJSON对象。

对于多条GeoJSON行，我希望有一个鼠标单击事件来影响其他行的样式（例如，它会切换<div class="panel-footer custom-footer"></div>变量）。我设法改变了鼠标上方的geojson线的样式。参见此JSFiddle。

核心是selectedLineId，它将鼠标悬停事件添加到每个功能。但是我不知道如何从这里运行Vue方法；

onEachFeature

Answer 1

您可以将onEachFeature函数bind应用于Vue对象：

data() {
    return {
        // ...
        lines: {
            geojson: geojsondata,
            options: {
                onEachFeature: onEachFeature.bind(this),
                style: {
                    color: "#000000"
                }
            }
        }
    }
}

然后，this中的

onEachFeature将引用您的Vue对象：

function onEachFeature (feature, layer) {
    var v = this;

    layer.on('mouseover', function (e) {
        // assuming you have a getColor method defined
        e.target.setStyle({
            color: v.getColor()
        });
    });
    layer.on('mouseout', function (e) {
        e.target.setStyle({
            color: "#000000"
        });
    });
}

这是更新的小提琴：https://jsfiddle.net/qywaz1h8/96/

GeoJSON-onEachFeature中的方法

1 个答案: