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

Composite renderer

Browse Source
This commit is contained in:
Tim Schaub
2018-11-10 17:39:00 -06:00
parent fc6882f146
commit 43ed2c1764
5 changed files with 400 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
src/ol/renderer/Composite.js Normal file
View File

@@ -0,0 +1,151 @@
/**
* @module ol/renderer/canvas/Map
*/
import {apply as applyTransform} from '../transform.js';
import {stableSort} from '../array.js';
import {CLASS_UNSELECTABLE} from '../css.js';
import {visibleAtResolution} from '../layer/Layer.js';
import RenderEvent from '../render/Event.js';
import RenderEventType from '../render/EventType.js';
import MapRenderer, {sortByZIndex} from './Map.js';
import SourceState from '../source/State.js';
import {replaceChildren} from '../dom.js';
/**
* @classdesc
* Canvas map renderer.
* @api
*/
class CompositeMapRenderer extends MapRenderer {
/**
* @param {import("../PluggableMap.js").default} map Map.
*/
constructor(map) {
super(map);
/**
* @private
* @type {HTMLDivElement}
*/
this.element_ = document.createElement('div');
this.element_.style.width = '100%';
this.element_.style.height = '100%';
this.element_.className = CLASS_UNSELECTABLE;
const container = map.getViewport();
container.insertBefore(this.element_, container.firstChild || null);
/**
* @private
* @type {Array<HTMLElement>}
*/
this.children_ = [];
/**
* @private
* @type {boolean}
*/
this.renderedVisible_ = true;
}
/**
* @param {import("../render/EventType.js").default} type Event type.
* @param {import("../PluggableMap.js").FrameState} frameState Frame state.
*/
dispatchRenderEvent(type, frameState) {
const map = this.getMap();
if (map.hasListener(type)) {
const event = new RenderEvent(type, undefined, frameState);
map.dispatchEvent(event);
}
}
/**
* @inheritDoc
*/
renderFrame(frameState) {
if (!frameState) {
if (this.renderedVisible_) {
this.element_.style.display = 'none';
this.renderedVisible_ = false;
}
return;
}
this.calculateMatrices2D(frameState);
this.dispatchRenderEvent(RenderEventType.PRECOMPOSE, frameState);
const layerStatesArray = frameState.layerStatesArray;
stableSort(layerStatesArray, sortByZIndex);
const rotation = frameState.viewState.rotation;
if (rotation) {
// TODO: apply rotation
}
const viewResolution = frameState.viewState.resolution;
this.children_.length = 0;
for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
const layerState = layerStatesArray[i];
if (!visibleAtResolution(layerState, viewResolution) || layerState.sourceState != SourceState.READY) {
continue;
}
const layer = layerState.layer;
const layerRenderer = this.getLayerRenderer(layer);
if (layerRenderer.prepareFrame(frameState, layerState)) {
const element = layerRenderer.renderFrame(frameState, layerState);
// TODO: deal with opacity
this.children_.push(element);
}
}
replaceChildren(this.element_, this.children_);
this.dispatchRenderEvent(RenderEventType.POSTCOMPOSE, frameState);
if (!this.renderedVisible_) {
this.element_.style.display = '';
this.renderedVisible_ = true;
}
this.scheduleRemoveUnusedLayerRenderers(frameState);
this.scheduleExpireIconCache(frameState);
}
/**
* @inheritDoc
*/
forEachLayerAtPixel(pixel, frameState, hitTolerance, callback, thisArg, layerFilter, thisArg2) {
let result;
const viewState = frameState.viewState;
const viewResolution = viewState.resolution;
const layerStates = frameState.layerStatesArray;
const numLayers = layerStates.length;
const coordinate = applyTransform(
frameState.pixelToCoordinateTransform, pixel.slice());
for (let i = numLayers - 1; i >= 0; --i) {
const layerState = layerStates[i];
const layer = layerState.layer;
if (visibleAtResolution(layerState, viewResolution) && layerFilter.call(thisArg2, layer)) {
const layerRenderer = this.getLayerRenderer(layer);
result = layerRenderer.forEachLayerAtCoordinate(coordinate, frameState, hitTolerance, callback, thisArg);
if (result) {
return result;
}
}
}
return undefined;
}
}
export default CompositeMapRenderer;

39
src/ol/renderer/Layer.js
View File

@@ -1,7 +1,7 @@
/**
* @module ol/renderer/Layer
*/
import {getUid} from '../util.js';
import {getUid, abstract} from '../util.js';
import ImageState from '../ImageState.js';
import Observable from '../Observable.js';
import TileState from '../TileState.js';
@@ -26,6 +26,28 @@ class LayerRenderer extends Observable {
}
/**
* Determine whether render should be called.
* @abstract
* @param {import("../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../layer/Layer.js").State} layerState Layer state.
* @return {boolean} Layer is ready to be rendered.
*/
prepareFrame(frameState, layerState) {
return abstract();
}
/**
* Render the layer.
* @abstract
* @param {import("../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../layer/Layer.js").State} layerState Layer state.
* @return {HTMLElement} The rendered element.
*/
renderFrame(frameState, layerState) {
return abstract();
}
/**
* Create a function that adds loaded tiles to the tile lookup.
* @param {import("../source/Tile.js").default} source Tile source.
@@ -68,6 +90,21 @@ class LayerRenderer extends Observable {
*/
forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {}
/**
* @abstract
* @param {import("../coordinate.js").Coordinate} coordinate Coordinate.
* @param {import("../PluggableMap.js").FrameState} frameState FrameState.
* @param {number} hitTolerance Hit tolerance in pixels.
* @param {function(this: S, import("../layer/Layer.js").default, (Uint8ClampedArray|Uint8Array)): T} callback Layer
* callback.
* @param {S} thisArg Value to use as `this` when executing `callback`.
* @return {T|undefined} Callback result.
* @template S,T
*/
forEachLayerAtCoordinate(coordinate, frameState, hitTolerance, callback, thisArg) {
return abstract();
}
/**
* @return {import("../layer/Layer.js").default} Layer.
*/

