ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #13212 from ahocevar/multisource-webgl

Browse Source 
Support multiple sources for WebGL tile layers
This commit is contained in:
Andreas Hocevar
2022-01-19 08:43:22 +01:00
committed by GitHub
parent d46940acc0 75f66757ef
commit 30d27a1d59
20 changed files with 345 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/ol/layer/Base.js
View File

@@ -163,7 +163,6 @@ class BaseLayer extends BaseObject {
});
const zIndex = this.getZIndex();
state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
state.sourceState = this.getSourceState();
state.visible = this.getVisible();
state.extent = this.getExtent();
state.zIndex = zIndex === undefined && !state.managed ? Infinity : zIndex;

9
src/ol/layer/Layer.js
View File

@@ -57,7 +57,7 @@ import {listen, unlistenByKey} from '../events.js';
* @typedef {Object} State
* @property {import("./Layer.js").default} layer Layer.
* @property {number} opacity Opacity, the value is rounded to two digits to appear after the decimal point.
* @property {import("../source/State.js").default} sourceState SourceState.
* @property {import("../source/Source.js").default|undefined} source Source being rendered (only for multi-source layers).
* @property {boolean} visible Visible.
* @property {boolean} managed Managed.
* @property {import("../extent.js").Extent} [extent] Extent.
@@ -196,6 +196,13 @@ class Layer extends BaseLayer {
return /** @type {SourceType} */ (this.get(LayerProperty.SOURCE)) || null;
}
/**
* @return {SourceType} The source being rendered.
*/
getRenderSource() {
return this.getSource();
}
/**
* @return {import("../source/State.js").default} Source state.
*/

113
src/ol/layer/WebGLTile.js
View File

