在 sdf = true 上，框出现在 Mapbox 中的图标周围

Question

我正在 Mapbox 中创建一个符号层，其“sdf”属性为 true 且缩放级别 (5-12) 我正在使用 Mapbox 表达式更改图标大小。

代码：

const layer: mapboxgl.Layer = {
        "id": accessible,
        "type": "symbol",
        "source": seatSourceName,
        'source-layer': appConfiguration.api.seatSourceLayerName,
        "paint": {
            "icon-color": expression, //This is expression where i am changing color
            "icon-opacity": 1
        },
        "layout": {
            "icon-image": this.iconId,
            "icon-ignore-placement": true,
            "icon-padding": 0,
            "icon-size": [
                'interpolate',
                ['exponential', 2],
                ['zoom'],
                5, 0,
                12, 0.09
            ],
            'icon-allow-overlap': true,
            "icon-rotation-alignment": "viewport",
            "icon-rotate": 0,
            "icon-anchor": "center"
        }
    };

问题是我可以在较小的缩放级别上看到图标周围的方形背景，但在较高的缩放级别上背景消失了。只有当我 interpolate icon-size between zoom levels'.

时才会发生这种情况

也在 CodePen 上复制：https://codepen.io/dollysingh3192/pen/xxVLwWz?editors=0010 （检查前启用 Cors）

尝试zoom-in/zoom-out围绕图标

在 9 图像附近附加缩放级别（放大）（不正确）

附加缩放级别 12（正确）

我正在按照以下方式创建 sdf 图标：

我不知道这里发生了什么。需要建议请..

已添加到 Mapbox 存储库 Github 问题页面： https://github.com/mapbox/mapbox-gl-js/issues/9961

Answer 1

我使用 Whosebug 的第三种方法解决了这个问题

有关更多详细信息，我将此问题添加到 Mapbox github 问题页面：

https://github.com/mapbox/mapbox-gl-js/issues/9961

在 sdf = true 上，框出现在 Mapbox 中的图标周围

Box is appearing around Icons in Mapbox on sdf = true

javascript

mapbox

mapbox-gl-js