mapboxgl添加雪碧图 addImage loadImage png/jpg svg

AllBlue

于 2024-03-19 17:20:42 发布

阅读量811

点赞数 14

分类专栏： mapbox GIS 文章标签： mapboxgl

本文链接：https://blog.csdn.net/AllBluefm/article/details/136846993

版权

GIS 同时被 2 个专栏收录

56 篇文章 2 订阅

订阅专栏

mapbox

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用MapboxGL在地图上添加PNG和JPG图片，以及处理SVG格式图片时需要先转换为Base64并通过Canvas绘制的技巧，以解决MapboxGL不支持SVG原生加载的问题。

摘要由CSDN通过智能技术生成

一、mapboxgl可以添加png或者jpg类型的图片到雪碧图中

async function addPng(id, url) {
            const img = await new Promise((resolve) => {
                map.loadImage(url, (error, image) => {
                    if (error) throw error;
                    resolve(image);
                });
            });
            if (!map.hasImage(id)) {
                map.addImage(id, img);
            }
        }

二、mapboxgl不支持直接添加svg到雪碧图，可以先把svg转成base64，再绘制到canvas上生成一张图片

直接添加报错：mapbox-gl.js:31 Uncaught (in promise) Error: Could not load image because of The source image could not be decoded.. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.
at mapbox-gl.js:31:14115

async function addSvg(id, url) {
            const img = await new Promise(async (resolve) => {
                let res = await axios.get(url);
                let objE = document.createElement("div");
                objE.innerHTML = res.data;

                // 设置svg的颜色，非必须
                let d = objE.children[0];
                let color = '#f00';
                d.style.fill = color;
                d.querySelectorAll("path").forEach((item) =>
                    item.setAttributeNS(null, "fill", color)
                );

                let image = new Image();
                image.src =
                    "data:image/svg+xml;base64," +
                    window.btoa(unescape(encodeURIComponent(objE.innerHTML)));
                let canvas = document.createElement("canvas"); //准备空画布
                canvas.width = 20;
                canvas.height = 20;
                let context = canvas.getContext("2d"); //取得画布的2d绘图上下文
                image.onload = function () {
                    context.drawImage(image, 0, 0, 20, 20);
                    let outImg = new Image();
                    outImg.src = canvas.toDataURL("image/webp");
                    resolve(outImg);
                };
            });

            if (!map.hasImage(id)) {
                map.addImage(id, img);
            }
        }