mapbox symbol图层自定义图标

现象

mapbox中symbol类型的图层可以在layout中通过icon-image自定义图层的图标符号，不过若将该配置项的取值直接设置为某一图标的URL并不生效，见下图

layout:{
    visibility:"visible",
    "icon-image":"./assets/agg.png",
},

并且此时会触发地图对象的styleimagemissing事件

方法1

预先调用map对象的addImage接口注册该图像

const image=new Image();
image.src="agg.png";
image.onload=()=>{
    image.width=50;
    image.height=50;
    this.map.addImage("aggLabel",image);
};

相应的对icon-image的配置进行更改

layout:{
    visibility:"visible",
    "icon-image":"aggLabel"
},

方法2

通过**mapbox studio**自定义图层的样式

• 新建样式

• 上传自己的图标：注意这里只能是svg格式的图标，可以到iconfont这里去找

上传的图片在这里

• 发布自定义的图层样式

• 拷贝该图层样式的url并在代码中进行配置，注意mapbox的token应当对该样式具有权限

this.map = new mapboxgl.Map({
    accessToken: mapboxToken,
    antialias: true,
    container: "mapContainer",
    style:"拷贝到这里",
    center: [113.12302920024092, 31.76274963518034],
    zoom: 6,
    maxZoom: 17,
    minZoom: 0,
});

对icon-image进行配置:aggcircle是上传的图片的名字

layout:{
    visibility:"visible",
    "icon-image":"aggcircle",
},

效果