引入public文件并使用

const publick = `${import.meta.env.BASE_URL}`;

• 加载标记图片，点击查询后在地图上显示的图片

                fetch(`${publick}pointIcon_old.json`)

                    .then((data) => data.json())

                    .then((res) => {

                        for (let i of res.data) {

                            const icon = `${publick}pointIcon/${i.id + '.png'}`;

                            map.loadImage(

                                icon,

                                function (error: AnyObject, icon: AnyObject) {

                                    if (error) throw error;

                                    map.addImage(i.id, icon);

                                },

                            );

                        }

                    });

•  mapbox添加图片资源

map.loadImage(

        img2,

        function (error: AnyObject, img2: AnyObject) {

        if (error) throw error;

        map.addImage('image2', img2);

    },

);

// image2是图片使用时的名称，img2是图片保存时的名称，img2使用import引入

（import img2 from '@assets/images/home/homeMap/pointIconDisaster.png';）

 

•  加载点位图片

                     map.addLayer({
						id: 'panoramaImgId',
						type: 'symbol',
						source: {
							type: 'geojson',
							data: panoramaGeojson,
							cluster: false,
						},
						layout: {
							'icon-image': 'image2', // reference the image
							'icon-size': 0.4,
							'icon-offset': [0, -30],
							'icon-allow-overlap': true,
							// 'text-allow-overlap': true,
							'text-optional': true,
							'text-font': ['Microsoft YaHei Bold'],
							'text-field': '{name}',
							'text-size': 12,
							'text-offset': [0, 2],
						},
						paint: {
							'text-color': '#fff',
							'text-halo-color': '#000',
							'text-halo-width': 1,
						},
					});