框在sdf = true

编程问答 2022-08-13

问题描述

我正在Mapbox中创建一个具有“ sdf”属性为true的符号图层，并在缩放级别（5-12）时使用Mapbox Expression更改图标大小。

代码：

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,12,0.09
            ],'icon-allow-overlap': true,"icon-rotation-alignment": "viewport","icon-rotate": 0,"icon-anchor": "center"
        }
    };

问题是我可以在较小的缩放级别上看到图标周围的方形背景，但是在较高的缩放级别上背景消失了。仅当我在缩放级别之间插入图标大小时才会发生这种情况。

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

尝试放大/缩小图标

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

enter image description here

附加缩放级别12（正确）

enter image description here

我正在按照以下方式创建sdf图标： How can I create SDF-Icon's (used in Mapbox) from PNG?

我不知道，这里发生了什么。请提出建议。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmapboxmapbox-gl-js