Set initial tile state to EMPTY when outside source extent

src/ol/source/VectorTile.js

@@ -9,7 +9,7 @@ import {toSize} from '../size.js';
 import UrlTile from './UrlTile.js';
 import {getKeyZXY, getKey} from '../tilecoord.js';
 import {createXYZ, extentFromProjection, createForProjection} from '../tilegrid.js';
-import {buffer as bufferExtent, getIntersection} from '../extent.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';
@@ -328,8 +328,18 @@ class VectorTile extends UrlTile {
       }
     }
     const tileCoord = [z, x, y];
-    const urlTileCoord = this.getTileCoordForTileUrlFunction(
-      tileCoord, projection);
+    const sourceExtent = this.getTileGrid().getExtent();
+    let tileInExtent = true;
+    if (sourceExtent) {
+      const tileGrid = this.getTileGridForProjection(projection);
+      const tileExtent = tileGrid.getTileCoordExtent(tileCoord);
+      // make extent 1 pixel smaller so we don't load tiles for < 0.5 pixel render space
+      bufferExtent(tileExtent, -1 / tileGrid.getResolution(z), tileExtent);
+      tileInExtent = intersects(sourceExtent, tileExtent);
+    }
+    const urlTileCoord = tileInExtent ?
+      this.getTileCoordForTileUrlFunction(tileCoord, projection) :
+      null;
     const newTile = new VectorRenderTile(
       tileCoord,
       urlTileCoord !== null ? TileState.IDLE : TileState.EMPTY,

test/spec/ol/source/vectortile.test.js

@@ -5,7 +5,7 @@ import VectorTile from '../../../../src/ol/VectorTile.js';
 import GeoJSON from '../../../../src/ol/format/GeoJSON.js';
 import MVT from '../../../../src/ol/format/MVT.js';
 import VectorTileLayer from '../../../../src/ol/layer/VectorTile.js';
-import {get as getProjection} from '../../../../src/ol/proj.js';
+import {get as getProjection, get} from '../../../../src/ol/proj.js';
 import VectorTileSource from '../../../../src/ol/source/VectorTile.js';
 import {createXYZ} from '../../../../src/ol/tilegrid.js';
 import TileGrid from '../../../../src/ol/tilegrid/TileGrid.js';
@@ -75,7 +75,7 @@ describe('ol.source.VectorTile', function() {
       });
     });
 
-    it('handles empty tiles tiles', function(done) {
+    it('handles empty tiles', function(done) {
       const source = new VectorTileSource({
         format: new GeoJSON(),
         url: ''
@@ -90,6 +90,15 @@ describe('ol.source.VectorTile', function() {
       tile.load();
     });
 
+    it('creates empty tiles outside the source extent', function() {
+      const fullExtent = get('EPSG:3857').getExtent();
+      const source = new VectorTileSource({
+        extent: [fullExtent[0], fullExtent[1], 0, 0]
+      });
+      const tile = source.getTile(1, 1, 1, 1, source.getProjection());
+      expect(tile.getState()).to.be(TileState.EMPTY);
+    });
+
     it('creates new tile when source key changes', function() {
       source.setKey('key1');
       const tile1 = source.getTile(0, 0, 0, 1, getProjection('EPSG:3857'));