title: Want to completely remove old WMS tiles from Openlayers before new ones are drawn
body: <p>This function draws the WMS tiles. However, when a new time is chosen some new tiles get drawn before all the old ones are removed so any attempt at animation is ugly. And also, you can't really tell visually when the drawing is complete if fields are similar between validtimes. I wouldn't mind watching the tiles slowly fill in if all the old ones disappeared completely first.</p>
  <pre><code>function showWMS(YYYYMMDDHH){
      WMSlayer=new ol.layer.Tile()
      if (typeof myparams=='undefined'){
              myparams={}
      }
      if (typeof myparams[YYYYMMDDHH]=='undefined'){
              myparams[YYYYMMDDHH]={}
      }
      myparams[YYYYMMDDHH].LAYERS='GDPS.ETA_ES'
      myparams[YYYYMMDDHH].TRANSPARENT=true
      myparams[YYYYMMDDHH].TILED=true
      myparams[YYYYMMDDHH].TIME=YYYYMMDDHH.substr(0,4)+'-'+YYYYMMDDHH.substr(4,2)+'-'+YYYYMMDDHH.substr(6,2)+'T'+YYYYMMDDHH.substr(8,2)+':00:00Z'
      if (typeof WMSsrc=='undefined'){
              WMSsrc=new ol.source.TileWMS({
                      url: 'https://geo.weather.gc.ca/geomet/',
                      crossOrigin: 'anonymous',
                      params: myparams[YYYYMMDDHH],
                      transition: 0,
                      tileLoadFunction: function(imageTile, src) {                                                                                    imageTile.getImage().src = src;
                      },
              })
      }
      WMSsrc.updateParams(myparams[YYYYMMDDHH])
      if (typeof XXX=='undefined'){
              map[wantedProj].addLayer(WMSlayer); XXX=1
      }
      //if (WMSlayer.getSource()!=null){WMSlayer.getSource().clear()} // didnt help
      WMSlayer.setSource(WMSsrc)
  }
  </code></pre>
  <p>One imperfect solution is to use ol.layer.Image and ol.source.ImageWMS which gives a nice visual transition, however it comes at a cost if the map is panned as no portion of the image is cached like with tiles.</p>