我有一张传单 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 并对它们应用不透明度。但是我可以在服务器上使用什么工具来执行此操作?
最佳答案
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,但应该适用于您的用例。
关于javascript - 在应用不透明度之前合并小叶重叠多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56903397/