如何避免传单平铺层WMS实现中的闪烁

Question

我正在使用传单WMS平铺层加载雷达并将其显示在地图上。我有一个播放按钮，它在时间序列中循环，每次循环都会请求新的磁贴。除了电影问题，一切都正常。在这些请求之间有一个间隙。

我加载一次层，然后用setParams为新请求更改参数：

this.layer.setParams({
time: this.currentTime.toISOString().split(".")[0] + "Z"
});

这就是我加载层的方式：

this.layer = L.tileLayer.wms("http://geo.weather.gc.ca/geomet/?", {
layers: "RADAR_1KM_RRAI",
format: "image/png",
transparent: true,
opacity: 0.5,
zIndex: 2
});

堆叠闪电战：https://stackblitz.com/edit/mn-angular-leaflet-wms

文件：https://leafletjs.com/reference-1.6.0.html#tilelayer-wms

有一个传单插件https://github.com/heigeo/leaflet.wms但我不确定这是否能解决问题。我试着实现它，但不能很好地理解它。

Answer 1

为了在层之间实现平稳过渡，需要注意的事情很少。

1-预加载图层，将不透明度设置为0并将其添加到地图

generateLayers() {
let date = new Date(this.radarDates[0]);
while (date < new Date(this.radarDates[1])) {
const layer = L.tileLayer.wms(this.wmsURL, this.wmsOptions);
date = new Date(date.setMinutes(date.getMinutes() + 10));
layer.setParams({
time: date.toISOString().split(".")[0] + "Z"
});
this.map.addLayer(layer);
this.timeLayers.push(layer);
}
// Show the first layer
this.timeLayers[0].setOpacity(this.showOpacityValue);
}

2-播放时，循环浏览所有预加载的层，将不透明度设置为0并将其添加到地图中，隐藏当前层(不透明度0(并显示当前层(透明度0.57(

setTransitionTimer() {
if (this.timeLayerIndex > this.timeLayers.length - 1 || !this.isPlaying) {
return;
}
setTimeout(() => {
this.timeLayers.forEach(timeLayer => {
timeLayer.setOpacity(0);
timeLayer.addTo(this.map);
});
if (this.isShowRadar) {
// set the opacity 0
this.hideLayerByIndex(this.timeLayerIndex);
// Add by 1 or reset
this.incrementLayerIndex();
// set the opacity 0.57
this.showLayerByIndex(this.timeLayerIndex);
// increase time by 10 minutes
this.setCurrentTime();
this.setTransitionTimer();
} else {
this.removeLayers();
}
}, this.transitionMs);
}

完整的代码可在Stacklitz中获得：https://stackblitz.com/edit/mn-angular-leaflet-wms