Add a clear() method for tile sources

src/ol/source/Tile.js

@@ -300,12 +300,20 @@ class TileSource extends Source {
     return withinExtentAndZ(tileCoord, tileGrid) ? tileCoord : null;
   }
 
+  /**
+   * Remove all cached tiles from the source. The next render cycle will fetch new tiles.
+   * @api
+   */
+  clear() {
+    this.tileCache.clear();
+  }
+
   /**
    * @inheritDoc
    */
   refresh() {
-    this.tileCache.clear();
+    this.clear();
-    this.changed();
+    super.refresh();
   }
 
   /**

test/spec/ol/source/xyz.test.js

@@ -1,8 +1,11 @@
 import TileSource from '../../../../src/ol/source/Tile.js';
+import TileLayer from '../../../../src/ol/layer/Tile.js';
 import TileImage from '../../../../src/ol/source/TileImage.js';
 import UrlTile from '../../../../src/ol/source/UrlTile.js';
 import XYZ from '../../../../src/ol/source/XYZ.js';
 import {createXYZ} from '../../../../src/ol/tilegrid.js';
+import View from '../../../../src/ol/View.js';
+import Map from '../../../../src/ol/Map.js';
 
 
 describe('ol.source.XYZ', function() {
@@ -183,4 +186,62 @@ describe('ol.source.XYZ', function() {
 
   });
 
+  describe('clear and refresh', function() {
+
+    let map, source;
+    let callCount = 0;
+    beforeEach(function(done) {
+      source = new XYZ({
+        url: 'spec/ol/data/osm-{z}-{x}-{y}.png',
+        tileLoadFunction: function(image, src) {
+          ++callCount;
+          image.getImage().src = src;
+        }
+      });
+      const target = document.createElement('div');
+      target.style.width = target.style.height = '100px';
+      document.body.appendChild(target);
+      map = new Map({
+        target: target,
+        layers: [
+          new TileLayer({
+            source: source
+          })
+        ],
+        view: new View({
+          center: [0, 0],
+          zoom: 0
+        })
+      });
+      map.once('rendercomplete', function() {
+        callCount = 0;
+        done();
+      });
+    });
+
+    afterEach(function() {
+      document.body.removeChild(map.getTargetElement());
+      map.setTarget(null);
+    });
+
+    it('#refresh() reloads from server', function(done) {
+      map.once('rendercomplete', function() {
+        expect(callCount).to.be(1);
+        done();
+      });
+      source.refresh();
+    });
+
+    it('#clear() clears the tile cache', function(done) {
+      map.once('rendercomplete', function() {
+        done(new Error('should not re-render'));
+      });
+      source.clear();
+      setTimeout(function() {
+        done();
+      }, 1000);
+    });
+
+  });
+
 });