Use applyBackground instead of custom code

config/tsconfig-build.json

@@ -51,8 +51,8 @@
     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    "inlineSources": false                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    "inlineSources": false,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
+    "skipLibCheck": true
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */

package-lock.json

@@ -10,7 +10,7 @@
       "license": "BSD-2-Clause",
       "dependencies": {
         "geotiff": "^1.0.8",
-        "ol-mapbox-style": "^6.5.1",
+        "ol-mapbox-style": "^6.7.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -7168,9 +7168,9 @@
       "dev": true
     },
     "node_modules/ol-mapbox-style": {
-      "version": "6.5.3",
+      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.7.0.tgz",
-      "integrity": "sha512-2SNJQ/7acgACC4nnuKCm9qeMXK2LEeUQWZWRKlXNCstjRf7SDcQvSFXrNSlDLvzhtQ0Gv3QTX5L7plE2wm7Z3Q==",
+      "integrity": "sha512-O8Gq3q1CvzklikL0mYVjGGg6xNOlmpOwzemBwXUzTGf9i14G/WVcDo3JSLySedFHekRIpp5vw7gk+FFd21nqVw==",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.20.1",
         "mapbox-to-css-font": "^2.4.0",
@@ -15559,9 +15559,9 @@
       "dev": true
     },
     "ol-mapbox-style": {
-      "version": "6.5.3",
+      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.7.0.tgz",
-      "integrity": "sha512-2SNJQ/7acgACC4nnuKCm9qeMXK2LEeUQWZWRKlXNCstjRf7SDcQvSFXrNSlDLvzhtQ0Gv3QTX5L7plE2wm7Z3Q==",
+      "integrity": "sha512-O8Gq3q1CvzklikL0mYVjGGg6xNOlmpOwzemBwXUzTGf9i14G/WVcDo3JSLySedFHekRIpp5vw7gk+FFd21nqVw==",
       "requires": {
         "@mapbox/mapbox-gl-style-spec": "^13.20.1",
         "mapbox-to-css-font": "^2.4.0",

package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "geotiff": "^1.0.8",
-    "ol-mapbox-style": "^6.5.1",
+    "ol-mapbox-style": "^6.7.0",
     "pbf": "3.2.1",
     "rbush": "^3.0.1"
   },

src/ol/layer/MapboxVector.js

@@ -7,9 +7,7 @@ import MVT from '../format/MVT.js';
 import SourceState from '../source/State.js';
 import VectorTileLayer from '../layer/VectorTile.js';
 import VectorTileSource from '../source/VectorTile.js';
-import {applyStyle, setupVectorSource} from 'ol-mapbox-style';
+import {applyBackground, applyStyle, setupVectorSource} from 'ol-mapbox-style';
-import {getValue} from 'ol-mapbox-style/dist/stylefunction.js';
-import {toString} from '../color.js';
 
 const mapboxBaseUrl = 'https://api.mapbox.com';
 
@@ -489,40 +487,8 @@ class MapboxVectorLayer extends VectorTileLayer {
       targetSource.setTileLoadFunction(source.getTileLoadFunction());
       targetSource.tileGrid = source.tileGrid;
     }
-    const background = style.layers.find(
+    if (this.getBackground() === undefined) {
-      (layer) => layer.type === 'background'
+      applyBackground(this, style);
-    );
-    if (
-      this.getBackground() === undefined &&
-      background &&
-      (!background.layout || background.layout.visibility !== 'none')
-    ) {
-      const colorFunction = (resolution) => {
-        const opacity =
-          /** @type {number} */ (
-            getValue(
-              background,
-              'paint',
-              'background-opacity',
-              this.getSource().getTileGrid().getZForResolution(resolution)
-            )
-          ) || 1;
-        const color = /** @type {*} */ (
-          getValue(
-            background,
-            'paint',
-            'background-color',
-            this.getSource().getTileGrid().getZForResolution(resolution)
-          )
-        );
-        return toString([
-          color.r * 255,
-          color.g * 255,
-          color.b * 255,
-          color.a * opacity,
-        ]);
-      };
-      this.setBackground(colorFunction);
     }
     if (this.setMaxResolutionFromTileGrid_) {
       const tileGrid = targetSource.getTileGrid();