Add style handling

examples/mvtlayer.worker.js

@@ -4,6 +4,8 @@ import MVT from '../src/ol/format/MVT.js';
 import {Projection} from '../src/ol/proj.js';
 import TileQueue from '../src/ol/TileQueue.js';
 import {getTilePriority as tilePriorityFunction} from '../src/ol/TileQueue.js';
+import {Style, Fill, Stroke, Icon, Text} from '../src/ol/style.js';
+import createMapboxStreetsV6Style from './resources/mapbox-streets-v6-style.js';
 import {renderDeclutterItems} from '../src/ol/render.js';
 
 const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
@@ -33,6 +35,7 @@ function getTilePriority(tile, tileSourceKey, tileCenter, tileResolution) {
 
 const layer = new VectorTileLayer({
   declutter: true,
+  style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
   source: new VectorTileSource({
     format: new MVT(),
     url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +

examples/offscreen-canvas-tiles.css

@@ -0,0 +1,3 @@
+.map {
+  background: #f8f4f0;
+}

examples/offscreen-canvas-tiles.js

@@ -5,9 +5,39 @@ import Layer from '../src/ol/layer/Layer.js';
 import Worker from 'worker-loader!./mvtlayer.worker.js';
 import {compose, create} from '../src/ol/transform.js';
 import {createTransformString} from '../src/ol/render/canvas.js';
+import {getFontParameters} from '../src/ol/css.js';
 
 const mvtLayerWorker = new Worker();
 
+const loadingImages = {};
+mvtLayerWorker.addEventListener('message', event => {
+  if (event.data.type === 'getFontParameters') {
+    getFontParameters(event.data.font, font => {
+      mvtLayerWorker.postMessage({
+        type: 'getFontParameters',
+        font: font
+      });
+    });
+  } else if (event.data.type === 'loadImage') {
+    if (!(event.data.src in loadingImages)) {
+      const image = new Image();
+      image.crossOrigin = 'anonymous';
+      image.addEventListener('load', function() {
+        createImageBitmap(image, 0, 0, image.width, image.height).then(imageBitmap => {
+          delete loadingImages[event.data.iconName];
+          mvtLayerWorker.postMessage({
+            type: 'imageLoaded',
+            image: imageBitmap,
+            iconName: event.data.iconName
+          }, [imageBitmap]);
+        });
+      });
+      image.src = 'https://unpkg.com/@mapbox/maki@4.0.0/icons/' + event.data.iconName + '-15.svg';
+      loadingImages[event.data.iconName] = true;
+    }
+  }
+});
+
 function getCircularReplacer() {
   const seen = new WeakSet();
   return function(key, value) {
@@ -67,6 +97,7 @@ const map = new Map({
         mainThreadFrameState = frameState;
         updateContainerTransform();
         mvtLayerWorker.postMessage({
+          type: 'render',
           frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer()))
         });
         return container;

examples/resources/mapbox-streets-v6-style.js

@@ -2,6 +2,20 @@
 // http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json
 
 function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
+
+  let worker;
+  try {
+    worker = self.document ? null : self;
+    worker.addEventListener('message', message => {
+      if (message.data.type === 'imageLoaded') {
+        iconCache[message.data.iconName].setImage(new Icon({
+          img: message.data.image,
+          imgSize: [15, 15]
+        }));
+      }
+    });
+  } catch (e) {}
+  
   var fill = new Fill({color: ''});
   var stroke = new Stroke({color: '', width: 1});
   var polygon = new Style({fill: fill});
@@ -14,11 +28,19 @@ function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
   function getIcon(iconName) {
     var icon = iconCache[iconName];
     if (!icon) {
-      icon = new Style({image: new Icon({
-        src: 'https://unpkg.com/@mapbox/maki@4.0.0/icons/' + iconName + '-15.svg',
-        imgSize: [15, 15],
-        crossOrigin: 'anonymous'
-      })});
+      if (!worker) {
+        icon = new Style({image: new Icon({
+          src: 'https://unpkg.com/@mapbox/maki@4.0.0/icons/' + iconName + '-15.svg',
+          imgSize: [15, 15],
+          crossOrigin: 'anonymous'
+        })});
+      } else {
+        icon = new Style({});
+        worker.postMessage({
+          type: 'loadImage',
+          iconName: iconName
+        });
+      }
       iconCache[iconName] = icon;
     }
     return icon;
@@ -310,3 +332,7 @@ function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
     return styles;
   };
 }
+
+try {
+  module.exports = createMapboxStreetsV6Style;
+} catch (e) {}