mapbox添加贴图

最新推荐文章于 2024-03-19 17:20:42 发布

As_Xx_Ls

最新推荐文章于 2024-03-19 17:20:42 发布

阅读量286

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/As_Xx_Ls/article/details/134437834

版权


/**
 * mapbox添加贴图
 * @param {map} map mapbox地图对象
 * @param {string} url 图片地址
 * @param {number} minLon 贴图经纬度范围
 * @param {number} maxLon 
 * @param {number} minLat 
 * @param {number} maxLat 
 * @param {number} opacity 透明度
 * @param {string} layerName 图层名
 */
export const addImage = ({
    map,
    url,
    minLon,
    maxLon,
    minLat,
    maxLat,
    opacity,
    layerName
}) => {
    fetch(url)
        .then(response => response.blob())  // 获取图片数据并将其转换为 Blob 对象
        .then((blob) => {
            // 使用 FileReader 读取 Blob 数据
            const reader = new FileReader();
            reader.readAsDataURL(blob);  // 以 Data URL 形式读取 Blob 数据
            reader.onload = () => {
                // 获取 Base64 格式的图片数据
                const data_base64 = reader.result;
                map.addSource(layerName, {
                    type: 'image',
                    url: data_base64,
                    coordinates: [
                        [minLon, maxLat],
                        [maxLon, maxLat],
                        [maxLon, minLat],
                        [minLon, minLat]
                    ]
                });
                map.addLayer({
                    id: layerName,
                    type: 'raster',
                    source: layerName,
                    paint: {
                        'raster-opacity': opacity
                    }
                });
            };
        })
        .catch(error => console.error('图片获取失败,请检查url', error));
};