在应用不透明度之前，传单重叠多边形合并

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'});

从上面的代码中可以看出，我尝试将adding the polygons with full opacity to a pane and then setting the opacity of the pane 透明化。然而，这似乎递归地设置图层的不透明度，而不是将整个窗格设置为一个实心图层。

以前我也尝试过使用 Turf.js union 合并多边形，结果很好。然而，对于数百个多边形来说，这在计算上是昂贵且不切实际的。这也使得逐层动态添加和删除层变得困难。

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

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

我还在考虑将多边形渲染为服务器上的 PNG 地图图块，并提供栅格化图块并将不透明度应用于它们。但是我可以在服务器上使用什么工具来做到这一点？

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

Answer 1

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

使用L.Canvas 作为多边形的目标L.Renderer，然后将不透明度应用于相应的HTMLCanvasElement 或其父对象之一 - 例如包含 HTMLCanvasElement 的 Leaflet 窗格。

例如：

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);

这有点像 hack，但应该适用于您的用例。