概述

mapboxGl中多圖標的實現可以在style中指定sprite來實現，但是在實際使用的時候會出現sprite之外的圖標需要引用，此時通過map.addImage()來實現，但是如果存在多個圖標的時候，因為map.addImage()需要先通過map.loadImage()先加載圖標，而map.loadImage()是一個異步的，使用起來就有點麻煩。本文希望通過再再加sprite來實現一次性添加圖標。

實現效果

實現

測試的sprite如下圖：

json文件如下：

{ "zgyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":105,"height":32}, "jsyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":35,"height":32}, "nyyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":70,"height":32}, "gsyh":{"visible":"true","pixelRatio":1,"x":0,"width":32,"y":0,"height":32} }

實現代碼如下：

map.on('load',() => {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')const img = new Image()img.src = './lib/merge.png'img.onload = async () => {canvas.width = img.widthcanvas.height = img.heightctx.drawImage(img, 0, 0)fetch('./lib/merge.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).datamap.addImage(k, { width, height, data })}map.addSource('points', {type: 'geojson',data: {type: 'FeatureCollection',features: [{"type": "Feature","properties": { icon: 'zgyh' },"geometry": { "type": "Point", "coordinates": [107.0132554, 22.1441921] }},{"type": "Feature","properties": { icon: 'jsyh' },"geometry": { "type": "Point", "coordinates": [107.0223554, 22.1443921] }},{"type": "Feature","properties": { icon: 'nyyh' },"geometry": { "type": "Point", "coordinates": [107.0344554, 22.1444921] }}]}});map.addLayer({'id': 'points-h','type': 'symbol','source': 'points','layout': {'icon-allow-overlap': true,'icon-image': ['get', 'icon'],'icon-size': ["interpolate",["exponential",1.5],["zoom"],5, 0.5,10, 0.8]},});})}})

總結

以上是生活随笔為你收集整理的mapboxGL中多图标加载的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。