MapBox 自定义精灵图 --全网最简单的方法

最近学习mapbox中，需要添加图标。但是对于很多图标，官方建议是使用精灵图进行添加。因为精灵图由png图片和json文件组成，其中图标的名称和位置存储在json中。对于开发者不会有很多时间去处理这些。本人在网上看过很多方法，比较下来我认为最简单和最实用的方法如下：

实现效果图

实现步骤

1、找图标

在阿里图标库中寻找自己需要的图标，之后选择png下载。

2、制作精灵图

在网上搜索很多制作精灵图的方法，但是大部分需要下载软件或者需要在github上克隆代码，之后运行项目进行制作。在实验过程中，要么软件安装出现问题，要么包下载存在问题，要么项目启动存在问题。总之浪费了很多时间。最后找到一个国外网站，只需要上传图标，在线制作精灵图并下载。

制作精灵图地址

上传下载的图标，选择如下勾选内容，背景透明和生成json文件。

生成完成之后，浏览器会自动下载一个压缩包。打开文件夹之后会出现png图片和json文件。其中带@2x的为2倍图，在地图上显示更为清晰。

3、添加到项目

将精灵图存放到项目的public文件下，如图所示

在MapBox初始化的时候添加精灵图地址。注意在打包的时候需要换成项目在线地址和端口号。

4、调用查看

代码如下：

 mapR?.addLayer({
        id: 'clusters',
        type: 'symbol',
        source: {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: [
                    {
                        "type": "Feature",
                        "properties": { name: '火车站' },
                        "geometry": {
                            "type": "Point",
                            "coordinates": [120, 31]
                        }
                    },
                ]
            }
        },
        layout: {
            'icon-image': 'train',
            'icon-size': 2,
            'text-field': '火车站',
            "text-font": ["Microsoft YaHei Bold"],
            "text-size": 16,
            'text-offset': [0, 2.5],
            'icon-allow-overlap': true // 允许图标重叠
        },
        paint: {
            'icon-opacity': 1, // 图标透明度
            'text-color': '#ff55ff'
        }
    });

如果有更好的方法欢迎留言哦！