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

Add an image vector layer for rendering vectors to an image

Browse Source
This commit is contained in:
Tim Schaub
2018-11-04 11:25:36 -07:00
parent ae1f3afd66
commit 2ec509fbca
19 changed files with 543 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/ol/layer.js
View File

@@ -9,4 +9,5 @@ export {default as Image} from './layer/Image.js';
export {default as Layer} from './layer/Layer.js';
export {default as Tile} from './layer/Tile.js';
export {default as Vector} from './layer/Vector.js';
export {default as VectorImage} from './layer/VectorImage.js';
export {default as VectorTile} from './layer/VectorTile.js';

32
src/ol/layer/BaseVector.js
View File

@@ -3,7 +3,6 @@
*/
import LayerType from '../LayerType.js';
import Layer from './Layer.js';
import VectorRenderType from './VectorRenderType.js';
import {assign} from '../obj.js';
import {createDefaultStyle, toFunction as toStyleFunction} from '../style/Style.js';
@@ -28,11 +27,6 @@ import {createDefaultStyle, toFunction as toStyleFunction} from '../style/Style.
* @property {number} [renderBuffer=100] The buffer in pixels around the viewport extent used by the
* renderer when getting features from the vector source for the rendering or hit-detection.
* Recommended value: the size of the largest symbol, line width or label.
* @property {import("./VectorRenderType.js").default|string} [renderMode='vector'] Render mode for vector layers:
* * `'image'`: Vector layers are rendered as images. Great performance, but point symbols and
* texts are always rotated with the view and pixels are scaled during zoom animations.
* * `'vector'`: Vector layers are rendered as vectors. Most accurate rendering even during
* animations, but slower performance.
* @property {import("../source/Vector.js").default} [source] Source.
* @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
@@ -43,14 +37,12 @@ import {createDefaultStyle, toFunction as toStyleFunction} from '../style/Style.
* means higher priority.
* @property {import("../style/Style.js").StyleLike} [style] Layer style. See
* {@link module:ol/style} for default style which will be used if this is not defined.
* @property {boolean} [updateWhileAnimating=false] When set to `true` and `renderMode`
* is `vector`, feature batches will be recreated during animations. This means that no
* vectors will be shown clipped, but the setting will have a performance impact for large
* amounts of vector data. When set to `false`, batches will be recreated when no animation
* is active.
* @property {boolean} [updateWhileInteracting=false] When set to `true` and `renderMode`
* is `vector`, feature batches will be recreated during interactions. See also
* `updateWhileAnimating`.
* @property {boolean} [updateWhileAnimating=false] When set to `true`, feature batches will
* be recreated during animations. This means that no vectors will be shown clipped, but the
* setting will have a performance impact for large amounts of vector data. When set to `false`,
* batches will be recreated when no animation is active.
* @property {boolean} [updateWhileInteracting=false] When set to `true`, feature batches will
* be recreated during interactions. See also `updateWhileAnimating`.
*/
@@ -131,12 +123,6 @@ class BaseVectorLayer extends Layer {
this.updateWhileInteracting_ = options.updateWhileInteracting !== undefined ?
options.updateWhileInteracting : false;
/**
* @private
* @type {import("./VectorTileRenderType.js").default|string}
*/
this.renderMode_ = options.renderMode || VectorRenderType.VECTOR;
/**
* The layer type.
* @protected
@@ -237,12 +223,6 @@ class BaseVectorLayer extends Layer {
this.changed();
}
/**
* @return {import("./VectorRenderType.js").default|string} The render mode.
*/
getRenderMode() {
return this.renderMode_;
}
}

5
src/ol/layer/Heatmap.js
View File

@@ -34,11 +34,6 @@ import Style from '../style/Style.js';
* @property {string|function(import("../Feature.js").default):number} [weight='weight'] The feature
* attribute to use for the weight or a function that returns a weight from a feature. Weight values
* should range from 0 to 1 (and values outside will be clamped to that range).
* @property {import("./VectorRenderType.js").default|string} [renderMode='vector'] Render mode for vector layers:
* * `'image'`: Vector layers are rendered as images. Great performance, but point symbols and
* texts are always rotated with the view and pixels are scaled during zoom animations.
* * `'vector'`: Vector layers are rendered as vectors. Most accurate rendering even during
* animations, but slower performance.
* @property {import("../source/Vector.js").default} [source] Source.
*/

