如何检测瓦片服务器正确返回但显示“无地图数据”的瓦片

Question

我了解Leaflet瓦片图层的tileerror事件，但如果瓦片只是带有“无地图数据”免责声明的虚拟瓦片，则不会触发该事件。

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 Community'
});

layer.addTo(map);

layer.on("tileerror", function() {
  console.log("An error occurred while trying to load a tine...");
});

#map { height: 98vh; }

<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

 <div id="map"></div>

- Bacchus

Answer 1

如果我理解正确，您有一个瓦片服务器，有时会返回一个技术上正确的瓦片图像，但其内容表示实际上没有有用的数据呈现在上面，就像这个例子: _{Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community} 您希望在类似于"tileerror"事件的方式下，当Leaflet瓦片图层获得这样的瓦片时得到通知。

由于该瓦片在技术上是正确的，不幸的是，Leaflet无法理解实际上没有有用的数据呈现在上面。

然而，如果瓦片服务器始终返回完全相同的内容，您可以使用已知没有数据的瓦片执行图像比较。

1. 监听瓦片层的"tileload"事件，以在加载新瓦片时附加回调。
2. 将瓦片图像与对应于“无有用数据”状态的图像进行比较。例如，您可以使用js-imagediff，但还有许多其他库可用于此任务。
3. 如果图像相等，则执行某些操作，例如触发新事件。

（打开浏览器开发人员控制台以查看以下代码片段的效果）

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 Community',
  crossOrigin: true // Required to be able to analyze the image in a canvas context.
}).addTo(map);

var nodatatile = document.getElementById('nodatatile');

// 1. Listen to the Tile Layer's "tileload" event.
// http://leafletjs.com/reference-1.3.0.html#gridlayer-tileload
// http://leafletjs.com/reference-1.3.0.html#tileevent
layer.on('tileload', function(tileEvent) {
  var tile = tileEvent.tile;
  var c = tileEvent.coords;
  // 2. Compare the tile with a known tile that has no useful data.
  // https://github.com/HumbleSoftware/js-imagediff/
  var isEqualToNoData = imagediff.equal(nodatatile, tile);

  // 3. Perform some action if they are equal, e.g. fire a new event.
  if (isEqualToNoData) {
    layer.fire('tilenodata', tileEvent);
  }
});

// Listen to the new event.
layer.on('tilenodata', function(tileEvent) {
  var c = tileEvent.coords;
  console.log('Tile no data at ' + c.x + '/' + c.y + '/' + c.z);
});

#map {
  height: 98vh;
}

<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/imagediff@1.0.8/imagediff.js"></script>

<div id="map"></div>

<img id="nodatatile" src="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/14/5395/8316" crossorigin="" />

- ghybs