Перекрывающиеся полигоны листовок объединяются перед применением непрозрачности - PullRequest
Новая
       12

Перекрывающиеся полигоны листовок объединяются перед применением непрозрачности

1 голос
/ 05 июля 2019

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

A minimum example of overlapping polygons adding their opacity

Способ добавленияполигоны на карту выглядят следующим образом: 

map = L.map('map');
var coveragePane = map.createPane('coverage');
coveragePane.style.opacity = 0.2;

let geojsonBlue = L.geoJson(data, 
  {
    stroke: false, 
    // fillOpacity: 0.25,
    fillColor: "#0000FF",
    zIndex: 25,
   }
);
geojsonBlue.addTo(map, {pane: 'coverage'});

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

Ранее я также пытался объединить полигоны с помощью объединения Turf.js, которое дало хороший результат.Это, однако, вычислительно дорого и непрактично для сотен полигонов.Это также затрудняет динамическое добавление и удаление слоев один за другим.

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

В одном вопросе упоминается D3.js , но я не уверен, имеет ли это отношение к полигонам.

Я также подумываю о рендеринге полигонов в тайлы карты PNG.на сервере и раздача растеризованных плиток и применение к ним прозрачности.Но какой инструмент я могу использовать на сервере для этого?

Посмотрите этот пример того, что я пытаюсь исправить.

1 Ответ

0 голосов
/ 05 июля 2019

Есть ли другой способ объединить визуализированные полигоны (в растровом мире, а не в векторном мире) перед применением прозрачности / непрозрачности?

Используйте L.Canvas в качествевыберите для полигонов L.Renderer, затем примените прозрачность к соответствующему HTMLCanvasElement или одному из его родителей - например, к панели Leaflet, содержащей HTMLCanvasElement.

, например: 

map.createPane('semitransparent');
map.getPane('semitransparent').style.opacity = '0.5';
var canvasRenderer = L.canvas({pane: 'semitransparent'});
L.polygon(..., {renderer: canvasRenderer}).addTo(map);
L.polygon(..., {renderer: canvasRenderer}).addTo(map);

Это что-то вроде хака, но должно работать для вашего случая использования.

...