使用svg图像作为mapbox GL JS的地图层

如何解决使用svg图像作为mapbox GL JS的地图层

如何使用SVG图像作为mapbox GL JS的基础地图？

我知道OpenLayers和Leaflet为开发人员提供了这样的机会。

传单：

var svgUrl = 'image.svg',imageBounds = [[0,0],[100,100]];
L.imageOverlay(svgUrl,imageBounds).addTo(map);

OpenLayers：

var svgUrl = 'image.svg',var imgLayer = new ImageLayer({
    source: new Static({
    url: svgUrl,projection: projection,imageExtent: extent,imageLoadFunction: function (image,src) {
            image.getImage().src = src;
            image.getImage().width = olExtent.getWidth(extent);
            image.getImage().height = olExtent.getHeight(extent);
        },}),});
map.addLayer(imgLayer);

AFAIK， mapbox GL JS 也可以使用图像叠加层：

var svgUrl = 'image.svg',this.map.addSource("myImageSource",{
    type: "image",url: svgUrl,coordinates: [
        [-80.425,46.437],[-71.516,37.936],[-80.425,],});

map.addLayer({
    id: "overlay",source: "myImageSource",type: "raster",paint: { "raster-opacity": 0.85 },});

但是！如果我尝试加载svg，则会收到此错误：

错误：由于无法加载源图像而无法加载图像 解码..请确保使用受支持的图像类型，例如PNG 或JPEG。请注意，不支持SVG。

那么，有什么想法可以解决这个问题吗？

解决方法

据我所知，Mapbox-gl-js不支持将SVG添加为图层（Github Link），您必须使用外部库/工具（例如D3）和可能的重复{{3} }，之所以会引发错误，是因为SVG具有像素坐标，而gl-js处理的是地理坐标（纬度/经度）

有用的网址：

1. Link
2. https://blockbuilder.org/enjalot/0d87f32a1ccb9a720d29ba74142ba365
3. https://bl.ocks.org/enjalot/18cb7a77b2d9de597b86