【mapboxgl】mapboxgl本地化字体打包部署问题

1.涉及部分代码

        开发了一个点位展示的系统，大概2000+点位，symbol样式代码如下：

	import circleImage from '@/assets/icons/controlImg/circle.png'

            //添加数据源中的各个图层
			map.value.loadImage(
				circleImage,
				function (error, image) {
					if (error) throw error;
					map.value.addImage('circle', image);

					map.value.addLayer({
						'id': "点",
						'type': 'symbol',
						'source': 'control',
                        // source-layer和mvt服务中的图层名对应
						"source-layer": "点图层",
						'layout': {
							'icon-image': 'circle',
							'text-field': ['get', 'pointname'],
							'text-font': ['Arial'],
							'icon-size': 0.09, // 图标大小设置为0.1倍
							"text-size": 14,
							'text-offset': [0, 0.5],
							'text-anchor': 'top'
						},
						"paint": {
							"text-color": "#1059ad",
							"text-halo-color": "white",
							"text-halo-width": 0.2,
						}
					});
				}
			);

2.问题

        在源码启动项目时没有遇到问题：但是打包用nginx发布出来后访问时，symbol图片只有部分显示，报错如下：

3.问题探索

        在技术群咨询群友及百度查了一下，可能是由于图片资源路径问题

        （1）尝试nginx静态服务的方式：

                直接接入图片路径"http:localhost:1117/icon/circle.png"

        （2）采用图片转base64的方式：

                直接加载：

        

（3）以上方式均未解决问题。

4.进一步排除

        将点位采用基础样式进行展示，去除字体label相关样式，打包部署后可以正常显示图片，那么就是text字体相关存在问题

            //添加数据源中的各个图层
			map.value.loadImage(
				circleImage,
				function (error, image) {
					if (error) throw error;
					map.value.addImage('circle', image);

					map.value.addLayer({
						'id': "点",
						'type': 'symbol',
						'source': 'control',
                        // source-layer和mvt服务中的图层名对应
						"source-layer": "点图层",
						'layout': {
							'icon-image': 'circle',
							// 'text-field': ['get', 'pointname'],
							// 'text-font': ['Arial'],
							'icon-size': 0.09, // 图标大小设置为0.1倍
							// "text-size": 14,
							// 'text-offset': [0, 0.5],
							// 'text-anchor': 'top'
						},
						// "paint": {
						// 	"text-color": "#1059ad",
						// 	"text-halo-color": "white",
						// 	"text-halo-width": 0.2,
						// }
					});
				}
			);

5.问题解决

        经过以上排查发现问题是由初始化地图时style中的glyphs路径有问题：

    map.value = new mapboxgl.Map({
		container: 'map',
		//为map构造一个空的style
		style: {
			version: 8,
			sources: {},
			layers: [],
			glyphs: "/public/mapbox-gl/fonts/{fontstack}/{range}.pbf"
		},
		center: [116.405419, 39.923568],
		zoom: 11,
		renderWorldCopies: false,
	})

        将路径修改为经nginx发布后的本地字体文件地址相关的链接，问题解决。

    map.value = new mapboxgl.Map({
		container: 'map',
		//为map构造一个空的style
		style: {
			version: 8,
			sources: {},
			layers: [],
			glyphs: "http://localhost:1117/mapbox-gl/fonts/{fontstack}/{range}.pbf"
		},
		center: [116.405419, 39.923568],
		zoom: 11,
		renderWorldCopies: false,
	})