Mapbox GL JS - 及时移除图像叠加的淡入淡出

Question

我目前正在 Mapbox GL JS 中使用图像叠加层 (.gif) 来提供天气雷达数据。我需要设置一个循环来显示运动中的图像 - 但图像叠加层具有 "fade-in" 效果，我希望它消失。我怎样才能删除它，以便图像尽可能快地打开和关闭而不会淡入或淡出？我在 API 文档中找不到它，但我可能不知何故错过了它。

编辑：明确地说，我只是问如何删除淡入淡出效果 - 而不是如何循环它或其他任何东西 - 我可以稍后再做。

我添加叠加层和源（产生默认淡入淡出效果）的代码当前为：

topleftmapbox.addSource("source_KEWX_L2_CC", {
"type": "image",
"url": "images/KEWX_L2_CC.gif",
"coordinates": [


[-102, 33],  
[-94, 33],   
[-94, 26], 
[-102, 26]          

]
})




topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"raster-opacity": 0.9,
"layout": {"visibility": "visible"},
}, firstSymbolId)
}

Answer 1

您需要更改 raster-fade-duration 属性:

topleftmapbox.addLayer({
  "id": "overlay_KEWX_L2_CC",
  "source": "source_KEWX_L2_CC",
  "type": "raster",
  "paint": {
    "raster-opacity": 0.9,
    "raster-fade-duration": 0
  },
  "layout": {"visibility": "visible"},
}, firstSymbolId)

P.S。是的，我建议使用 canvassource 制作动画。

Mapbox GL JS - 及时移除图像叠加的淡入淡出

Mapbox GL JS - Remove fade in time for image overlay

javascript

geospatial

mapbox-gl-js