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

【问题标题】：Leaflet - change the color of polyline while opening a popupLeaflet - 打开弹出窗口时更改折线的颜色
【发布时间】：2018-03-02 10:18:49
【问题描述】：

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

        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" });
    });
        }

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

例子：

折线默认为黑色
它变为蓝色，而我将光标悬停在它上面
当我点击折线时，弹出窗口打开并且折线保持蓝色
当我关闭弹出窗口时，折线的颜色变回黑色（默认）

【问题讨论】：

标签： javascript leaflet gis geojson

【解决方案1】：

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

更多信息在这里Popup events

【讨论】：

对不起，我不是很熟练。有什么可行的例子吗？

【解决方案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"});
});

【讨论】：

【解决方案3】：

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

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

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

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

This 是这个样子

【讨论】：