Mapbox gl tile瓦片渲染點以及圖片Icon

• • 1. 效果圖
  • 2. 源碼
  • 參考

1. 效果圖

點效果圖如下：

以圖標渲染效果圖如下：

注意圖片要不能跨域，需要下載的下來才能正常展示。

2. 源碼

// 先把圖片加載進來mapObj.on('load', function () {// Add an image to use as a custom markermapObj.loadImage('https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',function (error, image) {if (error) throw error;mapObj.addImage('custom-marker', image);});mapObj.loadImage(//	'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png',//     'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png','https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/3c6d55fbb2fb4316b1541bf027a4462308f7d3f5.jpg',function (error, image) {if (error) throw error;mapObj.addImage('arrow', image);});
});// 渲染
mapObj.addLayer({"id": "dddddtrack","type": "symbol","source": {"type": "vector","tiles": [url],"minzoom": 1,"maxzoom": 22},"source-layer": "track",'layout': {'visibility': 'visible',// coalesce 當請求的圖片找不到時，用fallbackImage替代//	"icon-image": ["coalesce", ["image", "custom-marker"], ["image", "arrow"]],"icon-image": ["coalesce", ["image", "arrow"], ["image", "custom-marker"]],'text-font': ['Open Sans Semibold','Arial Unicode MS Bold'],'text-offset': [0, 1.25],'text-anchor': 'top'}      
});

參考

• 創建 mapbox 本地 sprite
• https://docs.mapbox.com/mapbox-gl-js/example/add-image/
• https://stackoverflow.com/questions/41746232/mapboxgl-js-shape-layer-type
• mapbox 添加圖片

總結

以上是生活随笔為你收集整理的Mapbox gl tile瓦片渲染点以及图片Icon的全部內容，希望文章能夠幫你解決所遇到的問題。

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