Fix tiles and background handling

src/ol/layer/MapboxVector.js

@@ -405,10 +405,7 @@ class MapboxVectorLayer extends VectorTileLayer {
     }
 
     const source = this.getSource();
-    if (
-      styleSource.url.indexOf('mapbox://') === 0 ||
-      styleSource.url.indexOf('{z}') !== -1
-    ) {
+    if (styleSource.url && styleSource.url.indexOf('mapbox://') === 0) {
       // Tile source url, handle it directly
       source.setUrl(
         normalizeSourceUrl(
@@ -433,11 +430,13 @@ class MapboxVectorLayer extends VectorTileLayer {
       }
       setupVectorSource(
         styleSource,
-        normalizeSourceUrl(
-          styleSource.url,
-          this.accessToken,
-          this.accessTokenParam_
-        )
+        styleSource.url
+          ? normalizeSourceUrl(
+              styleSource.url,
+              this.accessToken,
+              this.accessTokenParam_
+            )
+          : undefined
       ).then((source) => {
         applyStyle(this, style, sourceIdOrLayersList)
           .then(() => {
@@ -470,9 +469,8 @@ class MapboxVectorLayer extends VectorTileLayer {
       (layer) => layer.type === 'background'
     );
     if (
-      !background ||
-      !background.layout ||
-      background.layout.visibility !== 'none'
+      background &&
+      (!background.layout || background.layout.visibility !== 'none')
     ) {
       const style = new Style({
         fill: new Fill(),

test/browser/spec/ol/layer/MapboxVector.test.js

@@ -141,7 +141,7 @@ describe('ol/layer/MapboxVector', () => {
               version: 8,
               sources: {
                 'foo': {
-                  url: '/spec/ol/data/{z}-{x}-{y}.vector.pbf',
+                  tiles: ['/spec/ol/data/{z}-{x}-{y}.vector.pbf'],
                   type: 'vector',
                 },
               },
@@ -165,9 +165,6 @@ describe('ol/layer/MapboxVector', () => {
           source.getTile(14, 8938, 5680, 1, get('EPSG:3857')).load();
           source.once('tileloadend', (event) => {
             const features = event.tile.getFeatures();
-            if (!features) {
-              event.tile.setFeatures([]);
-            }
             expect(features[0].get('layer')).to.be('background');
             expect(
               features[0].getStyleFunction()().getFill().getColor()
@@ -177,6 +174,51 @@ describe('ol/layer/MapboxVector', () => {
         }
       });
     });
+
+    it('works for styles without background', function (done) {
+      const layer = new MapboxVectorLayer({
+        styleUrl:
+          'data:,' +
+          encodeURIComponent(
+            JSON.stringify({
+              version: 8,
+              sources: {
+                'foo': {
+                  tiles: ['/spec/ol/data/{z}-{x}-{y}.vector.pbf'],
+                  type: 'vector',
+                },
+              },
+              layers: [
+                {
+                  id: 'landuse',
+                  type: 'fill',
+                  source: 'foo',
+                  'source-layer': 'landuse',
+                  paint: {
+                    'fill-color': '#ff0000',
+                    'fill-opacity': 0.8,
+                  },
+                },
+              ],
+            })
+          ),
+      });
+      const source = layer.getSource();
+      const key = source.on('change', function () {
+        if (source.getState() === 'ready') {
+          unByKey(key);
+          source.getTile(14, 8938, 5680, 1, get('EPSG:3857')).load();
+          source.once('tileloadend', (event) => {
+            const features = event.tile.getFeatures();
+            expect(features[0].get('layer')).to.be('landuse');
+            expect(
+              layer.getStyleFunction()(features[0])[0].getFill().getColor()
+            ).to.eql('rgba(255,0,0,0.8)');
+            done();
+          });
+        }
+      });
+    });
   });
 
   describe('Access token', function () {