传单-多色图案填充

Question

我需要在多边形要素中实施多色填充。填充将根据要素属性进行有条件的格式化。

假设我需要一个具有 3 色图案的多边形，如下所示：

let fillPalette = ['orange', 'green', 'blue'];

在 Leaflet 中这怎么可能？

在一个简单的 div 中，这可以通过以下 CSS 函数轻松实现：

background: repeating-linear-gradient(
  -45deg,
  orange,
  orange 10px,
  green 10px,
  green 20px,
  blue 20px,
  blue 30px
);

但是，Leaflet 使用 SVG/Canvas。

我知道以下插件：

不幸的是，第一个似乎不支持多色模式，第二个仅支持图像。

有什么想法吗？

Answer 1

对于任何感兴趣的人，这是我提出的解决方案：

当我们创建多边形时，我们设置fillColor值指向我们稍后定义的线性渐变。

let polygon = L.polygon(coords, {fillColor: 'url(#stripes)', fillOpacity: 1})

条纹是使用线性渐变创建的，没有颜色混合，如下所示：

let fillPalette = ['orange', 'green', 'blue'];

let gradientString = `<linearGradient id="stripes" x1="0%" y1="0%" x2="100%" y2="100%">
   <stop offset=0 stop-color=${fillPalette[0]} />
   <stop offset=33% stop-color=${fillPalette[0]} />
   <stop offset=33% stop-color=${fillPalette[1]} />
   <stop offset=66% stop-color=${fillPalette[1]} />
   <stop offset=66% stop-color=${fillPalette[2]} />
   <stop offset=100% stop-color=${fillPalette[2]} />
</linearGradient>`

然后我们需要定义上面的线性渐变inside SVG。可以按如下方式操作 SVG：

let svg = document.getElementsByTagName('svg')[0];
let svgDefs = document.createElementNS("http://www.w3.org/2000/svg", 'defs');
svgDefs.insertAdjacentHTML('afterbegin', gradientString);
svg.appendChild(svgDefs);

这是一个工作fiddle：https://jsfiddle.net/oyu60f1t/

传单-多色图案填充

Leaflet - multicolor pattern fill

svg

leaflet

fill