如何在Leaflet 1.9.1地图中加载显示大型.tif（GeoTiff）图像

直接加载大型TIFF文件会导致性能问题或加载失败，推荐使用leaflet-geotiff插件配合geotiff.js实现分块加载，以下是完整可运行的示例代码：

准备依赖文件 #

先下载以下库文件到项目目录：

• Leaflet 1.9.1：核心样式文件leaflet.css和脚本文件leaflet.js
• GeoTIFF.js：用于解析TIFF文件的geotiff.min.js
• Leaflet-Geotiff：Leaflet扩展插件leaflet-geotiff.js

完整HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet GeoTIFF 加载示例</title>
    <!-- Leaflet 1.9.1 样式 -->
    <link rel="stylesheet" href="leaflet.css" />
    <!-- Leaflet 1.9.1 核心脚本 -->
    <script src="leaflet.js"></script>
    <!-- GeoTIFF.js 处理TIFF解析 -->
    <script src="geotiff.min.js"></script>
    <!-- Leaflet-Geotiff 插件 -->
    <script src="leaflet-geotiff.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { height: 100vh; width: 100vw; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // 初始化Leaflet地图，中心设为影像大致区域（可根据你的TIFF坐标调整）
        const map = L.map('map').setView([40, -100], 8);

        // 添加基础底图（可选，若使用需确保服务可访问，或替换为本地瓦片）
        /*
        L.tileLayer('你的底图瓦片路径/{z}/{x}/{y}.png', {
            attribution: '底图版权信息'
        }).addTo(map);
        */

        // 加载GeoTIFF正射影像
        const geoTiffLayer = L.leafletGeotiff('path/to/your/orthophoto.tiff', {
            // 设置渲染为RGB图像
            renderer: new L.LeafletGeotiff.RgbRenderer(),
            // 启用分块加载，优化大型文件性能
            chunkSize: 512
        }).addTo(map);

        // 自动将地图视野适配到影像范围
        geoTiffLayer.then(layer => {
            map.fitBounds(layer.getBounds());
        });
    </script>
</body>
</html>

关键注意事项 #

• 文件路径：将path/to/your/orthophoto.tiff替换为WebODM生成的正射影像实际路径（本地文件需与HTML同目录或使用正确相对路径，服务器部署需确保文件可访问）
• CORS问题：若加载服务器上的跨域TIFF文件，需在服务器配置CORS允许当前页面访问
• 性能优化：chunkSize参数可根据文件大小调整，值越小加载越细碎但内存占用越低，推荐512或1024
• 坐标兼容性：WebODM生成的正射影像默认采用WGS84（EPSG:4326）坐标系，插件可自动识别，无需额外转换

超大文件替代方案（瓦片化处理） #

如果TIFF文件达到GB级，直接加载仍有性能瓶颈，可先将GeoTIFF转换为TMS瓦片集，再用Leaflet加载：

1. 使用GDAL工具执行瓦片化命令：

gdal2tiles.py -z 8-16 -t "Orthophoto" your_orthophoto.tiff tiles_output_dir

2. 在Leaflet中加载生成的瓦片：

L.tileLayer('./tiles_output_dir/{z}/{x}/{y}.png', {
    tms: true,
    attribution: '你的正射影像版权信息'
}).addTo(map);

内容的提问来源于stack exchange，提问作者Adoltchus