Мне нужно реализовать многоцветную заливку полигона. Заливка будет условно отформатирована в соответствии со свойствами объекта.
Допустим, мне нужен многоугольник с трехцветным узором, например:
let fillPalette = ['orange', 'green', 'blue'];
Как это возможно в Листовке?
В простом div
этого можно легко добиться с помощью следующей функции CSS:
background: repeating-linear-gradient(
-45deg,
orange,
orange 10px,
green 10px,
green 20px,
blue 20px,
blue 30px
);
Однако Leaflet использует SVG/Canvas.
Мне известны следующие плагины:
К сожалению, первый не поддерживает многоцветные шаблоны, а второй поддерживает только изображения.
Есть идеи?
@ccprog проблема в том, что SVG создаются Leaflet, и поэтому нет прямого способа определить шаблон внутри SVG.
Кому интересно, вот решение, которое я придумал:
Когда мы создаем полигон, мы устанавливаем значение 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>`
Затем нам нужно определить вышеуказанный линейный градиент внутри 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);
Вот рабочая рабочий пример: https://jsfiddle.net/oyu60f1t/
Ознакомьтесь с шаблонами SVG : css-tricks.com/snippets/svg/svg-patterns