Question

我正在使用Leaflet使用javascript在地图上绘制SVG格式的地图数据。我有一组成千上万的坐标，其中我正在绘制一个Leaflet Path（扩展L.Browser.svg）。

我想用第三个变量对线进行颜色编码（因为这是一个地图，比如高度，蓝色低，红色高，或类似的东西）。我是SVG的新手，但似乎我只能为整个路径设置一个笔触颜色。

E.g。我现在拥有的 - 行只是一种颜色（为简单起见，概念代码被剥离）：

// create the SVG group and path element
this._container = this._createElement('g');
this._path = this._createElement('path');
// set the stoke color -- I wish I could make this dynamic per segment!
this._path.setAttribute('stroke', '#00000');

// Not real code, but simplified...generate lots of coordinates for the polyline
var myPath = "M" + p.x + "," + p.y + " L";
points.each(function(item, index){
    poly += item.x + "," + item.y + " ";                    
});

// update
this._path .setAttribute('d', poly);

有没有更好的方法来创建数千个路径元素并将它们添加到SVG组，每个元素都有自己的笔触颜色？

Answer 1

有一种方法可以实现这一目标，但这也是很多工作。如果您有一个具有正确颜色编码(something like this)的完整图像，则可以使用SVG过滤器将该图像与您的路径合成：即时路径着色。你也可以使用SVG蒙版来达到同样的效果。如果您没有该图像，那么您可以在SVG中构建一个图像，但它可能会有相似的工作量。

多色SVG折线

1 个答案: