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

折线也有<link rel="import" href="sections/about.html"> <link rel="import" href="sections/windows/windows.html"> <link rel="import" href="sections/windows/crash-hang.html"> <link rel="import" href="sections/menus/menus.html">等事件。弹出窗口打开时可以更改颜色（还必须使用方法const path = require('path')禁用与悬停关联的事件。）

此处有更多信息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数据集

This是什么样子

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

3 个答案: