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

本文链接：https://blog.csdn.net/huangli0/article/details/125418484

本文介绍了如何在MapboxGLJS中解决图片投影问题，使得图片能正确叠加到地图上。通过使用第三方扩展ImageLayer和Proj4js，实现了图片的重投影功能，确保图片与地图边界完美匹配。详细步骤包括安装扩展、添加图片和展示叠加效果，并对比了未重投影前后的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 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

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)