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

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

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

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

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

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

Answer 1

  

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

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

这有点像黑客，但应该适合您的用例。