40
src/ol/layer/VectorImage.js Normal file
View File

@@ -0,0 +1,40 @@
/**
* @module ol/layer/VectorImage
*/
import BaseVectorLayer from './BaseVector.js';
import CanvasVectorImageLayerRenderer from '../renderer/canvas/VectorImageLayer.js';
/**
* @typedef {import("./BaseVector.js").Options} Options
*/
/**
* @classdesc
* Vector data that is rendered client-side.
* Note that any property set in the options is set as a {@link module:ol/Object~BaseObject}
* property on the layer object; for example, setting `title: 'My Title'` in the
* options means that `title` is observable, and has get/set accessors.
*
* @api
*/
class VectorImageLayer extends BaseVectorLayer {
/**
* @param {Options=} opt_options Options.
*/
constructor(opt_options) {
super(opt_options);
}
/**
* Create a renderer for this layer.
* @return {import("../renderer/Layer.js").default} A layer renderer.
* @protected
*/
createRenderer() {
return new CanvasVectorImageLayerRenderer(this);
}
}
export default VectorImageLayer;

18
src/ol/layer/VectorRenderType.js
View File

@@ -1,18 +0,0 @@
/**
* @module ol/layer/VectorRenderType
*/
/**
* @enum {string}
* Render mode for vector layers:
* * `'image'`: Vector layers are rendered as images. Great performance, but
* point symbols and texts are always rotated with the view and pixels are
* scaled during zoom animations.
* * `'vector'`: Vector layers are rendered as vectors. Most accurate rendering
* even during animations, but slower performance.
* @api
*/
export default {
IMAGE: 'image',
VECTOR: 'vector'
};

25
src/ol/layer/VectorTile.js
View File

