本文介绍使用 georaster-layer-for-leaflet 插件在 leaflet 1.9.1 中加载 wgs84 坐标系的 geotiff 影像（如正射影像图），涵盖依赖引入、异步解析、图层渲染与性能优化关键步骤。
本文介绍使用 georaster-layer-for-leaflet 插件在 leaflet 1.9.1 中加载 wgs84 坐标系的 geotiff 影像（如正射影像图），涵盖依赖引入、异步解析、图层渲染与性能优化关键步骤。
在 WebGIS 开发中，直接在浏览器端渲染大型 GeoTIFF 文件（尤其是带地理坐标的 RGB 正射影像）是一大挑战：浏览器原生不支持 .tif 解析，且全量加载会导致内存溢出或阻塞主线程。解决方案并非服务端切片（如 WMS/TMS），而是借助纯前端地理栅格解析库——georaster-layer-for-leaflet，它基于 georaster 解析二进制 GeoTIFF 元数据，并通过 Leaflet 的 GridLayer 高效渲染为地理对齐的影像图层。
✅ 核心依赖与安装
该方案需两个核心 npm 包（推荐使用 ES 模块方式）：
npm install georaster georaster-layer-for-leaflet
⚠️ 注意：georaster-layer-for-leaflet 仅支持 GeoTIFF（含地理参考信息，如 EPSG:4326），不支持普通 TIFF 或无坐标信息的图像。请确保你的 .tif 文件已通过 GDAL 等工具写入正确地理元数据（可通过 gdalinfo example_4326.tif 验证 Coordinate System 和 Corner Coordinates）。
? 完整可运行示例代码
以下为生产就绪的 HTML + JavaScript 示例（兼容 Leaflet 1.9.1）：
<!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; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<!-- 加载 Leaflet -->
<script src="https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"></script>
<!-- 加载 georaster 和插件（CDN 方式，适用于快速验证） -->
<script src="https://unpkg.com/georaster@2.4.0/dist/georaster.min.js"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet@3.1.0/dist/georaster-layer-for-leaflet.min.js"></script>
<script>
// 初始化地图（中心点将由 GeoTIFF 自动适配）
const map = L.map('map').setView([0, 0], 2);
// 添加底图（建议使用 CORS 友好的瓦片源）
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';
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);
// 创建 GeoTIFF 图层
const layer = new GeoRasterLayer({
georaster,
opacity: 0.95,
// 对于 RGB 影像，使用默认 colorFn 即可显示真实色彩
// 若需自定义调色（如单波段伪彩色），可传入 pixelValuesToColorFn
resolution: 128 // 控制渲染分辨率（值越小越精细但更耗资源）
});
layer.addTo(map);
map.fitBounds(layer.getBounds(), { maxZoom: 18 }); // 自动缩放到影像范围
})
.catch(err => {
console.error('❌ Failed to load GeoTIFF:', err);
alert('加载影像失败，请检查文件路径、CORS 设置及 GeoTIFF 元数据有效性。');
});
</script>
</body>
</html>? 关键注意事项
-
CORS 必须启用：若 GeoTIFF 托管在非同源服务器（如本地 file:// 或跨域 CDN），浏览器会因安全策略拒绝 fetch。解决方法：
- 启用本地开发服务器（如 npx serve 或 VS Code Live Server）；
- 在服务端响应头中添加 Access-Control-Allow-Origin: *；
- 使用支持 CORS 的云存储（如 GitHub Pages、S3 配置 CORS 规则）。
-
性能调优建议：
- 大型文件（>50MB）建议预先用 gdal_translate 生成内部金字塔（-co TILED=YES -co COMPRESS=LZW）并启用 overviews；
- 生产环境应设置 resolution 参数（如 64 或 128），避免全分辨率渲染导致卡顿；
- 可结合 L.layerGroup() 管理多个 GeoTIFF 图层，支持开关与透明度联动。
-
替代方案对比：
- leaflet-geotiff（旧版）：已停止维护，不支持最新 GeoTIFF 标准；
- itowns / CesiumJS：功能更强但重量级，适合三维场景；
- GDAL WMS 或 GeoServer：服务端切片方案，适合多用户高并发，但需部署 GIS 服务。
通过本方案，你无需后端即可在标准 Leaflet 页面中精准叠加正射影像图，完美复现 WebODM 的前端可视化能力——地理坐标自动对齐、缩放平滑、内存可控，是轻量级 WebGIS 应用的理想选择。
