本文介绍使用 `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 文件：
<!DOCTYPE html>
<html>
<head>
<title>GeoTIFF on Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.1/dist/leaflet.css" />
<style>
#map { height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<!-- 1. 加载 Leaflet -->
<script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"></script>
<!-- 2. 加载 georaster 和插件（CDN 版本，推荐用于原型开发） -->
<script src="https://unpkg.com/georaster@2.3.0/dist/georaster.min.js"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet@4.1.0/dist/georaster-layer-for-leaflet.umd.min.js"></script>
<script>
// 初始化地图（建议根据 TIFF 实际范围调整初始中心）
const map = L.map('map').setView([0, 0], 2);
// 添加底图（OpenStreetMap）
L.tileLayer('https://{a-d}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 替换为你的 GeoTIFF URL（必须支持 CORS！）
const tiffUrl = 'example_4326.tif'; // 可为相对路径或绝对 URL
fetch(tiffUrl)
.then(response => {
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
return response.arrayBuffer();
})
.then(arrayBuffer => georaster.parseGeoraster(arrayBuffer))
.then(georaster => {
console.log('✅ GeoRaster parsed:', georaster);
// 创建 GeoRasterLayer（自动处理 RGB/RGBA 波段）
const layer = new GeoRasterLayer({
georaster,
opacity: 0.95,
resolution: 128, // 建议值：64–256；值越大，初始渲染越快但细节略降（缩放时自动提升）
// pixelValuesToColorFn: (values) => {
// // 自定义颜色映射（例如：[R,G,B] → CSS 颜色）
// return `rgb(${values[0]}, ${values[1]}, ${values[2]})`;
// }
});
layer.addTo(map);
map.fitBounds(layer.getBounds(), { maxZoom: 18 }); // 自动缩放到影像范围
})
.catch(err => {
console.error('❌ 加载/解析失败:', err);
alert('无法加载 GeoTIFF：请检查文件路径、CORS 配置及 TIFF 格式（需为 Cloud-Optimized GeoTIFF 更佳）');
});
</script>
</body>
</html>⚠️ 关键注意事项
- 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 可能触发浏览器内存限制。生产环境建议：
✅ 总结
georaster-layer-for-leaflet 是当前 Leaflet 生态中展示 GeoTIFF 最简洁可靠的方案。它屏蔽了底层 GDAL 复杂性，通过纯前端解析实现地理对齐与动态渲染。只要确保 TIFF 符合标准（WGS84/3857、COG 优先）、服务端开启 CORS，即可在数行代码内完成专业级正射影像叠加——无论是 WebODM 导出成果，还是无人机航拍数据，均可无缝集成至你的地理信息应用中。
