Leaflet加载GeoTIFF(TIF)栅格文件失败，寻求技术协助

一、先搞定库的正确引入 #

别直接从GitHub拉源码用，CDN稳定版本更不容易出问题：

• leaflet-geotiff：用unpkg的稳定版，比如 <script src="https://unpkg.com/leaflet-geotiff@0.10.0/dist/leaflet-geotiff.js"></script>
• georaster-layer-for-leaflet：需要同时引入依赖的georaster库，比如：
  <script src="https://unpkg.com/georaster@1.5.0/dist/georaster.min.js"></script>
<script src="https://unpkg.com/georaster-layer-for-leaflet@3.0.0/dist/georaster-layer-for-leaflet.min.js"></script>
• 注意版本匹配：所有库都要适配Leaflet 1.x版本，别混用太旧或太新的版本。

二、直接能用的代码示例 #

用leaflet-geotiff加载单波段TIF #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-geotiff@0.10.0/dist/leaflet-geotiff.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 600px;"></div>
  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // 替换成你的本地TIF文件路径
    var tifUrl = './your-tif-file.tif';
    var geotiffLayer = L.leafletGeotiff(tifUrl, {
      opacity: 0.7,
      // 自定义颜色映射，根据你的栅格值范围调整
      colorScale: ['#0000ff', '#00ffff', '#ffff00', '#ff0000'],
      displayMin: 0,
      displayMax: 1000
    }).addTo(map);

    // 自动定位到TIF范围
    map.fitBounds(geotiffLayer.getBounds());
  </script>
</body>
</html>

用georaster-layer-for-leaflet加载多波段/单波段TIF #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://unpkg.com/georaster@1.5.0/dist/georaster.min.js"></script>
  <script src="https://unpkg.com/georaster-layer-for-leaflet@3.0.0/dist/georaster-layer-for-leaflet.min.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 600px;"></div>
  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    fetch('./your-tif-file.tif')
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => {
        parseGeoraster(arrayBuffer).then(georaster => {
          var layer = new GeoRasterLayer({
            georaster: georaster,
            opacity: 0.7,
            // 如果是RGB三波段，直接用这个颜色转换函数
            pixelValuesToColorFn: values => `rgb(${values[0]}, ${values[1]}, ${values[2]})`
          }).addTo(map);
          map.fitBounds(layer.getBounds());
        });
      })
      .catch(error => console.error('加载失败:', error));
  </script>
</body>
</html>

三、踩坑排查指南 #

• 跨域报错：本地直接打开HTML文件会触发跨域，必须用本地服务器，比如Python运行python -m http.server，或者用Node的http-server工具。
• TIF文件问题：确保你的TIF带地理坐标信息（不是普通图片TIF），如果文件太大，建议先做金字塔切片或压缩，否则加载会很慢甚至崩溃。
• 控制台看报错：按F12打开开发者工具，看Console里的具体错误，比如提示parseGeoraster is not defined就是georaster库没引对，提示No CORS就是跨域问题。

内容的提问来源于stack exchange，提问作者Bárbara Duarte