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

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()];