Leaflet - 打开弹出窗口时更改折线的颜色

Question

这就是我所拥有的。 当我将鼠标光标悬停在多段线上时，它会改变颜色。

        onEachFeature: function (feature, layer) {
    var popupContent = "<div class=popup>Sample text in popup.</div>";
    layer.bindPopup(popupContent);
    layer.on('mouseover', function(){
    layer.setStyle({ color: "#0000FF" });
    });
    layer.on('mouseout', function(){
    layer.setStyle({ color: "#000" });
    });
        }   

如何在弹出窗口打开时保持折线的颜色变化？

例子：

• 折线默认为黑色
• 当我将光标悬停在它上面时它变为蓝色
• 当我单击多段线时，弹出窗口正在打开并且多段线保持蓝色
• 当我关闭弹出窗口时，折线的颜色恢复为黑色（默认）

Answer 1

折线还具有诸如popupopen, popupclose事件。 您可以在打开弹出窗口时更改颜色（也必须使用.off()方法禁用与悬停有关的事件）。

更多信息在这里Popup events

Answer 2

您可以使用变量来跟踪弹出窗口是否打开：

var popupIsVisible = false;

polyline.on('mouseover', function (e) {
    if (!popupIsVisible) e.target.setStyle({color: "#0000FF"});
});

polyline.on('mouseout', function (e) {
    if (!popupIsVisible) e.target.setStyle({color: "#000"});
});

polyline.on('popupopen', function (e) {
    popupIsVisible = true;
    e.target.setStyle({color: "#0000FF"});
});

polyline.on('popupclose', function (e) {
    popupIsVisible = false;
    e.target.setStyle({color: "#000"});
});

Answer 3

您还可以将不透明度保持为零 (o) 并将颜色更改为您想要的任何颜色。 例如

L.geoJSON(statesData, {
    style: innerstyle
}).addTo(map);

function innerstyle(feature) {
    return {
        color: "#CF01FD",
        weight: 1,
        fillOpacity: .01
    }
}

//这里“statesData”是任何geojson数据集

这是它的样子