Openlayers 3替換失敗的圖塊

Question

我們正在運行開放層3.15。 有時我們會掉落或失敗。 目前，它什么也沒有顯示（這可能會使我們的用戶感到困惑），因此我們希望將其替換為顯示“無數據”之類的圖塊。 我試過撿起事件並替換磁貼的來源，例如

            source.on('tileloaderror', function(){
               source.setUrl('./images/map/failureTile.png');
            });

但是這樣做的問題是，不是在一個圖塊上執行此操作，而是在整個圖層上執行此操作，我們不希望這樣做。

有誰知道我們如何僅針對失敗的圖塊而不是整個圖層執行此操作？

Answer 1

現在是2018年，但對於可能需要此服務的人來說。 在v5.3.0上測試

source.on('tileloaderror', function (event) {
  var tileLoadFunction = function (imageTile, src) {
    imageTile.getImage().src = './images/map/failureTile.png';
  };
  if (event.tile.tileLoadFunction_ != tileLoadFunction) {
    event.tile.tileLoadFunction_ = tileLoadFunction;
    event.tile.load();
  }
});

此代碼依賴於私有函數event.tile.tileLoadFunction_被公開。

不幸的是，xnakos的答案在v5.3.0上不起作用，因為event.tile.getImage()已由內部錯誤處理程序替換為1x1畫布圖像。

還應注意，直接更改event.tile.src_似乎是一種選擇，但由於緩存鍵或其他原因而無法使用。

Answer 2

未能加載的圖塊應具有不同的類（.olImageLoadError）。 您可以定義不顯示這些項目的CSS規則。

.olImageLoadError { 
    display: none !important;
}

Answer 3

您可以嘗試以下方法：

source.on('tileloaderror', function(event) {
    event.tile.getImage().src = './images/map/failureTile.png';
});

您需要event參數，該參數可以使失敗的磁貼獲取，以便您可以更改磁貼的圖像。

警告：我使用tileloadend而不是tileloaderror測試了上面的代碼，因為我的圖塊永遠不會對我失敗。 :)我使用Math.random()來模擬失敗率，並且某些隨機圖塊被指定的圖像替換。 我無法想到上述代碼無法正常工作的原因。 如果您確認它有效，我將從我的答案中刪除此警告。 我在OpenLayers 3.14.2和OSM源上對其進行了測試。