@@ -86,22 +86,28 @@ class VectorTileLayer extends BaseVectorLayer {
constructor(opt_options) {
const options = opt_options ? opt_options : {};
const baseOptions = /** @type {Object} */ (assign({}, options));
delete baseOptions.preload;
delete baseOptions.useInterimTilesOnError;
super(/** @type {import("./Vector.js").Options} */ (baseOptions));
let renderMode = options.renderMode || VectorTileRenderType.HYBRID;
assert(renderMode == undefined ||
renderMode == VectorTileRenderType.IMAGE ||
renderMode == VectorTileRenderType.HYBRID ||
renderMode == VectorTileRenderType.VECTOR,
28); // `renderMode` must be `'image'`, `'hybrid'` or `'vector'`
if (options.declutter && renderMode == VectorTileRenderType.IMAGE) {
renderMode = VectorTileRenderType.HYBRID;
}
options.renderMode = renderMode;
const baseOptions = /** @type {Object} */ (assign({}, options));
delete baseOptions.preload;
delete baseOptions.useInterimTilesOnError;
super(/** @type {import("./Vector.js").Options} */ (baseOptions));
/**
* @private
* @type {VectorTileRenderType}
*/
this.renderMode_ = renderMode;
this.setPreload(options.preload ? options.preload : 0);
this.setUseInterimTilesOnError(options.useInterimTilesOnError !== undefined ?
@@ -124,6 +130,13 @@ class VectorTileLayer extends BaseVectorLayer {
return new CanvasVectorTileLayerRenderer(this);
}
/**
* @return {VectorTileRenderType} The render mode.
*/
getRenderMode() {
return this.renderMode_;
}
/**
* Return the level as number to which we will preload tiles up to.
* @return {number} The level to preload tiles up to.

92
src/ol/renderer/canvas/ImageLayer.js
View File

@@ -2,14 +2,9 @@
* @module ol/renderer/canvas/ImageLayer
*/
import {ENABLE_RASTER_REPROJECTION} from '../../reproj/common.js';
import ImageCanvas from '../../ImageCanvas.js';
import LayerType from '../../LayerType.js';
import ViewHint from '../../ViewHint.js';
import {equals} from '../../array.js';
import {getHeight, getIntersection, getWidth, isEmpty} from '../../extent.js';
import VectorRenderType from '../../layer/VectorRenderType.js';
import {assign} from '../../obj.js';
import {layerRendererConstructors} from './Map.js';
import {getIntersection, isEmpty} from '../../extent.js';
import IntermediateCanvasRenderer from './IntermediateCanvas.js';
import {create as createTransform, compose as composeTransform} from '../../transform.js';
@@ -21,55 +16,23 @@ import {create as createTransform, compose as composeTransform} from '../../tran
class CanvasImageLayerRenderer extends IntermediateCanvasRenderer {
/**
* @param {import("../../layer/Image.js").default|import("../../layer/Vector.js").default} imageLayer Image or vector layer.
* @param {import("../../layer/Image.js").default} imageLayer Image layer.
*/
constructor(imageLayer) {
super(imageLayer);
/**
* @private
* @protected
* @type {?import("../../ImageBase.js").default}
*/
this.image_ = null;
/**
* @private
* @protected
* @type {import("../../transform.js").Transform}
*/
this.imageTransform_ = createTransform();
/**
* @type {!Array<string>}
*/
this.skippedFeatures_ = [];
/**
* @private
* @type {import("./VectorLayer.js").default}
*/
this.vectorRenderer_ = null;
if (imageLayer.getType() === LayerType.VECTOR) {
for (let i = 0, ii = layerRendererConstructors.length; i < ii; ++i) {
const ctor = layerRendererConstructors[i];
if (ctor !== CanvasImageLayerRenderer && ctor['handles'](imageLayer)) {
this.vectorRenderer_ = /** @type {import("./VectorLayer.js").default} */ (new ctor(imageLayer));
break;
}
}
}
}
/**
* @inheritDoc
*/
disposeInternal() {
if (this.vectorRenderer_) {
this.vectorRenderer_.dispose();
}
super.disposeInternal();
}
/**
@@ -103,9 +66,8 @@ class CanvasImageLayerRenderer extends IntermediateCanvasRenderer {
const hints = frameState.viewHints;
const vectorRenderer = this.vectorRenderer_;
let renderedExtent = frameState.extent;
if (!vectorRenderer && layerState.extent !== undefined) {
if (layerState.extent !== undefined) {
renderedExtent = getIntersection(renderedExtent, layerState.extent);
}
@@ -118,37 +80,9 @@ class CanvasImageLayerRenderer extends IntermediateCanvasRenderer {
projection = sourceProjection;
}
}
let skippedFeatures = this.skippedFeatures_;
if (vectorRenderer) {
const context = vectorRenderer.context;
const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
size: [
getWidth(renderedExtent) / viewResolution,
getHeight(renderedExtent) / viewResolution
],
viewState: /** @type {import("../../View.js").State} */ (assign({}, frameState.viewState, {
rotation: 0
}))
}));
const newSkippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
image = new ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas, function(callback) {
if (vectorRenderer.prepareFrame(imageFrameState, layerState) &&
(vectorRenderer.replayGroupChanged ||
!equals(skippedFeatures, newSkippedFeatures))) {
context.canvas.width = imageFrameState.size[0] * pixelRatio;
context.canvas.height = imageFrameState.size[1] * pixelRatio;
vectorRenderer.compose(context, imageFrameState, layerState);
skippedFeatures = newSkippedFeatures;
callback();
}
});
} else {
image = imageSource.getImage(
renderedExtent, viewResolution, pixelRatio, projection);
}
const image = imageSource.getImage(renderedExtent, viewResolution, pixelRatio, projection);
if (image && this.loadImage(image)) {
this.image_ = image;
this.skippedFeatures_ = skippedFeatures;
}
}
@@ -177,16 +111,6 @@ class CanvasImageLayerRenderer extends IntermediateCanvasRenderer {
return !!this.image_;
}
/**
* @inheritDoc
*/
forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
if (this.vectorRenderer_) {
return this.vectorRenderer_.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback);
} else {
return super.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback);
}
}
}
@@ -196,9 +120,7 @@ class CanvasImageLayerRenderer extends IntermediateCanvasRenderer {
* @return {boolean} The renderer can render the layer.
*/
CanvasImageLayerRenderer['handles'] = function(layer) {
return layer.getType() === LayerType.IMAGE ||
layer.getType() === LayerType.VECTOR &&
/** @type {import("../../layer/Vector.js").default} */ (layer).getRenderMode() === VectorRenderType.IMAGE;
return layer.getType() === LayerType.IMAGE;
};

129
src/ol/renderer/canvas/VectorImageLayer.js Normal file
View File

@@ -0,0 +1,129 @@
/**
* @module ol/renderer/canvas/ImageLayer
*/
import ImageCanvas from '../../ImageCanvas.js';
import ViewHint from '../../ViewHint.js';
import {equals} from '../../array.js';
import {getHeight, getWidth, isEmpty} from '../../extent.js';
import {assign} from '../../obj.js';
import CanvasImageLayerRenderer from './ImageLayer.js';
import {compose as composeTransform} from '../../transform.js';
import CanvasVectorLayerRenderer from './VectorLayer.js';
/**
* @classdesc
* Canvas renderer for image layers.
* @api
*/
class CanvasVectorImageLayerRenderer extends CanvasImageLayerRenderer {
/**
* @param {import("../../layer/VectorImage.js").default} layer Vector image layer.
*/
constructor(layer) {
super(layer);
/**
* @type {!Array<string>}
*/
this.skippedFeatures_ = [];
/**
* @private
* @type {import("./VectorLayer.js").default}
*/
this.vectorRenderer_ = new CanvasVectorLayerRenderer(layer);
}
/**
* @inheritDoc
*/
disposeInternal() {
this.vectorRenderer_.dispose();
super.disposeInternal();
}
/**
* @inheritDoc
*/
prepareFrame(frameState, layerState) {
const pixelRatio = frameState.pixelRatio;
const size = frameState.size;
const viewState = frameState.viewState;
const viewCenter = viewState.center;
const viewResolution = viewState.resolution;
const hints = frameState.viewHints;
const vectorRenderer = this.vectorRenderer_;
const renderedExtent = frameState.extent;
if (!hints[ViewHint.ANIMATING] && !hints[ViewHint.INTERACTING] && !isEmpty(renderedExtent)) {
let skippedFeatures = this.skippedFeatures_;
const context = vectorRenderer.context;
const imageFrameState = /** @type {import("../../PluggableMap.js").FrameState} */ (assign({}, frameState, {
size: [
getWidth(renderedExtent) / viewResolution,
getHeight(renderedExtent) / viewResolution
],
viewState: /** @type {import("../../View.js").State} */ (assign({}, frameState.viewState, {
rotation: 0
}))
}));
const newSkippedFeatures = Object.keys(imageFrameState.skippedFeatureUids).sort();
const image = new ImageCanvas(renderedExtent, viewResolution, pixelRatio, context.canvas, function(callback) {
if (vectorRenderer.prepareFrame(imageFrameState, layerState) &&
(vectorRenderer.replayGroupChanged ||
!equals(skippedFeatures, newSkippedFeatures))) {
context.canvas.width = imageFrameState.size[0] * pixelRatio;
context.canvas.height = imageFrameState.size[1] * pixelRatio;
vectorRenderer.compose(context, imageFrameState, layerState);
skippedFeatures = newSkippedFeatures;
callback();
}
});
if (this.loadImage(image)) {
this.image_ = image;
this.skippedFeatures_ = skippedFeatures;
}
}
if (this.image_) {
const image = this.image_;
const imageExtent = image.getExtent();
const imageResolution = image.getResolution();
const imagePixelRatio = image.getPixelRatio();
const scale = pixelRatio * imageResolution /
(viewResolution * imagePixelRatio);
const transform = composeTransform(this.imageTransform_,
pixelRatio * size[0] / 2, pixelRatio * size[1] / 2,
scale, scale,
0,
imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution,
imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution);
composeTransform(this.coordinateToCanvasPixelTransform,
pixelRatio * size[0] / 2 - transform[4], pixelRatio * size[1] / 2 - transform[5],
pixelRatio / viewResolution, -pixelRatio / viewResolution,
0,
-viewCenter[0], -viewCenter[1]);
this.renderedResolution = imageResolution * pixelRatio / imagePixelRatio;
}
return !!this.image_;
}
/**
* @inheritDoc
*/
forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback) {
if (this.vectorRenderer_) {
return this.vectorRenderer_.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback);
} else {
return super.forEachFeatureAtCoordinate(coordinate, frameState, hitTolerance, callback);
}
}
}
export default CanvasVectorImageLayerRenderer;

