Rename example

2020-03-23 12:58:41 +01:00
parent 0e1af6836f
commit 5113d70701
4 changed files with 2 additions and 2 deletions
@@ -0,0 +1,147 @@
+import VectorTileLayer from '../src/ol/layer/VectorTile.js';
+import VectorTileSource from '../src/ol/source/VectorTile.js';
+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 {renderDeclutterItems} from '../src/ol/render.js';
+import styleFunction from 'ol-mapbox-style/dist/stylefunction.js';
+import {inView} from '../src/ol/layer/Layer.js';
+import stringify from 'json-stringify-safe';
+
+/** @type {any} */
+const worker = self;
+
+let frameState, pixelRatio, rendererTransform;
+const canvas = new OffscreenCanvas(1, 1);
+
+const sources = {
+  landcover: new VectorTileSource({
+    maxZoom: 9,
+    format: new MVT(),
+    url: 'https://api.maptiler.com/tiles/landcover/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
+  }),
+  contours: new VectorTileSource({
+    minZoom: 9,
+    maxZoom: 14,
+    format: new MVT(),
+    url: 'https://api.maptiler.com/tiles/contours/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
+  }),
+  openmaptiles: new VectorTileSource({
+    format: new MVT(),
+    maxZoom: 14,
+    url: 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
+  })
+};
+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/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB';
+
+  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];
+          target.style = {};
+          this.canvas = target;
+          this.context = target.getContext('2d');
+          this.container = {
+            firstElementChild: target
+          };
+          rendererTransform = transform;
+        };
+        styleFunction(layer, styleJson, bucket.layers, undefined, spriteJson, spriteImageUrl, getFont);
+        layers.push(layer);
+      });
+      worker.postMessage({action: 'request-render'});
+    });
+  });
+}
+
+// Minimal map-like functionality for rendering
+
+const tileQueue = new TileQueue(
+  (tile, tileSourceKey, tileCenter, tileResolution) => tilePriorityFunction(frameState, tile, tileSourceKey, tileCenter, tileResolution),
+  () => worker.postMessage({action: 'request-render'}));
+
+const maxTotalLoading = 8;
+const maxNewLoads = 2;
+let rendering = false;
+
+worker.addEventListener('message', event => {
+  if (event.data.action !== 'render') {
+    return;
+  }
+  frameState = event.data.frameState;
+  if (!pixelRatio) {
+    pixelRatio = frameState.pixelRatio;
+    loadStyles();
+  }
+  frameState.tileQueue = tileQueue;
+  frameState.viewState.projection.__proto__ = Projection.prototype;
+  if (rendering) {
+    return;
+  }
+  rendering = true;
+  requestAnimationFrame(() => {
+    let rendered = false;
+    layers.forEach(layer => {
+      if (inView(layer.getLayerState(), frameState.viewState)) {
+        rendered = true;
+        const renderer = layer.getRenderer();
+        renderer.renderFrame(frameState, canvas);
+      }
+    });
+    rendering = false;
+    if (!rendered) {
+      return;
+    }
+    renderDeclutterItems(frameState, null);
+    if (tileQueue.getTilesLoading() < maxTotalLoading) {
+      tileQueue.reprioritize();
+      tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads);
+    }
+    const imageData = canvas.transferToImageBitmap();
+    worker.postMessage({
+      action: 'rendered',
+      imageData: imageData,
+      transform: rendererTransform,
+      frameState: JSON.parse(stringify(frameState))
+    }, [imageData]);
+  });
+});