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

Posted 2021-06-30 程序媛一枚~

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 添加图片