6
src/ol/renderer/canvas/VectorTileLayer.js
View File

@@ -134,7 +134,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
* @inheritDoc
*/
prepareFrame(frameState, layerState) {
const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
const layerRevision = layer.getRevision();
if (this.renderedLayerRevision_ != layerRevision) {
this.renderedTiles.length = 0;
@@ -328,7 +328,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
* @inheritDoc
*/
postCompose(context, frameState, layerState) {
const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
const renderMode = layer.getRenderMode();
if (renderMode != VectorTileRenderType.IMAGE) {
const declutterReplays = layer.getDeclutter() ? {} : null;
@@ -447,7 +447,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
* @private
*/
renderTileImage_(tile, pixelRatio, projection) {
const layer = /** @type {import("../../layer/Vector.js").default} */ (this.getLayer());
const layer = /** @type {import("../../layer/VectorTile.js").default} */ (this.getLayer());
const replayState = tile.getReplayState(layer);
const revision = layer.getRevision();
const replays = IMAGE_REPLAYS[layer.getRenderMode()];

57
src/ol/source/Raster.js
View File

@@ -10,15 +10,14 @@ import Event from '../events/Event.js';
import EventType from '../events/EventType.js';
import {Processor} from 'pixelworks/lib/index';
import {equals, getCenter, getHeight, getWidth} from '../extent.js';
import LayerType from '../LayerType.js';
import ImageLayer from '../layer/Image.js';
import TileLayer from '../layer/Tile.js';
import {assign} from '../obj.js';
import CanvasImageLayerRenderer from '../renderer/canvas/ImageLayer.js';
import CanvasTileLayerRenderer from '../renderer/canvas/TileLayer.js';
import ImageSource from './Image.js';
import SourceState from './State.js';
import {create as createTransform} from '../transform.js';
import ImageSource from './Image.js';
import TileSource from './Tile.js';
import SourceState from './State.js';
import Source from './Source.js';
/**
@@ -113,7 +112,7 @@ class RasterSourceEvent extends Event {
/**
* @typedef {Object} Options
* @property {Array<import("./Source.js").default|import("../layer/Layer.js").default>} sources Input
* sources or layers. Vector layers must be configured with `renderMode: 'image'`.
* sources or layers. For vector data, use an VectorImage layer.
* @property {Operation} [operation] Raster operation.
* The operation will be called with data from input sources
* and the output will be assigned to the raster source.
@@ -490,42 +489,18 @@ function createRenderers(sources) {
* @return {import("../renderer/canvas/Layer.js").default} The renderer.
*/
function createRenderer(layerOrSource) {
const tileSource = /** @type {import("./Tile.js").default} */ (layerOrSource);
const imageSource = /** @type {import("./Image.js").default} */ (layerOrSource);
const layer = /** @type {import("../layer/Layer.js").default} */ (layerOrSource);
let renderer = null;
if (typeof tileSource.getTile === 'function') {
renderer = createTileRenderer(tileSource);
} else if (typeof imageSource.getImage === 'function') {
renderer = createImageRenderer(imageSource);
} else if (layer.getType() === LayerType.TILE) {
renderer = new CanvasTileLayerRenderer(/** @type {import("../layer/Tile.js").default} */ (layer));
} else if (layer.getType() == LayerType.IMAGE || layer.getType() == LayerType.VECTOR) {
renderer = new CanvasImageLayerRenderer(/** @type {import("../layer/Image.js").default} */ (layer));
// @type {import("../layer/Layer.js").default}
let layer;
if (layerOrSource instanceof Source) {
if (layerOrSource instanceof TileSource) {
layer = new TileLayer({source: layerOrSource});
} else if (layerOrSource instanceof ImageSource) {
layer = new ImageLayer({source: layerOrSource});
}
} else {
layer = layerOrSource;
}
return renderer;
}
/**
* Create an image renderer for the provided source.
* @param {import("./Image.js").default} source The source.
* @return {import("../renderer/canvas/Layer.js").default} The renderer.
*/
function createImageRenderer(source) {
const layer = new ImageLayer({source: source});
return new CanvasImageLayerRenderer(layer);
}
/**
* Create a tile renderer for the provided source.
* @param {import("./Tile.js").default} source The source.
* @return {import("../renderer/canvas/Layer.js").default} The renderer.
*/
function createTileRenderer(source) {
const layer = new TileLayer({source: source});
return new CanvasTileLayerRenderer(layer);
return layer ? /** @type {import("../renderer/canvas/Layer.js").default} */ (layer.createRenderer()) : null;
}