Mapbox v2升级后线图层重叠加深效果消失如何配置恢复

问题原因 #

Mapbox GL JS v1版本默认逐要素绘制线图层，半透明线条重叠区域的alpha值会自然累加，呈现饱和度更高的深色效果。v2版本为提升渲染性能，对未配置排序规则的同图层线要素默认开启合批渲染优化，跳过逐要素混合计算，因此重叠区域颜色和单条线条一致，叠加效果消失。

解决方法 #

在现有线图层的layout配置中新增line-sort-key属性即可，无需修改其他原有样式参数，配置参考如下：

{
    type: 'line',
    'source-layer': 'pluto15v1',
    "layout": {
      "line-round-limit": 1,
      "line-cap": "round",
      "line-miter-limit": 0,
      "line-join": "round",
      "line-sort-key": 0
    },
    "paint": {
        "line-color": [
            "step",
            ["zoom"],
            "hsla(0, 86%, 56%, 0.2)",
            7,
            "hsla(0, 86%, 56%, 0.58)",
            13,
            "hsl(0, 86%, 56%)",
            22,
            "hsla(0, 86%, 56%, 0.29)"
        ],
        "line-width": [
            "interpolate",
            ["linear"],
            ["zoom"],
            9,
            13,
            16,
            22,
            22,
            22
        ],
        "line-opacity": 0.76
    }
}

• line-sort-key的值可根据实际要素排序需求设置，所有要素统一设为固定值也可触发逐要素渲染逻辑，恢复v1版本的叠加效果。
• 该配置在Mapbox GL JS 2.8.1版本下验证有效。

备选方案 #

如果添加line-sort-key后效果未达预期，可以在paint配置中增加一个极小的line-blur值（如"line-blur": 0.05），强制关闭合批渲染，该参数值极小，对线条视觉表现几乎无影响。

注意事项 #

逐要素渲染会带来极小幅的性能损耗，常规十万级以内数据量下无感知，若数据量级超过百万要素，需要提前评估性能影响。

内容的提问来源于stack exchange，提问作者Jorge Monroy