Объединение прозрачных объектов при наложении и полное экранирование одних другими

Question

Вывожу на карту много меток, использую геометрию метки круг (Circle). Метки имеют прозрачность. При пересечение нескольких меток они наслаиваются друг на друга, в какой-то момент становятся совсем непрозрачными.

Метки выводятся из json представления с помощью geoQuery (ObjectManager по некоторым причинам использовать не могу).

Мне нужно сделать так, чтобы при пересечении метки не наслаивались, а как бы сливались друг с другом, если они одного цвета. Но у меня метки разного цвета и в случае пересечения меток разного цвета нужно, чтобы один цвет перекрывал другой (например есть синяя и красная метка и чтобы та часть красной, которая пересекается с синей была не видна вообще, видна только синняя, а остальная часть красной, которая ни с чем не пересекается была видна).

Идеальный пример того как мне нужно: https://geo.minsvyaz.ru

Подскажите как такое реализовать

Answer 1

Если нужно как в идеальном примере, потребуется:

Добавить подвижный полупрозрачный пейн чуть выше 'areas'.
Добавлять все круги строго непрозрачными на созданный пейн, с нулевой обводкой, с необходимым параметром zIndex.

Тогда перекрываться они будут друг другом полностью, а уже результирующий слой будет прозрачным.

Если после потребуется прозрачное наложение, можно будет добавить дополнительный такой пейн и распределять объекты по созданным пейнам.

var newPane = new ymaps.pane.MovablePane(myMap, {zIndex: 210, overflow: 'hidden', css:{opacity: 0.5}});
myMap.panes.append("circlePane", newPane);

myMap.geoObjects.options.set({'fillOpacity': 3, 'strokeWidth': 0, 'pane': 'circlePane'});

var myCircle1 = new ymaps.Circle([[55.76, 37.60], 10000], {}, {
    fillColor: "#FF0000",
    zIndex: 1
}),
myCircle2 = new ymaps.Circle([[55.76, 37.80], 10000], {}, {
    fillColor: "#0000FF",
    zIndex: 0
});

myMap.geoObjects.add(myCircle1).add(myCircle2);

Реализация на jsfiddle: https://jsfiddle.net/Coroner1st/ym1v5qbt/7/

БЛОГ НА HUSL

Объединение прозрачных объектов при наложении и полное экранирование одних другими

Ответы (1 шт):