在应用不透明度之前合并小叶重叠多边形

Question

我有一张传单地图，我在其中添加了数百个多边形。有时会发生许多多边形重叠在同一点，增加它们的不透明度，最终无法看到底图。

我将多边形添加到地图的方式如下：

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 并集合并多边形，结果很好。然而，对于数百个多边形而言，这在计算上是昂贵且不切实际的。这也使得逐层动态添加和删除层变得困难。

在应用 transparency/opacity.

之前，是否有另一种方法可以合并渲染的多边形（在光栅化世界中，而不是矢量世界中）

One question mentions D3.js，但我不确定这是否与多边形相关。

我也在考虑在服务器上将多边形渲染为 PNG 地图图块，并提供栅格化图块并对它们应用不透明度。但是我可以在服务器上使用什么工具来执行此操作？

See this example of what I'm trying to fix.

Answer 1

Is there another way one can merge the rendered polygons (in the rasterized world, not the vector world) before applying the transparency/opacity?

使用 L.Canvas 作为多边形的目标 L.Renderer，然后将不透明度应用于相应的 HTMLCanvasElement 或其父项之一 - 例如包含 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);

这有点骇人听闻，但应该适用于您的用例。

在应用不透明度之前合并小叶重叠多边形

Leaflet overlapping polygons merge before applying opacity

javascript

css

geojson

leaflet