28
src/ol/renderer/canvas/Layer.js
View File

@@ -136,6 +136,25 @@ class CanvasLayerRenderer extends LayerRenderer {
this.dispatchComposeEvent_(RenderEventType.PRECOMPOSE, context, frameState, opt_transform);
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../transform.js").Transform=} opt_transform Transform.
* @protected
*/
preRender(frameState, opt_transform) {
// TODO: pre-render event
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
* @param {import("../../transform.js").Transform=} opt_transform Transform.
* @protected
*/
postRender(frameState, layerState, opt_transform) {
// TODO: pre-render event
}
/**
* @param {CanvasRenderingContext2D} context Context.
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
@@ -175,15 +194,6 @@ class CanvasLayerRenderer extends LayerRenderer {
abstract();
}
/**
* @abstract
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
* @return {boolean} whether composeFrame should be called.
*/
prepareFrame(frameState, layerState) {
return abstract();
}
}
export default CanvasLayerRenderer;

109
src/ol/renderer/canvas/VectorLayer.js
View File

@@ -82,7 +82,6 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
this.context = createCanvasContext2D();
listen(labelCache, EventType.CLEAR, this.handleFontsChanged_, this);
}
/**
@@ -225,6 +224,114 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
this.postCompose(context, frameState, layerState, transform);
}
/**
* @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
* @param {import("../../layer/Layer.js").State} layerState Layer state.
*/
render(frameState, layerState) {
const replayGroup = this.replayGroup_;
if (!replayGroup || replayGroup.isEmpty()) {
return;
}
const context = this.context;
const canvas = context.canvas;
const extent = frameState.extent;
const pixelRatio = frameState.pixelRatio;
const viewState = frameState.viewState;
const projection = viewState.projection;
const rotation = viewState.rotation;
const projectionExtent = projection.getExtent();
const vectorSource = /** @type {import("../../source/Vector.js").default} */ (this.getLayer().getSource());
// clipped rendering if layer extent is set
const clipExtent = layerState.extent;
const clipped = clipExtent !== undefined;
if (clipped) {
this.clip(context, frameState, /** @type {import("../../extent.js").Extent} */ (clipExtent));
}
if (this.declutterTree_) {
this.declutterTree_.clear();
}
// resize and clear
let width = Math.round(frameState.size[0] * pixelRatio);
let height = Math.round(frameState.size[1] * pixelRatio);
if (rotation) {
const size = Math.round(Math.sqrt(width * width + height * height));
width = height = size;
}
if (canvas.width != width || canvas.height != height) {
canvas.width = width;
canvas.height = height;
canvas.style.width = (width / pixelRatio) + 'px';
canvas.style.height = (height / pixelRatio) + 'px';
} else {
context.clearRect(0, 0, width, height);
}
const viewHints = frameState.viewHints;
const snapToPixel = !(viewHints[ViewHint.ANIMATING] || viewHints[ViewHint.INTERACTING]);
// TODO: deal with rotation (this should not be necessary)
if (rotation) {
rotateAtOffset(context, -rotation, width / 2, height / 2);
}
let transform = this.getTransform(frameState, 0);
const skippedFeatureUids = layerState.managed ? frameState.skippedFeatureUids : {};
replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
if (vectorSource.getWrapX() && projection.canWrapX() && !containsExtent(projectionExtent, extent)) {
let startX = extent[0];
const worldWidth = getWidth(projectionExtent);
let world = 0;
let offsetX;
while (startX < projectionExtent[0]) {
--world;
offsetX = worldWidth * world;
transform = this.getTransform(frameState, offsetX);
replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
startX += worldWidth;
}
world = 0;
startX = extent[2];
while (startX > projectionExtent[2]) {
++world;
offsetX = worldWidth * world;
transform = this.getTransform(frameState, offsetX);
replayGroup.replay(context, transform, rotation, skippedFeatureUids, snapToPixel);
startX -= worldWidth;
}
}
// TODO: deal with rotation (this should not be necessary)
if (rotation) {
rotateAtOffset(context, rotation, width / 2, height / 2);
}
if (this.getLayer().hasListener(RenderEventType.RENDER)) {
this.dispatchRenderEvent(context, frameState, transform);
}
if (clipped) {
context.restore();
}
}
/**
* @inheritDoc
*/
renderFrame(frameState, layerState) {
const transform = this.getTransform(frameState, 0);
this.preRender(frameState, transform);
this.render(frameState, layerState);
this.postRender(frameState, layerState, transform);
return this.context.canvas;
}
/**
* @inheritDoc
*/