我太懂这个痛点了——这类瓦片因为服务器返回了200状态的合法图片，Leaflet的tileerror事件根本不会触发，得靠我们手动去检测图片内容才能识别。下面是具体的实现思路和代码示例：

核心思路 #

利用Leaflet的tileload事件（每个瓦片加载完成后都会触发），拿到瓦片对应的<img>元素，通过Canvas分析图片的像素特征，判断它是不是“无数据”占位图。通常这类占位图会有固定的纯色（比如统一的灰色）或者重复的特征像素，我们可以对比这些特征来做识别。

代码实现 #

结合你提供的示例代码，我们可以这样修改：

var map = L.map("map").setView([52.21581894148382, 2.74709701538086], 14); 
var layer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { 
  attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Com...'
}).addTo(map);

// 监听瓦片加载完成事件
layer.on('tileload', function(e) {
  var tileImg = e.tile;
  // 创建Canvas用于像素分析
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = tileImg.width;
  canvas.height = tileImg.height;
  
  ctx.drawImage(tileImg, 0, 0);
  // 获取左上角的像素值（通常占位图的边角像素是固定的）
  var pixelData = ctx.getImageData(0, 0, 1, 1).data;
  var r = pixelData[0], g = pixelData[1], b = pixelData[2];
  
  // 这里以Esri无数据瓦片的典型灰色（#E8E8E8，对应RGB 232,232,232）为例
  // 你可以根据实际的占位图颜色调整这个判断条件
  if (r === 232 && g === 232 && b === 232) {
    console.log(`无数据瓦片：z=${e.coords.z}, y=${e.coords.y}, x=${e.coords.x}`);
    // 这里可以做你需要的处理，比如隐藏瓦片、标记坐标等
    tileImg.style.visibility = 'hidden';
  }
});

注意事项 #

• 像素值校准：不同服务器的“无数据”占位图颜色可能不同，你需要先找到目标瓦片的特征像素值（可以用截图工具取色，或者在浏览器控制台里打印pixelData查看）。
• 性能优化：如果地图加载的瓦片数量很大，频繁创建Canvas和分析像素可能会有性能损耗。可以考虑：
  • 缓存已经检测过的瓦片坐标（比如用对象存储{z}_{y}_{x}作为键），避免重复检测。
  • 只在特定缩放级别下进行检测，缩小检测范围。
• 跨域问题：如果瓦片服务器没有开启CORS，getImageData会抛出跨域错误。这种情况下，你可以考虑通过代理服务器转发瓦片请求，或者使用服务器端的图片分析接口。

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