Edit

Vector tiles rendered in an offscreen canvas

worker1 offscreencanvas1 vector-tiles1 





        

          
        

      


      

        
Example of a map that delegates rendering to a worker.

        
The map in this example is rendered in a web worker, using OffscreenCanvas. Note: This is currently only supported in Chrome, Edge, Firefox > 105, Safari > 16.4.



      


      

        
main.js

        
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import FullScreen from 'ol/control/FullScreen.js';
import Layer from 'ol/layer/Layer.js';
import Source from 'ol/source/Source.js';
import {createXYZ} from 'ol/tilegrid.js';
import {compose, create, toString as toTransformString} from 'ol/transform.js';

const worker = new Worker('./worker.js', {type: 'module'});

let container,
  transformContainer,
  canvas,
  rendering,
  workerFrameState,
  mainThreadFrameState;

// Transform the container to account for the difference between the (newer)
// main thread frameState and the (older) worker frameState
function updateContainerTransform() {
  if (workerFrameState) {
    const viewState = mainThreadFrameState.viewState;
    const renderedViewState = workerFrameState.viewState;
    const center = viewState.center;
    const resolution = viewState.resolution;
    const rotation = viewState.rotation;
    const renderedCenter = renderedViewState.center;
    const renderedResolution = renderedViewState.resolution;
    const renderedRotation = renderedViewState.rotation;
    const transform = create();
    // Skip the extra transform for rotated views, because it will not work
    // correctly in that case
    if (!rotation) {
      compose(
        transform,
        (renderedCenter[0] - center[0]) / resolution,
        (center[1] - renderedCenter[1]) / resolution,
        renderedResolution / resolution,
        renderedResolution / resolution,
        rotation - renderedRotation,
        0,
        0,
      );
    }
    transformContainer.style.transform = toTransformString(transform);
  }
}

const map = new Map({
  layers: [
    new Layer({
      render: function (frameState) {
        if (!container) {
          container = document.createElement('div');
          container.style.position = 'absolute';
          container.style.width = '100%';
          container.style.height = '100%';
          transformContainer = document.createElement('div');
          transformContainer.style.position = 'absolute';
          transformContainer.style.width = '100%';
          transformContainer.style.height = '100%';
          container.appendChild(transformContainer);
          canvas = document.createElement('canvas');
          canvas.style.position = 'absolute';
          canvas.style.left = '0';
          canvas.style.transformOrigin = 'top left';
          transformContainer.appendChild(canvas);
        }
        mainThreadFrameState = frameState;
        updateContainerTransform();
        if (!rendering) {
          rendering = true;
          worker.postMessage({
            action: 'render',
            frameState: {
              layerIndex: 0,
              wantedTiles: {},
              usedTiles: {},
              viewHints: frameState.viewHints.slice(0),
              postRenderFunctions: [],
              viewState: {
                center: frameState.viewState.center.slice(0),
                resolution: frameState.viewState.resolution,
                rotation: frameState.viewState.rotation,
                zoom: frameState.viewState.zoom,
              },
              pixelRatio: frameState.pixelRatio,
              size: frameState.size.slice(0),
              extent: frameState.extent.slice(0),
              coordinateToPixelTransform:
                frameState.coordinateToPixelTransform.slice(0),
              pixelToCoordinateTransform:
                frameState.pixelToCoordinateTransform.slice(0),
              layerStatesArray: frameState.layerStatesArray.map((l) => ({
                zIndex: l.zIndex,
                visible: l.visible,
                extent: l.extent,
                maxResolution: l.maxResolution,
                minResolution: l.minResolution,
                managed: l.managed,
              })),
            },
          });
        } else {
          frameState.animate = true;
        }
        return container;
      },
      source: new Source({
        attributions: [
          '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>',
          '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
        ],
      }),
    }),
  ],
  target: 'map',
  view: new View({
    resolutions: createXYZ({tileSize: 512}).getResolutions(),
    center: [0, 0],
    zoom: 2,
  }),
});
map.addControl(new FullScreen());

let pointerOutside = true;
const mapTarget = map.getTargetElement();
mapTarget.addEventListener('pointerleave', () => {
  pointerOutside = true;
  showInfo([]);
});
map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  pointerOutside = false;
  worker.postMessage({
    action: 'requestFeatures',
    pixel: evt.pixel,
  });
});

