diff --git a/examples/sea-level.js b/examples/sea-level.js index 81b4b1edfe..00e9e09de9 100644 --- a/examples/sea-level.js +++ b/examples/sea-level.js @@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; import {fromLonLat} from '../src/ol/proj.js'; -import RasterSource from '../src/ol/source/Raster.js'; +import {Raster as RasterSource, TileJSON} from '../src/ol/source.js'; import XYZ from '../src/ol/source/XYZ.js'; function flood(pixels, data) { @@ -37,8 +37,9 @@ const map = new Map({ target: 'map', layers: [ new TileLayer({ - source: new XYZ({ - url: 'https://api.mapbox.com/styles/v1/tschaub/ciutc102t00c62js5fqd47kqw/tiles/256/{z}/{x}/{y}?access_token=' + key + source: new TileJSON({ + url: 'https://api.tiles.mapbox.com/v3/mapbox.world-light.json?secure', + crossOrigin: 'anonymous' }) }), new ImageLayer({ diff --git a/src/ol/source/Raster.js b/src/ol/source/Raster.js index aa952010fb..3072182ae1 100644 --- a/src/ol/source/Raster.js +++ b/src/ol/source/Raster.js @@ -441,6 +441,15 @@ function getImageData(renderer, frameState, layerState) { } const width = frameState.size[0]; const height = frameState.size[1]; + const element = renderer.renderFrame(frameState, layerState); + if (!(element instanceof HTMLCanvasElement)) { + throw new Error('Unsupported rendered element: ' + element); + } + if (element.width === width && element.height === height) { + const context = element.getContext('2d'); + return context.getImageData(0, 0, width, height); + } + if (!sharedContext) { sharedContext = createCanvasContext2D(width, height); } else { @@ -451,7 +460,7 @@ function getImageData(renderer, frameState, layerState) { sharedContext.clearRect(0, 0, width, height); } } - renderer.composeFrame(frameState, layerState, sharedContext); + sharedContext.drawImage(element, 0, 0, width, height); return sharedContext.getImageData(0, 0, width, height); }