Mapbox GL JS 更新图像叠加源
Mapbox GL JS Updating Source of Image Overlay
我正在做一个项目,屏幕上同时显示 4 张地图。我有一个准系统菜单,用户可以在其中选择一个叠加层,它会显示在正确的地图上。
这有效,但是我正在使用的图像覆盖的图像源每 2 分钟更新一次服务器端。我只想有一个简单的功能来自动重新获取源代码,以便保证每 2 分钟更新一次。我添加了一张图片来展示它是如何工作的。
我找到了有关以这种方式更新 GeoJSON 文件的 Mapbox API 文档,但我不知道如何自动更新 image sources。我看了也没用。
这是我的屏幕截图,其中包含实际的源代码和层,下面是我将要编写的伪代码。
这是源和图层:
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
}
有(现在?)一种 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
将确保您不会显示缓存的图像。
我正在做一个项目,屏幕上同时显示 4 张地图。我有一个准系统菜单,用户可以在其中选择一个叠加层,它会显示在正确的地图上。
这有效,但是我正在使用的图像覆盖的图像源每 2 分钟更新一次服务器端。我只想有一个简单的功能来自动重新获取源代码,以便保证每 2 分钟更新一次。我添加了一张图片来展示它是如何工作的。
我找到了有关以这种方式更新 GeoJSON 文件的 Mapbox API 文档,但我不知道如何自动更新 image sources。我看了也没用。
这是我的屏幕截图,其中包含实际的源代码和层,下面是我将要编写的伪代码。
这是源和图层:
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
}
有(现在?)一种 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
将确保您不会显示缓存的图像。