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

【问题标题】：How do I change the stroke color for polylines?如何更改折线的笔触颜色？
【发布时间】：2019-07-26 10:25:38
【问题描述】：

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

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

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

还有这个。

selectedLayer.color = "#2196F3";

还有这个。

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

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

【问题讨论】：

我建议你随机检查documentation about L.Polyline而不是console.log()ing。

标签： javascript leaflet leaflet.draw

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

【讨论】：

最新版本是1.5.1

【解决方案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>

【讨论】：