如何更改折线的笔触颜色？

Question

我的Web应用程序允许用户在其上绘制折线。我想为用户提供更改折线的笔触颜色的选项。

我在控制台日志中查看了折线对象。在options属性中，有一个称为color的属性。我已经尝试过了。

selectedLayer.options.color = "#2196F3";

还有这个。

selectedLayer.color = "#2196F3";

还有这个。

selectedLayer.setStyle({ color: "#2196F3"});

笔触颜色应该已经改变，但是没有改变。创建折线后，设置折线笔触颜色的正确方法是什么？据我所知，这与多边形的fillColor属性无关。

Answer 1

使用传单的最新版本为1.5。下面的代码将为您服务。

var polyline = new L.Polyline([
  [-45, 45],
  [45, -45]
], {
  color: 'green',
  weight: 5,
  opacity: 0.5
}).addTo(map);

map.fitBounds(polyline.getBounds());
polyline.setStyle({color:'#2196F3'});

Answer 2

您可以使用css variables。 看下面的例子：

const div = document.querySelector('div');
document.querySelector('button')
  .addEventListener('click', () => {
    div.style.setProperty('--line-color', 'green');
  });

:root {
  --line-color: red;
}

div {
  border: 1px solid var(--line-color);
  width: 250px;
  height: 250px;
}

<div>Hello world</div>

<button>Change color to green</button>