在mapbox-gl.js中,通过在styles中设置sprite和glyphs,实现样式图标和字体的加载。而一旦style加载完成,如果重置地图中的style,则会导致地图全部重新加载,图层的顺序,地图上的要素,都会丢失,无法对当前地图状态进行还原。在这种情况下,通过代码方式,动态加载sprites,来实现地图样式中图标的灵活切换。
代码如下: sprite@2x.json为精灵图的配置文件
fetch('../img/custom/sprite@2x.json').then(res => res.json()).then(res => {
for (const k in res) {
const {
width,
height,
x,
y
} = res[k]
const data = ctx.getImageData(x, y, width, height).data;
if(!map.hasImage(k)){
map.addImage(k, {
width,
height,
data
});
}
}
}
在地图style中使用:
"layout": {
"text-font": [
"Microsoft YaHei"
],
"icon-image": ["step", ["zoom"], "mountain-15", 13, "mountain-11"],
"text-size":12,
"icon-padding": 1,
"text-size": 12,
"text-anchor": "top",
"text-offset": [0, 0.7],
"text-field": "{name_chn}",
},