如何在 Mapbox GL JS 中加载任意投影的图片？

在 Mapbox GL JS API 中，我们可以使用 image source 和 raster layer 将图片叠加到地图上，例如：Add a raster image to a map layer。
但是，因为‎ Mapbox 使用 ‎‎网络墨卡托投影‎‎，并将 ‎‎EPSG: 3857‎‎ 投影坐标系作为地图和地图切片的默认投影，所以图片也必须是网络墨卡托投影，否则图片将无法正确叠加到地图。我们可以通过修改图片的投影使其正确叠加到地图。但是，当我们没办法修改图片投影的时候，怎加正确叠加图片呢？
在 Openlayers 中，可以很轻松的实现，因为它原生就支持图片/瓦片重投影，例如：Image Reprojection。而在 Mapbox GL JS 中，我们就需要借助第三方扩展（ImageLayer）来实现，该扩展使用了 Arrugator 和 Proj4js 工具对图片重投影，使图片正确叠加。
使用步骤如下：

1. 安装

# yarn
yarn add @naivemap/mapbox-gl-image-layer proj4
# 或 npm
npm i @naivemap/mapbox-gl-image-layer proj4
1
2
3
4

2. 添加图片

import ImageLayer from '@naivemap/mapbox-gl-image-layer'

const layer = new ImageLayer('image-layer', {
  url: '/images/4326.png', // 指定图片地址
  projection: 'EPSG:4326', // 指定图片投影
  coordinates: [
    [105.289838, 32.204171], // top-left
    [110.195632, 32.204171], // top-right
    [110.195632, 28.164713], // bottom-right
    [105.289838, 28.164713], // bottom-left
  ],
})

map.addLayer(layer)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3. 叠加效果

叠加效果如下图（右），左图使用 Mapbox GL JS 的图片数据源 叠加，可以看到在纬度方向，图片错位很明显，而经过重投影的图片（右）和边界是完全重合的。

通过下面的动图，可以更清楚地看到图片的变化。