标签：mapObj image Mapbox custom marker https error tile Icon

Mapbox gl tile瓦片渲染点以及图片Icon

• • 1. 效果图
  • 2. 源码
  • 参考

1. 效果图

点效果图如下：

以图标渲染效果图如下：

注意图片要不能跨域，需要下载的下来才能正常展示。

2. 源码

// 先把图片加载进来
 mapObj.on('load', function () {
		// Add an image to use as a custom marker
		mapObj.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 添加图片

标签：mapObj,image,Mapbox,custom,marker,https,error,tile,Icon
来源： https://blog.csdn.net/qq_40985985/article/details/118031569

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。