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

Question

如何使用 SVG 图像作为 mapbox GL JS 的底图？

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

传单：

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

开放层：

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, 46.437],
        [-71.516, 37.936],
        [-80.425, 37.936],
        ],
});

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

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

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

那么，任何想法如何处理这个问题？

Answer 1

据我所知，Mapbox-gl-js 不支持将 SVG 添加为图层（ Github Link ），您必须使用外部库/工具（如 D3 和可能的重复链接）来做一些解决方法，以及它抛出错误的原因是因为SVG 有像素坐标，gl-js 处理地理坐标（Lat/Lng）

有用的网址：

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