Как избежать мерцания в реализации WMS Leaflet Tile Layer?

Question

Я использую слой листов Leaflet WMS для загрузки радара и отображения его на карте. У меня есть кнопка воспроизведения, которая перебирает временные ряды и с каждым l oop запрашивает новую плитку. Все работает, за исключением щелкающего вопроса. Между этими запросами происходит щелчок.

Я загружаю слой один раз, а затем изменяю параметры на 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
});

Stackblitz: 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- Во время воспроизведения l oop через все предварительно загруженные слои, установите непрозрачность на 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);
}

Полный код доступен в Stackblitz: https://stackblitz.com/edit/mn-angular-leaflet-wms