@@ -3,6 +3,7 @@
*/
import BaseTileLayer from './BaseTile.js';
import LayerProperty from '../layer/Property.js';
import SourceState from '../source/State.js';
import WebGLTileLayerRenderer, {
Attributes,
Uniforms,
@@ -64,6 +65,11 @@ import {assign} from '../obj.js';
* @property {number} [preload=0] Preload. Load low-resolution tiles up to `preload` levels. `0`
* means no preloading.
* @property {SourceType} [source] Source for this layer.
* @property {Array<SourceType>|function(import("../extent.js").Extent, number):Array<SourceType>} [sources] Array
* of sources for this layer. Takes precedence over `source`. Can either be an array of sources, or a function that
* expects an extent and a resolution (in view projection units per pixel) and returns an array of sources. See
* {@link module:ol/source.sourcesFromTileGrid} for a helper function to generate sources that are organized in a
* pyramid following the same pattern as a tile grid.
* @property {import("../PluggableMap.js").default} [map] Sets the layer as overlay on a map. The map will not manage
* this layer in its layers collection, and the layer will be rendered on top. This is useful for
* temporary layers. The standard way to add a layer to a map and have it managed by the map is to
@@ -291,6 +297,18 @@ class WebGLTileLayer extends BaseTileLayer {
super(options);
/**
* @type {Array<SourceType>|function(import("../extent.js").Extent, number):Array<SourceType>}
* @private
*/
this.sources_ = options.sources;
/**
* @type {number}
* @private
*/
this.renderedResolution_ = NaN;
/**
* @type {Style}
* @private
@@ -312,6 +330,41 @@ class WebGLTileLayer extends BaseTileLayer {
this.addChangeListener(LayerProperty.SOURCE, this.handleSourceUpdate_);
}
/**
* Gets the sources for this layer, for a given extent and resolution.
* @param {import("../extent.js").Extent} extent Extent.
* @param {number} resolution Resolution.
* @return {Array<SourceType>} Sources.
*/
getSources(extent, resolution) {
const source = this.getSource();
return this.sources_
? typeof this.sources_ === 'function'
? this.sources_(extent, resolution)
: this.sources_
: source
? [source]
: [];
}
/**
* @return {SourceType} The source being rendered.
*/
getRenderSource() {
return (
/** @type {SourceType} */ (this.getLayerState().source) ||
this.getSource()
);
}
/**
* @return {import("../source/State.js").default} Source state.
*/
getSourceState() {
const source = this.getRenderSource();
return source ? source.getState() : SourceState.UNDEFINED;
}
/**
* @private
*/
@@ -340,6 +393,66 @@ class WebGLTileLayer extends BaseTileLayer {
});
}
/**
* @param {import("../PluggableMap").FrameState} frameState Frame state.
* @param {Array<SourceType>} sources Sources.
* @return {HTMLElement} Canvas.
*/
renderSources(frameState, sources) {
const layerRenderer = this.getRenderer();
let canvas;
for (let i = 0, ii = sources.length; i < ii; ++i) {
this.getLayerState().source = sources[i];
if (layerRenderer.prepareFrame(frameState)) {
canvas = layerRenderer.renderFrame(frameState);
}
}
return canvas;
}
/**
* @param {?import("../PluggableMap.js").FrameState} frameState Frame state.
* @param {HTMLElement} target Target which the renderer may (but need not) use
* for rendering its content.
* @return {HTMLElement} The rendered element.
*/
render(frameState, target) {
const viewState = frameState.viewState;
const sources = this.getSources(frameState.extent, viewState.resolution);
let ready = true;
for (let i = 0, ii = sources.length; i < ii; ++i) {
const source = sources[i];
const sourceState = source.getState();
if (sourceState == SourceState.LOADING) {
const onChange = () => {
if (source.getState() == SourceState.READY) {
source.removeEventListener('change', onChange);
this.changed();
}
};
source.addEventListener('change', onChange);
}
ready = ready && sourceState == SourceState.READY;
}
const canvas = this.renderSources(frameState, sources);
if (this.getRenderer().renderComplete && ready) {
// Fully rendered, done.
this.renderedResolution_ = viewState.resolution;
return canvas;
}
// Render sources from previously fully rendered frames
if (this.renderedResolution_ > 0.5 * viewState.resolution) {
const altSources = this.getSources(
frameState.extent,
this.renderedResolution_
).filter((source) => !sources.includes(source));
if (altSources.length > 0) {
return this.renderSources(frameState, altSources);
}
}
return canvas;
}
/**
* Update the layer style. The `updateStyleVariables` function is a more efficient
* way to update layer rendering. In cases where the whole style needs to be updated,

8
src/ol/renderer/Composite.js
View File

@@ -110,15 +110,17 @@ class CompositeMapRenderer extends MapRenderer {
for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
const layerState = layerStatesArray[i];
frameState.layerIndex = i;
const layer = layerState.layer;
const sourceState = layer.getSourceState();
if (
!inView(layerState, viewState) ||
(layerState.sourceState != SourceState.READY &&
layerState.sourceState != SourceState.UNDEFINED)
(sourceState != SourceState.READY &&
sourceState != SourceState.UNDEFINED)
) {
continue;
}
const layer = layerState.layer;
const element = layer.render(frameState, previousElement);
if (!element) {
continue;

2
src/ol/renderer/webgl/Layer.js
View File

@@ -161,7 +161,7 @@ class WebGLLayerRenderer extends LayerRenderer {
* @return {boolean} Layer is ready to be rendered.
*/
prepareFrame(frameState) {
if (this.getLayer().getSource()) {
if (this.getLayer().getRenderSource()) {
let incrementGroup = true;
let groupNumber = -1;
let className;

32
src/ol/renderer/webgl/TileLayer.js
View File

@@ -20,7 +20,6 @@ import {
} from '../../vec/mat4.js';
import {
createOrUpdate as createTileCoord,
getKeyZXY,
getKey as getTileCoordKey,
} from '../../tilecoord.js';
import {fromUserExtent} from '../../proj.js';
@@ -98,7 +97,7 @@ function getRenderExtent(frameState, extent) {
);
}
const source =
/** {import("../../source/Tile.js").default} */ layerState.layer.getSource();
/** {import("../../source/Tile.js").default} */ layerState.layer.getRenderSource();
if (!source.getWrapX()) {
const gridExtent = source
.getTileGridForProjection(frameState.viewState.projection)
@@ -110,6 +109,10 @@ function getRenderExtent(frameState, extent) {
return extent;
}
function getCacheKey(source, tileCoord) {
return `${source.getKey()},${getTileCoordKey(tileCoord)}`;
}
/**
* @typedef {Object} Options
* @property {string} vertexShader Vertex shader source.
@@ -140,6 +143,12 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
uniforms: options.uniforms,
});
/**
* The last call to `renderFrame` was completed with all tiles loaded
* @type {boolean}
*/
this.renderComplete = false;
/**
* This transform converts tile i, j coordinates to screen coordinates.
* @type {import("../../transform.js").Transform}
@@ -273,7 +282,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
*/
prepareFrameInternal(frameState) {
const layer = this.getLayer();
const source = layer.getSource();
const source = layer.getRenderSource();
if (!source) {
return false;
}
@@ -293,7 +302,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
enqueueTiles(frameState, extent, z, tileTexturesByZ) {
const viewState = frameState.viewState;
const tileLayer = this.getLayer();
const tileSource = tileLayer.getSource();
const tileSource = tileLayer.getRenderSource();
const tileGrid = tileSource.getTileGridForProjection(viewState.projection);
const tileTextureCache = this.tileTextureCache_;
const tileRange = tileGrid.getTileRangeForExtentAndZ(
@@ -314,7 +323,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
for (let x = tileRange.minX; x <= tileRange.maxX; ++x) {
for (let y = tileRange.minY; y <= tileRange.maxY; ++y) {
const tileCoord = createTileCoord(z, x, y, this.tempTileCoord_);
const tileCoordKey = getTileCoordKey(tileCoord);
const cacheKey = getCacheKey(tileSource, tileCoord);
/**
* @type {TileTexture}
@@ -326,8 +335,8 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
*/
let tile;
if (tileTextureCache.containsKey(tileCoordKey)) {
tileTexture = tileTextureCache.get(tileCoordKey);
if (tileTextureCache.containsKey(cacheKey)) {
tileTexture = tileTextureCache.get(cacheKey);
tile = tileTexture.tile;
}
if (!tileTexture || tileTexture.tile.key !== tileSource.getKey()) {
@@ -340,7 +349,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
);
if (!tileTexture) {
tileTexture = new TileTexture(tile, tileGrid, this.helper);
tileTextureCache.set(tileCoordKey, tileTexture);
tileTextureCache.set(cacheKey, tileTexture);
} else {
if (this.isDrawableTile_(tile)) {
tileTexture.setTile(tile);
@@ -379,12 +388,13 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
* @return {HTMLElement} The rendered element.
*/
renderFrame(frameState) {
this.renderComplete = true;
const gl = this.helper.getGL();
this.preRender(gl, frameState);
const viewState = frameState.viewState;
const tileLayer = this.getLayer();
const tileSource = tileLayer.getSource();
const tileSource = tileLayer.getRenderSource();
const tileGrid = tileSource.getTileGridForProjection(viewState.projection);
const extent = getRenderExtent(frameState, frameState.extent);
const z = tileGrid.getZForResolution(
@@ -438,6 +448,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
const tileCoordKey = getTileCoordKey(tileCoord);
alphaLookup[tileCoordKey] = alpha;
}
this.renderComplete = false;
// first look for child tiles (at z + 1)
const coveredByChildren = this.findAltTiles_(
@@ -635,9 +646,10 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
let covered = true;
const tileTextureCache = this.tileTextureCache_;
const source = this.getLayer().getRenderSource();
for (let x = tileRange.minX; x <= tileRange.maxX; ++x) {
for (let y = tileRange.minY; y <= tileRange.maxY; ++y) {
const cacheKey = getKeyZXY(altZ, x, y);
const cacheKey = getCacheKey(source, [altZ, x, y]);
let loaded = false;
if (tileTextureCache.containsKey(cacheKey)) {
const tileTexture = tileTextureCache.get(cacheKey);

37
src/ol/source.js
View File

@@ -2,6 +2,9 @@
* @module ol/source
*/
import LRUCache from './structs/LRUCache.js';
import {getIntersection} from './extent.js';
export {default as BingMaps} from './source/BingMaps.js';
export {default as CartoDB} from './source/CartoDB.js';
export {default as Cluster} from './source/Cluster.js';
@@ -31,3 +34,37 @@ export {default as VectorTile} from './source/VectorTile.js';
export {default as WMTS} from './source/WMTS.js';
export {default as XYZ} from './source/XYZ.js';
export {default as Zoomify} from './source/Zoomify.js';
/**
* Creates a sources function from a tile grid. This function can be used as value for the
* `sources` property of the {@link module:ol/layer/Layer~Layer} subclasses that support it.
* @param {import("./tilegrid/TileGrid.js").default} tileGrid Tile grid.
* @param {function(import("./tilecoord.js").TileCoord): import("./source/Source.js").default} factory Source factory.
* This function takes a {@link module:ol/tilecoord~TileCoord} as argument and is expected to return a
* {@link module:ol/source/Source~Source}. **Note**: The returned sources should have a tile grid with
* a limited set of resolutions, matching the resolution range of a single zoom level of the pyramid
* `tileGrid` that `createFromTileGrid` was called with.
* @return {function(import("./extent.js").Extent, number): Array<import("./source/Source.js").default>} Sources function.
* @api
*/
export function sourcesFromTileGrid(tileGrid, factory) {
const sourceCache = new LRUCache(32);
const tileGridExtent = tileGrid.getExtent();
return function (extent, resolution) {
sourceCache.expireCache();
if (tileGridExtent) {
extent = getIntersection(tileGridExtent, extent);
}
const z = tileGrid.getZForResolution(resolution);
const wantedSources = [];
tileGrid.forEachTileCoord(extent, z, (tileCoord) => {
const key = tileCoord.toString();
if (!sourceCache.containsKey(key)) {
const source = factory(tileCoord);
sourceCache.set(key, source);
}
wantedSources.push(sourceCache.get(key));
});
return wantedSources;
};
}

10
src/ol/structs/LRUCache.js
View File

@@ -66,6 +66,16 @@ class LRUCache {
return this.highWaterMark > 0 && this.getCount() > this.highWaterMark;
}
/**
* Expire the cache.
* @param {!Object<string, boolean>} [keep] Keys to keep. To be implemented by subclasses.
*/
expireCache(keep) {
while (this.canExpireCache()) {
this.pop();
}
}
/**
* FIXME empty description for jsdoc
*/