Mapbox使用sdf图片

首先安装工具

npm install image-sdf -g

将普通png转化成sdf格式的png

image-sdf test.png --spread 10 --downscale 1 > test_sdf.png

图层配置

{
  "id": "测试_点",
  "type": "symbol",
  "source": "testpoint",
  "source-layer": "testpoint",
  "minzoom": 14,
  "layout": {
    "visibility": "visible",
    "text-field": "{mapno}",
    "text-font": [
      "Open Sans Regular"
    ],
    "text-size": 14,
    "icon-size": 1,
    "icon-image": "test_name",
    "text-offset": [
      0,
      -2
    ]
  },
  "paint": {
    "text-color": "rgba(255, 65, 6, 1)"
  }
}

必须代码加载才可以使用

// 单张使用
map.loadImage('test_sdf.png', function (error, image) {
    if (error) throw error;
    map.addImage('test_name', image, { 'sdf': true });
})

// 如果使用雪碧图形式
map.loadImage('http://10.0.0.15:8088/sdf/sprite.png', (error, image) => {
    if (error) throw error;
    console.log(image)
    axios.get('http://10.0.0.15:8088/sdf/sprite.json').then((res)=>{
        const imageslist = res.data;
        for(let item in imageslist){
            createImageBitmap(image, imageslist[item].x, imageslist[item].y, imageslist[item].width, imageslist[item].height).then((img)=>{
                map.addImage(item, img, { sdf: true });
            })
        }
    })
});