如何檢測Tile Server正確返回但顯示“無地圖數據”的圖塊

Question

我知道Leaflet Tile Layer的tileerror事件，但是如果tile只是一個帶有“ No map data”免責聲明的虛擬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> 

Answer 1

如果我理解正確，則您有一個Tile Server有時會返回技術上正確的切片圖像，但是其內容顯示實際上沒有呈現有用的數據，例如這樣的圖像：

_{Tiles©Esri —來源：Esri，i-cubed，USDA，USGS，AEX，GeoEye，Getmapping，Aerogrid，IGN，IGP，UPR-EGP和GIS用戶社區}

您希望在Leaflet Tile Layer獲得此類圖塊時收到通知，其方式與"tileerror"事件類似。

由於圖塊在技術上是正確的，因此遺憾的是，Leaflet無法理解實際上沒有渲染有用的數據。

但是，假設Tile Server始終返回完全相同的內容，則可以很好地與您知道沒有數據的tile進行圖像比較。

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, eg 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 ' + cx + '/' + cy + '/' + cz); }); 

 #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="" />