Merge pull request #1365 from RobertOrthofer/master

implement basic support for usage in worker

Author: ahocevar

package-lock.json

@@ -7,9 +7,11 @@ License: https://raw.githubusercontent.com/openlayers/ol-mapbox-style/master/LIC
 import {derefLayers} from '@maplibre/maplibre-gl-style-spec';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
+import {createMockDiv} from 'ol/dom.js';
 import {getCenter, getTopLeft} from 'ol/extent.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import MVT from 'ol/format/MVT.js';
+import {WORKER_OFFSCREEN_CANVAS} from 'ol/has.js';
 import LayerGroup from 'ol/layer/Group.js';
 import ImageLayer from 'ol/layer/Image.js';
 import Layer from 'ol/layer/Layer.js';
@@ -409,7 +411,11 @@ export function applyStyle(
             options.accessToken,
             styleUrl || location.href,
           );
-          spriteScale = window.devicePixelRatio >= 1.5 ? 0.5 : 1;
+          spriteScale = WORKER_OFFSCREEN_CANVAS
+            ? 1
+            : window.devicePixelRatio >= 1.5
+              ? 0.5
+              : 1;
           const sizeFactor = spriteScale == 0.5 ? '@2x' : '';
 
           Promise.all(
@@ -632,7 +638,9 @@ function getBackgroundColor(glLayer, resolution, options, functionCache) {
  * @return {Layer} OpenLayers layer.
  */
 function setupBackgroundLayer(glLayer, options, functionCache) {
-  const div = document.createElement('div');
+  const div = WORKER_OFFSCREEN_CANVAS
+    ? createMockDiv()
+    : document.createElement('div');
   div.className = 'ol-mapbox-style-background';
   div.style.position = 'absolute';
   div.style.width = '100%';
@@ -1165,15 +1173,28 @@ export function apply(mapOrGroupOrElement, style, options = {}) {
   let promise;
   /** @type {Map|LayerGroup} */
   let mapOrGroup;
-  if (
-    typeof mapOrGroupOrElement === 'string' ||
-    mapOrGroupOrElement instanceof HTMLElement
-  ) {
-    mapOrGroup = new Map({
-      target: mapOrGroupOrElement,
-    });
-  } else {
+
+  if (WORKER_OFFSCREEN_CANVAS) {
+    if (
+      !(mapOrGroupOrElement instanceof Map) &&
+      !(mapOrGroupOrElement instanceof LayerGroup)
+    ) {
+      throw new Error(
+        'ol-mapbox-style in a web worker requires a Map or a LayerGroup as first argument',
+      );
+    }
     mapOrGroup = mapOrGroupOrElement;
+  } else {
+    if (
+      typeof mapOrGroupOrElement === 'string' ||
+      mapOrGroupOrElement instanceof HTMLElement
+    ) {
+      mapOrGroup = new Map({
+        target: mapOrGroupOrElement,
+      });
+    } else {
+      mapOrGroup = mapOrGroupOrElement;
+    }
   }
 
   if (typeof style === 'string') {

src/apply.js

@@ -1,4 +1,5 @@
 import mb2css from 'mapbox-to-css-font';
+import {WORKER_OFFSCREEN_CANVAS} from 'ol/has.js';
 import {checkedFonts} from 'ol/render/canvas.js';
 import {createCanvas} from './util.js';
 
@@ -149,6 +150,10 @@ export function getFonts(
   fonts,
   templateUrl = 'https://cdn.jsdelivr.net/npm/@fontsource/{font-family}/{fontweight}{-fontstyle}.css',
 ) {
+  if (WORKER_OFFSCREEN_CANVAS) {
+    //FIXME Font handling in web workers
+    return fonts;
+  }
   let fontDescriptions;
   for (let i = 0, ii = fonts.length; i < ii; ++i) {
     const font = fonts[i];