diff --git a/examples/mvtlayer.worker.js b/examples/mvtlayer.worker.js index bc2ab5a20b..cf535c89ba 100644 --- a/examples/mvtlayer.worker.js +++ b/examples/mvtlayer.worker.js @@ -4,6 +4,7 @@ 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'; const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; @@ -45,7 +46,7 @@ const tileQueue = new TileQueue(getTilePriority, function() { const maxTotalLoading = 8; const maxNewLoads = 2; - +let rendererTransform, rendererOpacity; renderer.useContainer = function(target, transform, opacity) { target.style = {}; this.canvas = target; @@ -53,21 +54,16 @@ renderer.useContainer = function(target, transform, opacity) { this.container = { firstElementChild: target }; - layer.once('postrender', function() { - const imageData = canvas.transferToImageBitmap(); - worker.postMessage({ - type: 'rendered', - imageData: imageData, - transform: transform, - opacity: opacity, - frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer())) - }, [imageData]); - }); + rendererTransform = transform; + rendererOpacity = opacity; }; let rendering = false; -worker.onmessage = function(event) { +worker.addEventListener('message', function(event) { + if (event.data.type !== 'render') { + return; + } if (rendering) { // drop this frame worker.postMessage({type: 'request-render'}); @@ -79,12 +75,21 @@ worker.onmessage = function(event) { rendering = true; requestAnimationFrame(function() { renderer.renderFrame(frameState, canvas); + renderDeclutterItems(frameState, null); if (tileQueue.getTilesLoading() < maxTotalLoading) { tileQueue.reprioritize(); // FIXME only call if view has changed tileQueue.loadMoreTiles(maxTotalLoading, maxNewLoads); } + const imageData = canvas.transferToImageBitmap(); + worker.postMessage({ + type: 'rendered', + imageData: imageData, + transform: rendererTransform, + opacity: rendererOpacity, + frameState: JSON.parse(JSON.stringify(frameState, getCircularReplacer())) + }, [imageData]); rendering = false; }); -}; +}); export let create;