Mapbox GL JS更新圖像疊加層的來源

Question

我正在一個項目中同時在屏幕上顯示4張地圖。 我有一個准系統菜單，用戶可以在其中選擇一個疊加層，並在正確的地圖上顯示。

這可行，但是我每2分鍾使用一次更新服務器端的圖像疊加層的圖像源。 我只想擁有一個簡單的功能來自動重新獲取源代碼，因此可以保證每2分鍾更新一次。 我添加了一張圖片以顯示其工作原理。

我已經找到有關以這種方式更新GeoJSON文件的Mapbox API文檔，但是我不知道如何自動更新圖像源 。 我沒有用。

這是我的屏幕快照，其中包含實際的源代碼和層，在下面，我將為要執行的操作編寫偽代碼。

這是源和層 ：

topleftmapbox.on('load', function() {
  topleftmapbox.addSource("source_KEWX_L2_REFLECTIVITY", {
    "type": "image",
    "url": "images/KEWX_L2_REFLECTIVITY.gif",
    "coordinates": [

      [-103.009641, 33.911],
      [-94.009641, 33.911],
      [-94.009641, 24.911],
      [-103.009641, 24.911]
    ]
  })

  var layers = topleftmapbox.getStyle().layers;
  // Find the index of the first symbol layer in the map style
  var firstSymbolId;
  for (var i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol') {
      firstSymbolId = layers[i].id;
      break;
    }
  }

  topleftmapbox.addLayer({
    "id": "overlay_KEWX_L2_REFLECTIVITY",
    "source": "source_KEWX_L2_REFLECTIVITY",
    "type": "raster",
    "raster-opacity": 0.5,
    "layout": {
      "visibility": "none"
    },
  }, firstSymbolId)
});

我想做的偽代碼：

On Map load() {
  start timer for every 2 minutes
  Get Source "source_KEWX_L2_REFLECTIVITY"
  Refresh the source with same URL ("images/KEWX_L2_REFLECTIVITY.gif") to make sure its live.
  keep doing this every 2 minutes
}

Answer 1

現在有一個updateImage()方法，您可以執行以下操作：

map.getSource('source_KEWX_L2_REFLECTIVITY').updateImage({
  url: "images/KEWX_L2_REFLECTIVITY.gif?" + counter++,
  coordinates': [
    [-103.009641, 33.911],
    [-94.009641, 33.911],
    [-94.009641, 24.911],
    [-103.009641, 24.911]
  ]
});

包括一個遞增counter將確保您不顯示緩存的圖像。