时间戳

首页 > 解决方案 > Mapbox GL JS - 删除图像叠加的淡入淡出

javascript - Mapbox GL JS - 删除图像叠加的淡入淡出

问题描述

我目前正在使用 Mapbox GL JS 中的图像叠加层 (.gif) 来提供天气雷达数据。我需要设置一个循环来显示运动中的图像 - 但图像叠加层具有“淡入”效果，我希望它消失。我怎样才能删除它，以便图像尽可能快地打开和关闭，而不会淡入或淡出？我在 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)
}

标签： javascriptgeospatialmapbox-gl-js

解决方案

您需要更改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)

PS 是的，我推荐使用canvassourcefor 动画。

推荐阅读