mapbox-gl扩展sprites图片

本文主要是介绍mapbox-gl扩展sprites图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在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}",
},

这篇关于mapbox-gl扩展sprites图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---