// Worker messaging and actions
worker.addEventListener('message', (message) => {
  if (message.data.action === 'loadImage') {
    // Image loader for ol-mapbox-style
    const image = new Image();
    image.crossOrigin = 'anonymous';
    image.addEventListener('load', function () {
      createImageBitmap(image, 0, 0, image.width, image.height).then(
        (imageBitmap) => {
          worker.postMessage(
            {
              action: 'imageLoaded',
              image: imageBitmap,
              src: message.data.src,
            },
            [imageBitmap],
          );
        },
      );
    });
    image.src = message.data.src;
  } else if (message.data.action === 'getFeatures') {
    showInfo(message.data.features);
  } else if (message.data.action === 'requestRender') {
    // Worker requested a new render frame
    map.render();
  } else if (canvas && message.data.action === 'rendered') {
    // Worker provides a new render frame
    requestAnimationFrame(function () {
      const imageData = message.data.imageData;
      canvas.width = imageData.width;
      canvas.height = imageData.height;
      canvas.getContext('2d').drawImage(imageData, 0, 0);
      canvas.style.transform = message.data.transform;
      workerFrameState = message.data.frameState;
      updateContainerTransform();
    });
    rendering = false;
  }
});

const info = document.getElementById('info');
function showInfo(propertiesFromFeatures) {
  if (propertiesFromFeatures.length == 0 || pointerOutside) {
    info.innerText = '';
    info.style.opacity = '0';
    return;
  }
  const properties = propertiesFromFeatures.map((e) =>
    Object.keys(e)
      .filter((key) => !key.includes(':'))
      .reduce(
        (newObj, currKey) => ((newObj[currKey] = e[currKey]), newObj),
        {},
      ),
  );
  info.innerText = JSON.stringify(properties, null, 2);
  info.style.opacity = '1';
}


      


      

        
index.html

        
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vector tiles rendered in an offscreen canvas</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
      .map {
        background: rgba(232, 230, 223, 1);
        position: relative;
      }
      .map .ol-rotate {
        left: .5em;
        bottom: .5em;
        top: auto;
        right: auto;
      }

      .info {
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;
        background: rgba(0, 60, 136, 0.7);
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map">
      <pre id="info" class="info"></pre>
    </div>

    <script type="module" src="main.js"></script>
  </body>
</html>

      


      

        
worker.js

        
import TileQueue, {
  getTilePriority as tilePriorityFunction,
} from 'ol/TileQueue.js';
import MVT from 'ol/format/MVT.js';
import {inView} from 'ol/layer/Layer.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
import {get} from 'ol/proj.js';
import VectorTileSource from 'ol/source/VectorTile.js';
import {stylefunction} from 'ol-mapbox-style';

const key = 'Get your own API key at https://www.maptiler.com/cloud/';

const worker = self;

let frameState, pixelRatio, rendererTransform;
const canvas = new OffscreenCanvas(1, 1);
// OffscreenCanvas does not have a style, so we mock it
canvas.style = {};
const context = canvas.getContext('2d');

const sources = {
  landcover: new VectorTileSource({
    maxZoom: 9,
    format: new MVT(),
    url: 'https://api.maptiler.com/tiles/landcover/{z}/{x}/{y}.pbf?key=' + key,
  }),
  contours: new VectorTileSource({
    minZoom: 9,
    maxZoom: 14,
    format: new MVT(),
    url: 'https://api.maptiler.com/tiles/contours/{z}/{x}/{y}.pbf?key=' + key,
  }),
  maptiler_planet: new VectorTileSource({
    format: new MVT(),
    maxZoom: 14,
    url: 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=' + key,
  }),
};
const layers = [];

// Font replacement so we do not need to load web fonts in the worker
function getFont(font) {
  return font[0].replace('Noto Sans', 'serif').replace('Roboto', 'sans-serif');
}

function loadStyles() {
  const styleUrl =
    'https://api.maptiler.com/maps/streets-v2/style.json?key=' + key;

  fetch(styleUrl)
    .then((data) => data.json())
    .then((styleJson) => {
      const buckets = [];
      let currentSource;
      styleJson.layers.forEach((layer) => {
        if (!layer.source) {
          return;
        }
        if (currentSource !== layer.source) {
          currentSource = layer.source;
          buckets.push({
            source: layer.source,
            layers: [],
          });
        }
        buckets[buckets.length - 1].layers.push(layer.id);
      });

      const spriteUrl =
        styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.json';
      const spriteImageUrl =
        styleJson.sprite + (pixelRatio > 1 ? '@2x' : '') + '.png';
      fetch(spriteUrl)
        .then((data) => data.json())
        .then((spriteJson) => {
          buckets.forEach((bucket) => {
            const source = sources[bucket.source];
            if (!source) {
              return;
            }
            const layer = new VectorTileLayer({
              declutter: true,
              source,
              minZoom: source.getTileGrid().getMinZoom(),
            });
            layer.getRenderer().useContainer = function (target, transform) {
              this.containerReused = this.getLayer() !== layers[0];
              this.canvas = canvas;
              this.context = context;
              this.container = {
                firstElementChild: canvas,
                style: {
                  opacity: String(layer.getOpacity()),
                },
              };
              rendererTransform = transform;
            };
            stylefunction(
              layer,
              styleJson,
              bucket.layers,
              undefined,
              spriteJson,
              spriteImageUrl,
              getFont,
            );
            layers.push(layer);
          });
          worker.postMessage({action: 'requestRender'});
        });
    });
}

// Minimal map-like functionality for rendering
const tileQueue = new TileQueue(
  (tile, tileSourceKey, tileCenter, tileResolution) =>
    tilePriorityFunction(
      frameState,
      tile,
      tileSourceKey,
      tileCenter,
      tileResolution,
    ),
  () => worker.postMessage({action: 'requestRender'}),
);

const maxTotalLoading = 8;
const maxNewLoads = 2;

worker.addEventListener('message', (event) => {
  if (event.data.action === 'requestFeatures') {
    const layersInView = layers.filter((l) =>
      inView(l.getLayerState(), frameState.viewState),
    );
    const observables = layersInView.map((l) =>
      l.getFeatures(event.data.pixel),
    );
    Promise.all(observables).then((res) => {
      const features = res.flat();
      worker.postMessage({
        action: 'getFeatures',
        features: features.map((e) => e.getProperties()),
      });
    });
    return;
  }

  if (event.data.action !== 'render') {
    return;
  }
  frameState = event.data.frameState;
  if (!pixelRatio) {
    pixelRatio = frameState.pixelRatio;
    loadStyles();
  }
  frameState.tileQueue = tileQueue;
  frameState.viewState.projection = get('EPSG:3857');
  frameState.layerStatesArray = layers.map((l) => l.getLayerState());
  layers.forEach((layer) => {
    if (inView(layer.getLayerState(), frameState.viewState)) {
      const renderer = layer.getRenderer();
      if (!renderer.prepareFrame(frameState)) {
        return;
      }
      if (layer.getDeclutter() && !frameState.declutter) {
        frameState.declutter = {};
      }
      renderer.renderFrame(frameState, canvas);
    }
  });
  layers.forEach((layer) => {
    if (!layer.getRenderer().context) {
      return;
    }
    layer.renderDeclutter(frameState, layer.getLayerState());
    layer.renderDeferred(frameState);
  });
  frameState.postRenderFunctions.forEach((fn) => fn(null, frameState));
  if (tileQueue.getTilesLoading() < maxTotalLoading) {
    tileQueue.reprioritize();
    tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);
  }
  const imageData = canvas.transferToImageBitmap();
  worker.postMessage(
    {
      action: 'rendered',
      imageData: imageData,
      transform: rendererTransform,
      frameState: {
        viewState: {
          center: frameState.viewState.center.slice(0),
          resolution: frameState.viewState.resolution,
          rotation: frameState.viewState.rotation,
        },
        pixelRatio: frameState.pixelRatio,
        size: frameState.size.slice(0),
        extent: frameState.extent.slice(0),
        coordinateToPixelTransform:
          frameState.coordinateToPixelTransform.slice(0),
        pixelToCoordinateTransform:
          frameState.pixelToCoordinateTransform.slice(0),
      },
    },
    [imageData],
  );
});


      

      

        
package.json

        
{
  "name": "offscreen-canvas",
  "dependencies": {
    "ol": "10.5.0",
    "ol-mapbox-style": "^12.4.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}