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

Merge pull request #3215 from tschaub/rendering

Browse Source 
Allow reuse of layer rendering code without creating a map.
This commit is contained in:
Tim Schaub
2015-02-08 17:24:16 -07:00
parent e97f017dda 33c197cf16
commit ada6b5640a
17 changed files with 93 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/ol/renderer/canvas/canvasimagelayerrenderer.js
View File

@@ -9,7 +9,6 @@ goog.require('ol.dom');
goog.require('ol.extent');
goog.require('ol.layer.Image');
goog.require('ol.proj');
goog.require('ol.renderer.Map');
goog.require('ol.renderer.canvas.Layer');
goog.require('ol.source.ImageVector');
goog.require('ol.vec.Mat4');
@@ -19,12 +18,11 @@ goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.canvas.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Image} imageLayer Single image layer.
*/
ol.renderer.canvas.ImageLayer = function(mapRenderer, imageLayer) {
ol.renderer.canvas.ImageLayer = function(imageLayer) {
goog.base(this, mapRenderer, imageLayer);
goog.base(this, imageLayer);
/**
* @private
@@ -88,7 +86,9 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel =
if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
// for ImageVector sources use the original hit-detection logic,
// so that for example also transparent polygons are detected
var coordinate = this.getMap().getCoordinateFromPixel(pixel);
var coordinate = pixel.slice();
ol.vec.Mat4.multVec2(
frameState.pixelToCoordinateMatrix, coordinate, coordinate);
var hasFeature = this.forEachFeatureAtCoordinate(
coordinate, frameState, goog.functions.TRUE, this);

5
src/ol/renderer/canvas/canvaslayerrenderer.js
View File

@@ -17,12 +17,11 @@ goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Layer} layer Layer.
*/
ol.renderer.canvas.Layer = function(mapRenderer, layer) {
ol.renderer.canvas.Layer = function(layer) {
goog.base(this, mapRenderer, layer);
goog.base(this, layer);
/**
* @private

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

@@ -77,11 +77,11 @@ goog.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
*/
ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer) {
if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
return new ol.renderer.canvas.ImageLayer(this, layer);
return new ol.renderer.canvas.ImageLayer(layer);
} else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
return new ol.renderer.canvas.TileLayer(this, layer);
return new ol.renderer.canvas.TileLayer(layer);
} else if (ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
return new ol.renderer.canvas.VectorLayer(this, layer);
return new ol.renderer.canvas.VectorLayer(layer);
} else {
goog.asserts.fail();
return null;

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

@@ -13,7 +13,6 @@ goog.require('ol.TileState');
goog.require('ol.dom');
goog.require('ol.extent');
goog.require('ol.layer.Tile');
goog.require('ol.renderer.Map');
goog.require('ol.renderer.canvas.Layer');
goog.require('ol.tilecoord');
goog.require('ol.vec.Mat4');
@@ -23,12 +22,11 @@ goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.canvas.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Tile} tileLayer Tile layer.
*/
ol.renderer.canvas.TileLayer = function(mapRenderer, tileLayer) {
ol.renderer.canvas.TileLayer = function(tileLayer) {
goog.base(this, mapRenderer, tileLayer);
goog.base(this, tileLayer);
/**
* @private

5
src/ol/renderer/canvas/canvasvectorlayerrenderer.js
View File

@@ -17,12 +17,11 @@ goog.require('ol.renderer.vector');
/**
* @constructor
* @extends {ol.renderer.canvas.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Vector} vectorLayer Vector layer.
*/
ol.renderer.canvas.VectorLayer = function(mapRenderer, vectorLayer) {
ol.renderer.canvas.VectorLayer = function(vectorLayer) {
goog.base(this, mapRenderer, vectorLayer);
goog.base(this, vectorLayer);
/**
* @private

5
src/ol/renderer/dom/domimagelayerrenderer.js
View File

@@ -18,14 +18,13 @@ goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.dom.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Image} imageLayer Image layer.
*/
ol.renderer.dom.ImageLayer = function(mapRenderer, imageLayer) {
ol.renderer.dom.ImageLayer = function(imageLayer) {
var target = goog.dom.createElement(goog.dom.TagName.DIV);
target.style.position = 'absolute';
goog.base(this, mapRenderer, imageLayer, target);
goog.base(this, imageLayer, target);
/**
* The last rendered image.

5
src/ol/renderer/dom/domlayerrenderer.js
View File

@@ -8,13 +8,12 @@ goog.require('ol.renderer.Layer');
/**
* @constructor
* @extends {ol.renderer.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Layer} layer Layer.
* @param {!Element} target Target.
*/
ol.renderer.dom.Layer = function(mapRenderer, layer, target) {
ol.renderer.dom.Layer = function(layer, target) {
goog.base(this, mapRenderer, layer);
goog.base(this, layer);
/**
* @type {!Element}

6
src/ol/renderer/dom/dommaprenderer.js
View File

@@ -112,12 +112,12 @@ ol.renderer.dom.Map.prototype.disposeInternal = function() {
ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
var layerRenderer;
if (ol.ENABLE_IMAGE && layer instanceof ol.layer.Image) {
layerRenderer = new ol.renderer.dom.ImageLayer(this, layer);
layerRenderer = new ol.renderer.dom.ImageLayer(layer);
} else if (ol.ENABLE_TILE && layer instanceof ol.layer.Tile) {
layerRenderer = new ol.renderer.dom.TileLayer(this, layer);
layerRenderer = new ol.renderer.dom.TileLayer(layer);
} else if (!(ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE) &&
ol.ENABLE_VECTOR && layer instanceof ol.layer.Vector) {
layerRenderer = new ol.renderer.dom.VectorLayer(this, layer);
layerRenderer = new ol.renderer.dom.VectorLayer(layer);
} else {
goog.asserts.fail();
return null;

5
src/ol/renderer/dom/domtilelayerrenderer.js
View File

@@ -30,10 +30,9 @@ goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.dom.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Tile} tileLayer Tile layer.
*/
ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
ol.renderer.dom.TileLayer = function(tileLayer) {
var target = goog.dom.createElement(goog.dom.TagName.DIV);
target.style.position = 'absolute';
@@ -44,7 +43,7 @@ ol.renderer.dom.TileLayer = function(mapRenderer, tileLayer) {
target.style.height = '100%';
}
goog.base(this, mapRenderer, tileLayer, target);
goog.base(this, tileLayer, target);
/**
* @private

5
src/ol/renderer/dom/domvectorlayerrenderer.js
View File

@@ -21,10 +21,9 @@ goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.dom.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.layer.Vector} vectorLayer Vector layer.
*/
ol.renderer.dom.VectorLayer = function(mapRenderer, vectorLayer) {
ol.renderer.dom.VectorLayer = function(vectorLayer) {
/**
* @private
@@ -39,7 +38,7 @@ ol.renderer.dom.VectorLayer = function(mapRenderer, vectorLayer) {
target.style.maxWidth = 'none';
target.style.position = 'absolute';
goog.base(this, mapRenderer, vectorLayer, target);
goog.base(this, vectorLayer, target);
/**
* @private

40
src/ol/renderer/layerrenderer.js
View File

@@ -6,6 +6,7 @@ goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.functions');
goog.require('ol.ImageState');
goog.require('ol.Observable');
goog.require('ol.TileRange');
goog.require('ol.TileState');
goog.require('ol.layer.Layer');
@@ -13,27 +14,21 @@ goog.require('ol.source.Source');
goog.require('ol.source.State');
goog.require('ol.source.Tile');
goog.require('ol.tilecoord');
goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {goog.Disposable}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @extends {ol.Observable}
* @param {ol.layer.Layer} layer Layer.
* @suppress {checkStructDictInheritance}
* @struct
*/
ol.renderer.Layer = function(mapRenderer, layer) {
ol.renderer.Layer = function(layer) {
goog.base(this);
/**
* @private
* @type {ol.renderer.Map}
*/
this.mapRenderer_ = mapRenderer;
/**
* @private
* @type {ol.layer.Layer}
@@ -42,7 +37,7 @@ ol.renderer.Layer = function(mapRenderer, layer) {
};
goog.inherits(ol.renderer.Layer, goog.Disposable);
goog.inherits(ol.renderer.Layer, ol.Observable);
/**
@@ -67,7 +62,10 @@ ol.renderer.Layer.prototype.forEachFeatureAtCoordinate = goog.nullFunction;
*/
ol.renderer.Layer.prototype.forEachLayerAtPixel =
function(pixel, frameState, callback, thisArg) {
var coordinate = this.getMap().getCoordinateFromPixel(pixel);
var coordinate = pixel.slice();
ol.vec.Mat4.multVec2(
frameState.pixelToCoordinateMatrix, coordinate, coordinate);
var hasFeature = this.forEachFeatureAtCoordinate(
coordinate, frameState, goog.functions.TRUE, this);
@@ -96,24 +94,6 @@ ol.renderer.Layer.prototype.getLayer = function() {
};
/**
* @protected
* @return {ol.Map} Map.
*/
ol.renderer.Layer.prototype.getMap = function() {
return this.mapRenderer_.getMap();
};
/**
* @protected
* @return {ol.renderer.Map} Map renderer.
*/
ol.renderer.Layer.prototype.getMapRenderer = function() {
return this.mapRenderer_;
};
/**
* Handle changes in image state.
* @param {goog.events.Event} event Image change event.
@@ -161,7 +141,7 @@ ol.renderer.Layer.prototype.loadImage = function(image) {
ol.renderer.Layer.prototype.renderIfReadyAndVisible = function() {
var layer = this.getLayer();
if (layer.getVisible() && layer.getSourceState() == ol.source.State.READY) {
this.getMap().render();
this.changed();
}
};

30
src/ol/renderer/maprenderer.js
View File

@@ -4,6 +4,8 @@ goog.provide('ol.renderer.Map');
goog.require('goog.Disposable');
goog.require('goog.asserts');
goog.require('goog.dispose');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.functions');
goog.require('goog.object');
goog.require('goog.vec.Mat4');
@@ -56,6 +58,12 @@ ol.renderer.Map = function(container, map) {
*/
this.layerRenderers_ = {};
/**
* @private
* @type {Object.<string, goog.events.Key>}
*/
this.layerRendererListeners_ = {};
};
goog.inherits(ol.renderer.Map, goog.Disposable);
@@ -84,9 +92,7 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) {
* @protected
* @return {ol.renderer.Layer} layerRenderer Layer renderer.
*/
ol.renderer.Map.prototype.createLayerRenderer = function(layer) {
return new ol.renderer.Layer(this, layer);
};
ol.renderer.Map.prototype.createLayerRenderer = goog.abstractMethod;
/**
@@ -256,6 +262,10 @@ ol.renderer.Map.prototype.getLayerRenderer = function(layer) {
} else {
var layerRenderer = this.createLayerRenderer(layer);
this.layerRenderers_[layerKey] = layerRenderer;
this.layerRendererListeners_[layerKey] = goog.events.listen(layerRenderer,
goog.events.EventType.CHANGE, this.handleLayerRendererChange_,
false, this);
return layerRenderer;
}
};
@@ -295,6 +305,15 @@ ol.renderer.Map.prototype.getMap = function() {
ol.renderer.Map.prototype.getType = goog.abstractMethod;
/**
* Handle changes in a layer renderer.
* @private
*/
ol.renderer.Map.prototype.handleLayerRendererChange_ = function() {
this.map_.render();
};
/**
* @param {string} layerKey Layer key.
* @return {ol.renderer.Layer} Layer renderer.
@@ -304,6 +323,11 @@ ol.renderer.Map.prototype.removeLayerRendererByKey_ = function(layerKey) {
goog.asserts.assert(layerKey in this.layerRenderers_);
var layerRenderer = this.layerRenderers_[layerKey];
delete this.layerRenderers_[layerKey];
goog.asserts.assert(layerKey in this.layerRendererListeners_);
goog.events.unlistenByKey(this.layerRendererListeners_[layerKey]);
delete this.layerRendererListeners_[layerKey];
return layerRenderer;
};

12
src/ol/renderer/webgl/webglimagelayerrenderer.js
View File

@@ -22,7 +22,7 @@ goog.require('ol.webgl.Context');
/**
* @constructor
* @extends {ol.renderer.webgl.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
* @param {ol.layer.Image} imageLayer Tile layer.
*/
ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) {
@@ -64,7 +64,7 @@ ol.renderer.webgl.ImageLayer.prototype.createTexture_ = function(image) {
// http://learningwebgl.com/blog/?p=2101
var imageElement = image.getImage();
var gl = this.getWebGLMapRenderer().getGL();
var gl = this.mapRenderer.getGL();
return ol.webgl.Context.createTexture(
gl, imageElement, goog.webgl.CLAMP_TO_EDGE, goog.webgl.CLAMP_TO_EDGE);
@@ -100,7 +100,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachFeatureAtCoordinate =
ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
function(frameState, layerState, context) {
var gl = this.getWebGLMapRenderer().getGL();
var gl = this.mapRenderer.getGL();
var viewState = frameState.viewState;
var viewCenter = viewState.center;
@@ -155,7 +155,7 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame =
if (!goog.isNull(image)) {
goog.asserts.assert(!goog.isNull(texture));
var canvas = this.getWebGLMapRenderer().getContext().getCanvas();
var canvas = this.mapRenderer.getContext().getCanvas();
this.updateProjectionMatrix_(canvas.width, canvas.height,
viewCenter, viewResolution, viewRotation, image.getExtent());
@@ -235,7 +235,9 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel =
if (this.getLayer().getSource() instanceof ol.source.ImageVector) {
// for ImageVector sources use the original hit-detection logic,
// so that for example also transparent polygons are detected
var coordinate = this.getMap().getCoordinateFromPixel(pixel);
var coordinate = pixel.slice();
ol.vec.Mat4.multVec2(
frameState.pixelToCoordinateMatrix, coordinate, coordinate);
var hasFeature = this.forEachFeatureAtCoordinate(
coordinate, frameState, goog.functions.TRUE, this);

22
src/ol/renderer/webgl/webgllayerrenderer.js
View File

@@ -18,12 +18,18 @@ goog.require('ol.webgl.Context');
/**
* @constructor
* @extends {ol.renderer.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
* @param {ol.layer.Layer} layer Layer.
*/
ol.renderer.webgl.Layer = function(mapRenderer, layer) {
goog.base(this, mapRenderer, layer);
goog.base(this, layer);
/**
* @protected
* @type {ol.renderer.webgl.Map}
*/
this.mapRenderer = mapRenderer;
/**
* @private
@@ -96,8 +102,7 @@ goog.inherits(ol.renderer.webgl.Layer, ol.renderer.Layer);
ol.renderer.webgl.Layer.prototype.bindFramebuffer =
function(frameState, framebufferDimension) {
var mapRenderer = this.getWebGLMapRenderer();
var gl = mapRenderer.getGL();
var gl = this.mapRenderer.getGL();
if (!goog.isDef(this.framebufferDimension) ||
this.framebufferDimension != framebufferDimension) {
@@ -248,15 +253,6 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ =
};
/**
* @protected
* @return {ol.renderer.webgl.Map} MapRenderer.
*/
ol.renderer.webgl.Layer.prototype.getWebGLMapRenderer = function() {
return /** @type {ol.renderer.webgl.Map} */ (this.getMapRenderer());
};
/**
* @return {!goog.vec.Mat4.Number} Matrix.
*/

14
src/ol/renderer/webgl/webgltilelayerrenderer.js
View File

@@ -25,7 +25,7 @@ goog.require('ol.webgl.Buffer');
/**
* @constructor
* @extends {ol.renderer.webgl.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
* @param {ol.layer.Tile} tileLayer Tile layer.
*/
ol.renderer.webgl.TileLayer = function(mapRenderer, tileLayer) {
@@ -88,8 +88,7 @@ goog.inherits(ol.renderer.webgl.TileLayer, ol.renderer.webgl.Layer);
* @inheritDoc
*/
ol.renderer.webgl.TileLayer.prototype.disposeInternal = function() {
var mapRenderer = this.getWebGLMapRenderer();
var context = mapRenderer.getContext();
var context = this.mapRenderer.getContext();
context.deleteBuffer(this.renderArrayBuffer_);
goog.base(this, 'disposeInternal');
};
@@ -110,7 +109,7 @@ ol.renderer.webgl.TileLayer.prototype.handleWebGLContextLost = function() {
ol.renderer.webgl.TileLayer.prototype.prepareFrame =
function(frameState, layerState, context) {
var mapRenderer = this.getWebGLMapRenderer();
var mapRenderer = this.mapRenderer;
var gl = context.getGL();
var viewState = frameState.viewState;
@@ -337,11 +336,10 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel =
if (goog.isNull(this.framebuffer)) {
return undefined;
}
var mapSize = this.getMap().getSize();
var pixelOnMapScaled = [
pixel[0] / mapSize[0],
(mapSize[1] - pixel[1]) / mapSize[1]];
pixel[0] / frameState.size[0],
(frameState.size[1] - pixel[1]) / frameState.size[1]];
var pixelOnFrameBufferScaled = [0, 0];
ol.vec.Mat4.multVec2(
@@ -350,7 +348,7 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel =
pixelOnFrameBufferScaled[0] * this.framebufferDimension,
pixelOnFrameBufferScaled[1] * this.framebufferDimension];
var gl = this.getWebGLMapRenderer().getContext().getGL();
var gl = this.mapRenderer.getContext().getGL();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
var imageData = new Uint8Array(4);
gl.readPixels(pixelOnFrameBuffer[0], pixelOnFrameBuffer[1], 1, 1,

16
src/ol/renderer/webgl/webglvectorlayerrenderer.js
View File

@@ -9,13 +9,14 @@ goog.require('ol.layer.Vector');
goog.require('ol.render.webgl.ReplayGroup');
goog.require('ol.renderer.vector');
goog.require('ol.renderer.webgl.Layer');
goog.require('ol.vec.Mat4');
/**
* @constructor
* @extends {ol.renderer.webgl.Layer}
* @param {ol.renderer.Map} mapRenderer Map renderer.
* @param {ol.renderer.webgl.Map} mapRenderer Map renderer.
* @param {ol.layer.Vector} vectorLayer Vector layer.
*/
ol.renderer.webgl.VectorLayer = function(mapRenderer, vectorLayer) {
@@ -94,8 +95,7 @@ ol.renderer.webgl.VectorLayer.prototype.composeFrame =
ol.renderer.webgl.VectorLayer.prototype.disposeInternal = function() {
var replayGroup = this.replayGroup_;
if (!goog.isNull(replayGroup)) {
var mapRenderer = this.getWebGLMapRenderer();
var context = mapRenderer.getContext();
var context = this.mapRenderer.getContext();
replayGroup.getDeleteResourcesFunction(context)();
this.replayGroup_ = null;
}
@@ -111,8 +111,7 @@ ol.renderer.webgl.VectorLayer.prototype.forEachFeatureAtCoordinate =
if (goog.isNull(this.replayGroup_) || goog.isNull(this.layerState_)) {
return undefined;
} else {
var mapRenderer = this.getWebGLMapRenderer();
var context = mapRenderer.getContext();
var context = this.mapRenderer.getContext();
var viewState = frameState.viewState;
var layer = this.getLayer();
var layerState = this.layerState_;
@@ -147,8 +146,7 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate =
if (goog.isNull(this.replayGroup_) || goog.isNull(this.layerState_)) {
return false;
} else {
var mapRenderer = this.getWebGLMapRenderer();
var context = mapRenderer.getContext();
var context = this.mapRenderer.getContext();
var viewState = frameState.viewState;
var layerState = this.layerState_;
return this.replayGroup_.hasFeatureAtCoordinate(coordinate,
@@ -165,7 +163,9 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate =
*/
ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel =
function(pixel, frameState, callback, thisArg) {
var coordinate = this.getMap().getCoordinateFromPixel(pixel);
var coordinate = pixel.slice();
ol.vec.Mat4.multVec2(
frameState.pixelToCoordinateMatrix, coordinate, coordinate);
var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState);
if (hasFeature) {

5
test/spec/ol/renderer/layerrenderer.test.js
View File

@@ -5,10 +5,8 @@ describe('ol.renderer.Layer', function() {
var eventType = goog.events.EventType.CHANGE;
beforeEach(function() {
var map = new ol.Map({});
var mapRenderer = map.getRenderer();
var layer = new ol.layer.Layer({});
renderer = new ol.renderer.Layer(mapRenderer, layer);
renderer = new ol.renderer.Layer(layer);
});
describe('#loadImage', function() {
@@ -84,6 +82,5 @@ describe('ol.renderer.Layer', function() {
goog.require('goog.events.EventType');
goog.require('ol.Image');
goog.require('ol.ImageState');
goog.require('ol.Map');
goog.require('ol.layer.Layer');
goog.require('ol.renderer.Layer');