山西做网站的企业,安装wordpress没有选择语言,东莞网站设计百年,图片手机网站模板在mapbox-gl.js中#xff0c;通过在styles中设置sprite和glyphs#xff0c;实现样式图标和字体的加载。而一旦style加载完成#xff0c;如果重置地图中的style#xff0c;则会导致地图全部重新加载#xff0c;图层的顺序#xff0c;地图上的要素#xff0c;都会丢失通过在styles中设置sprite和glyphs实现样式图标和字体的加载。而一旦style加载完成如果重置地图中的style则会导致地图全部重新加载图层的顺序地图上的要素都会丢失无法对当前地图状态进行还原。在这种情况下通过代码方式动态加载sprites来实现地图样式中图标的灵活切换。
代码如下: sprite2x.json为精灵图的配置文件
fetch(../img/custom/sprite2x.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}, },
