本文介绍使用 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。解决方法：
-
性能调优建议：
- 大型文件（>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 应用的理想选择。