Mapbox studio - png 标签层 - 透明度显示为黑色答案

【问题标题】：Mapbox studio - png labels layer - transparency showing up as blackMapbox studio - png 标签层 - 透明度显示为黑色
【发布时间】：2020-04-02 16:55:22
【问题描述】：

我在 mapbox studio 中创建了一些自定义样式。它们本质上只是 mapbox 户外风格和 mabpox 卫星风格，每个都是自定义的，每个都分成 2 种风格：根本没有标签的底图，只有没有底图的标签。我想让用户能够打开和关闭图层，或设置透明度。您可以在此处查看图层：

Outdoors labels only

Satellite labels only

在 mapbox studio 中，瓷砖在没有道路/标签/等的地方显示透明。这是我所期望的。然后我在传单中使用这些图层，如下所示：

var mapBoxOutdoorsLabels = L.tileLayer(
  'https://api.mapbox.com/styles/v1/slutske22/ck87tp2fq0rq41iqox69g4ko5/tiles/256/{z}/{x}/{y}@2x?access_token={accessToken}', 
  { accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map1)

var mapBoxSatelliteLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck8i7fv4h0h771ipc6mwzwmp4/tiles/256/{z}/{x}/{y}@2x?access_token={accessToken}', 
  { accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map2)

据我所知，我导入这两层的方式是相同的。但是由于某种原因，我的户外标签图层正确显示（具有透明背景），而我的卫星标签图层显示为全黑背景，您无法看到底图。右边的地图就是问题所在：

Here is a working codesandbox of the problem

我不确定我在 mapbox studio 或我的传单导入中做错了什么，以便生成黑色而不是透明的图块。我构建这两张地图的方式是相同的，至少据我所知。有什么想法吗？

感谢阅读。

【问题讨论】：

标签： leaflet mapbox raster mapbox-studio

【解决方案1】：

标签 mapbox 样式中的背景层不透明。

这是一个代码笔，其中包含您的样式副本，背景固定

我做了什么：

从样式的 URL 中删除 /tiles/{x}/{y}/{z}/ 部分并在浏览器中运行它会从 mapbox 中返回 json。在那里我看到你的背景层颜色缺少 alpha 通道值。

"layers": [
        {
            "id": "background",
            "type": "background",
            "layout": {
                "visibility": "none"
            },
            "paint": {
                "background-color": "hsl(222, 56%, 4%)" <= SHOULD BE (222, 56%, 4%, 0)
            },

我能够保存 json 文件并将其作为我自己的样式上传到 https://studio.mapbox.com/
在那里我更改了背景的 Alpha 通道并降低了卫星图层的不透明度。
“可见性：无”似乎没有按预期工作
作为新样式导出，我用我的样式和访问令牌更新了分叉

【讨论】：