如何将GeoTIFF图层添加至Leaflet的图层控制面板？

你只需把加载好的GeoTIFF图层整合到Leaflet的图层控制面板体系中即可，具体修改方案如下：

完整示例代码 #

// 初始化基础地图
var map = L.map('map').setView([51.505, -0.09], 13);

// 添加基础底图（以OpenStreetMap为例）
var baseMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 定义底图集合（供图层控制面板调用）
var baseMaps = {
    "OpenStreetMap": baseMap
};

// 初始化叠加层集合，用于存放GeoTIFF图层
var overlayMaps = {};

// 创建并添加图层控制面板到地图
var layersControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

// 加载并配置GeoTIFF图层
var tiff = "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/tz850.tiff";
fetch(tiff).then(r => r.arrayBuffer()).then(function(buffer) {
  var s = L.ScalarField.fromGeoTIFF(buffer);
  // 创建GeoTIFF图层，暂不直接添加到地图
  let tiffLayer = L.canvasLayer.scalarField(s, {
      color: chroma.scale("RdPu").domain(s.range)
  });

  // 将GeoTIFF图层加入叠加层集合，并设置控制面板显示名称
  overlayMaps["TIFF温度图层"] = tiffLayer;
  // 如需默认显示该图层，执行此行；否则可删除
  tiffLayer.addTo(map);

  // 动态更新图层控制面板，添加GeoTIFF图层选项
  layersControl.addOverlay(tiffLayer, "TIFF温度图层");

  // 绑定点击弹窗逻辑
  tiffLayer.on("click", function(e) {
    if (e.value !== null) {
      let popup = L.popup()
      .setLatLng(e.latlng)
      .setContent(`${e.value}`)
      .openOn(map);
    }
  });

  map.fitBounds(tiffLayer.getBounds());
});

关键说明 #

• Leaflet图层控制面板分为**底图（baseMaps）和叠加层（overlayMaps）**两类，GeoTIFF图层属于叠加层，需放入overlayMaps集合中。
• 若GeoTIFF图层是预先确定的静态资源，可提前将图层对象加入overlayMaps后再初始化控制面板；若是异步动态加载（如示例中的fetch请求），则在加载完成后通过layersControl.addOverlay()方法将图层添加到已创建的控制面板中。
• 调用tiffLayer.addTo(map)会让图层默认显示在地图上，若无需默认显示，删除该行即可，用户可通过控制面板手动勾选开启。

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