时间戳

首页 > 解决方案 > Mapbox GL JS 更新图片叠加源

javascript - Mapbox GL JS 更新图片叠加源

问题描述

我正在做一个项目，我在屏幕上一次有 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
}

标签： javascriptmapboxgeospatialmapbox-gl-js

解决方案

有（现在？）一种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将确保您不显示缓存的图像。

推荐阅读