如何在 Leaflet 中高效加载并显示大型 GeoTIFF（RGB）影像
本文介绍使用 `georaster-layer-for-leaflet` 插件在 leaflet 1.9.1 地图中加载、解析并可视化带地理坐标的大型 geotiff 影像（如 webodm 生成的 wgs84 正射影像），涵盖依赖引入、异步加载、色彩映射与性能优化关键步骤。
在 Web 端直接渲染大型 GeoTIFF 文件（尤其是 RGB 正射影像）是一项具有挑战性的任务，因其不仅包含像素数据，还内嵌地理参考信息（如坐标系、仿射变换参数）。Leaflet 本身不原生支持 GeoTIFF，需借助专门的 JavaScript 库进行解析与栅格渲染。目前最成熟、轻量且与 Leaflet 深度集成的方案是 georaster-layer-for-leaflet —— 它基于 georaster 解析器，将 GeoTIFF 转为地理栅格对象，并以 L.GridLayer 形式动态切片渲染，完美适配 Leaflet 的瓦片化机制。
✅ 快速上手：完整 HTML 示例
以下是一个最小可运行示例（兼容 Leaflet 1.9.1），无需构建工具，直接在浏览器中加载本地或托管的 .tif 文件：
GeoTIFF on Leaflet
⚠️ 关键注意事项
- CORS 必须启用：若 GeoTIFF 托管在其他域名（如 S3、Nginx），服务器需返回 Access-Control-Allow-Origin: *（或指定域名），否则 fetch() 将被浏览器拦截。
- 文件格式建议：优先使用 Cloud-Optimized GeoTIFF (COG)。普通大 TIFF 易导致内存溢出或卡顿；COG 支持按需读取金字塔层级，大幅提升加载与缩放性能。可用 gdal_translate -co TILED=YES -co COPY_SRC_OVERVIEWS=YES -co COMPRESS=LZW input.tif output_cog.tif 生成。
-
坐标系要求：插件原生支持 WGS84 (EPSG:4326) 和 Web Mercator (EPSG:3857)。若 TIFF 使用其他投影（如 UTM），需提前用 GDAL 重投影：
gdalwarp -t_srs EPSG:4326 input.tif output_wgs84.tif -
内存与性能：单次加载超 200MB TIFF 可能触发浏览器内存限制。生产环境建议：
- 后端提供 COG + geotiff.js + leaflet-tilelayer-geojson 分块服务；
- 或使用 mapbox-gl-js + @mapbox/raster-tiles 进行 GPU 加速渲染。
✅ 总结
georaster-layer-for-leaflet 是当前 Leaflet 生态中展示 GeoTIFF 最简洁可靠的方案。它屏蔽了底层 GDAL 复杂性，通过纯前端解析实现地理对齐与动态渲染。只要确保 TIFF 符合标准（WGS84/3857、COG 优先）、服务端开启 CORS，即可在数行代码内完成专业级正射影像叠加——无论是 WebODM 导出成果，还是无人机航拍数据，均可无缝集成至你的地理信息应用中。
