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

Question

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

我将多边形添加到 map 的方式如下:

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透明。然而，这似乎递归地设置了图层的不透明度，而不是将整个 Pane 设置为一个实心图层。

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

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

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

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

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 或其中之一它的 parent - 例如包含 HTMLCanvasElement 的 Leaflet Pane 。

例如:

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，但应该适用于您的用例。