Ensure proper tile load sequence

src/ol/Tile.js

@@ -241,6 +241,9 @@ class Tile extends EventTarget {
    * @api
    */
   setState(state) {
+    if (this.state !== TileState.ERROR && this.state > state) {
+      throw new Error('Tile load sequence violation');
+    }
     this.state = state;
     this.changed();
   }

src/ol/source/VectorTile.js

@@ -10,7 +10,6 @@ import UrlTile from './UrlTile.js';
 import {getKeyZXY, getKey} from '../tilecoord.js';
 import {createXYZ, extentFromProjection, createForProjection} from '../tilegrid.js';
 import {buffer as bufferExtent, getIntersection, intersects} from '../extent.js';
-import {listen, unlistenByKey} from '../events.js';
 import EventType from '../events/EventType.js';
 import {loadFeaturesXhr} from '../featureloader.js';
 import {isEmpty} from '../obj.js';
@@ -240,13 +239,15 @@ class VectorTile extends UrlTile {
           }
           if (sourceTile.getState() !== TileState.EMPTY && tile.getState() === TileState.IDLE) {
             tile.loadingSourceTiles++;
-            const key = listen(sourceTile, EventType.CHANGE, function() {
+            const onSourceTileChange = function() {
               const state = sourceTile.getState();
               const sourceTileKey = sourceTile.getKey();
               if (state === TileState.LOADED || state === TileState.ERROR) {
                 if (state === TileState.LOADED) {
-                  unlistenByKey(key);
+                  sourceTile.removeEventListener(EventType.CHANGE, onSourceTileChange);
                   tile.loadingSourceTiles--;
+                  // eslint-disable-next-line no-use-before-define
+                  tile.removeEventListener(EventType.CHANGE, onTileChange);
                   delete tile.errorSourceTileKeys[sourceTileKey];
                 } else if (state === TileState.ERROR) {
                   tile.errorSourceTileKeys[sourceTileKey] = true;
@@ -257,7 +258,15 @@ class VectorTile extends UrlTile {
                   tile.setState(isEmpty(tile.errorSourceTileKeys) ? TileState.LOADED : TileState.ERROR);
                 }
               }
-            });
+            };
+            const onTileChange = function() {
+              if (tile.getState() === TileState.ABORT) {
+                sourceTile.removeEventListener(EventType.CHANGE, onSourceTileChange);
+                tile.removeEventListener(EventType.CHANGE, onTileChange);
+              }
+            };
+            sourceTile.addEventListener(EventType.CHANGE, onSourceTileChange);
+            tile.addEventListener(EventType.CHANGE, onTileChange);
           }
         }.bind(this));
         if (!covered) {

test/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -74,7 +74,8 @@ describe('ol.renderer.canvas.VectorTileLayer', function() {
       source = new VectorTileSource({
         format: new MVT(),
         tileClass: TileClass,
-        tileGrid: createXYZ()
+        tileGrid: createXYZ(),
+        url: '{z}/{x}/{y}.pbf'
       });
       source.getSourceTiles = function() {
         return [new TileClass([0, 0, 0])];