Add support for smooth TileWMS dimensions

examples/wms-time.html

@@ -0,0 +1,14 @@
+---
+layout: example.html
+title: WMS Time
+shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer.
+docs: >
+  Demonstrates smooth reloading of layers when changing the time dimension continously.
+tags: "wms, time, dimensions, transition"
+---
+<div id="map" class="map"></div>
+<div role="group" aria-label="Animation controls">
+  <button id="play" type="button">Play</button>
+  <button id="pause" type="button">Pause</button>
+  <span id="info"></span>
+</div>

examples/wms-time.js

@@ -0,0 +1,64 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.TileWMS');
+
+var startDate = new Date(Date.parse('2012-01-01T19:00:00Z'));
+var frameRate = 0.5; // frames per second
+var animationId = null;
+
+var counter = 0;
+
+var layers = [
+  new ol.layer.Tile({
+    source: new ol.source.MapQuest({layer: 'sat'})
+  }),
+  new ol.layer.Tile({
+    extent: [-13884991, 2870341, -7455066, 6338219],
+    source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
+      url: 'http://oos.soest.hawaii.edu/thredds/wms/hioos/model/wav/ww3/' +
+          'WaveWatch_III_Global_Wave_Model_best.ncd?',
+      params: {'LAYERS': 'Thgt', 'TIME': startDate.toISOString()}
+    }))
+  })
+];
+var map = new ol.Map({
+  layers: layers,
+  target: 'map',
+  view: new ol.View({
+    center: [-10997148, 4569099],
+    zoom: 4
+  })
+});
+
+var setTime = function() {
+  startDate.setHours(startDate.getHours() + 1);
+  layers[1].getSource().updateParams({'TIME': startDate.toISOString()});
+  updateInfo();
+};
+
+var stop = function() {
+  if (animationId !== null) {
+    window.clearInterval(animationId);
+    animationId = null;
+  }
+};
+
+var play = function() {
+  stop();
+  animationId = window.setInterval(setTime, 1000 / frameRate);
+};
+
+var updateInfo = function() {
+  var el = document.getElementById('info');
+  el.innerHTML = startDate.toISOString();
+};
+
+var startButton = document.getElementById('play');
+startButton.addEventListener('click', play, false);
+
+var stopButton = document.getElementById('pause');
+stopButton.addEventListener('click', stop, false);
+
+updateInfo();

src/ol/source/tilewmssource.js

@@ -65,6 +65,13 @@ ol.source.TileWMS = function(opt_options) {
    */
   this.params_ = params;
 
+  /**
+   * @private
+   * @type {string}
+   */
+  this.paramsKey_ = '';
+  this.resetParamsKey_();
+
   /**
    * @private
    * @type {boolean}
@@ -178,6 +185,14 @@ ol.source.TileWMS.prototype.getGutter = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.source.TileWMS.prototype.getKeyParams = function() {
+  return this.paramsKey_;
+};
+
+
 /**
  * @inheritDoc
  */
@@ -305,12 +320,20 @@ ol.source.TileWMS.prototype.resetCoordKeyPrefix_ = function() {
     }
   }
 
-  var key;
-  for (key in this.params_) {
+  this.coordKeyPrefix_ = res.join('#');
+};
+
+
+/**
+ * @private
+ */
+ol.source.TileWMS.prototype.resetParamsKey_ = function() {
+  var i = 0;
+  var res = [];
+  for (var key in this.params_) {
     res[i++] = key + '-' + this.params_[key];
   }
-
-  this.coordKeyPrefix_ = res.join('#');
+  this.paramsKey_ = res.join('/');
 };
 
 
@@ -375,6 +398,7 @@ ol.source.TileWMS.prototype.tileUrlFunction_ =
 ol.source.TileWMS.prototype.updateParams = function(params) {
   goog.object.extend(this.params_, params);
   this.resetCoordKeyPrefix_();
+  this.resetParamsKey_();
   this.updateV13_();
   this.changed();
 };