Mapbox gl tile瓦片渲染点以及图片Icon
1. 效果图2. 源码参考1. 效果图
点效果图如下：
以图标渲染效果图如下：
注意图片要不能跨域，需要下载的下来才能正常展示。
2. 源码
// 先把图片加载进来mapObj.on('load', function () {// Add an image to use as a custom markermapObj.loadImage('/mapbox-gl-js/assets/custom_marker.png',function (error, image) {if (error) throw error;mapObj.addImage('custom-marker', image);});mapObj.loadImage(//'/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png',//'/wikipedia/commons/7/7c/08_cat.png','/-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'}});
