178 lines
4.0 KiB
JavaScript
178 lines
4.0 KiB
JavaScript
// FIXME offset panning
|
|
|
|
goog.provide('ol.renderer.canvas.Map');
|
|
|
|
goog.require('goog.dom');
|
|
goog.require('goog.style');
|
|
goog.require('goog.vec.Mat4');
|
|
goog.require('ol.Size');
|
|
goog.require('ol.layer.TileLayer');
|
|
goog.require('ol.renderer.Map');
|
|
goog.require('ol.renderer.canvas.TileLayer');
|
|
|
|
|
|
|
|
/**
|
|
* @constructor
|
|
* @extends {ol.renderer.Map}
|
|
* @param {Element} container Container.
|
|
* @param {ol.Map} map Map.
|
|
*/
|
|
ol.renderer.canvas.Map = function(container, map) {
|
|
|
|
goog.base(this, container, map);
|
|
|
|
/**
|
|
* @private
|
|
* @type {ol.Size}
|
|
*/
|
|
this.canvasSize_ = new ol.Size(container.clientHeight, container.clientWidth);
|
|
|
|
/**
|
|
* @private
|
|
* @type {Element}
|
|
*/
|
|
this.canvas_ = goog.dom.createElement(goog.dom.TagName.CANVAS);
|
|
this.canvas_.height = this.canvasSize_.height;
|
|
this.canvas_.width = this.canvasSize_.width;
|
|
this.canvas_.className = 'ol-unselectable';
|
|
goog.dom.insertChildAt(container, this.canvas_, 0);
|
|
|
|
/**
|
|
* @private
|
|
* @type {boolean}
|
|
*/
|
|
this.renderedVisible_ = true;
|
|
|
|
/**
|
|
* @private
|
|
* @type {CanvasRenderingContext2D}
|
|
*/
|
|
this.context_ = this.canvas_.getContext('2d');
|
|
|
|
};
|
|
goog.inherits(ol.renderer.canvas.Map, ol.renderer.Map);
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.createLayerRenderer = function(layer) {
|
|
if (layer instanceof ol.layer.TileLayer) {
|
|
return new ol.renderer.canvas.TileLayer(this, layer);
|
|
} else {
|
|
goog.asserts.assert(false);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.handleBackgroundColorChanged = function() {
|
|
this.getMap().render();
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.handleViewPropertyChanged = function() {
|
|
goog.base(this, 'handleViewPropertyChanged');
|
|
this.getMap().render();
|
|
};
|
|
|
|
|
|
/**
|
|
* @param {goog.events.Event} event Event.
|
|
* @protected
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.handleLayerRendererChange = function(event) {
|
|
this.getMap().render();
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.handleSizeChanged = function() {
|
|
goog.base(this, 'handleSizeChanged');
|
|
this.getMap().render();
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.handleViewChanged = function() {
|
|
goog.base(this, 'handleViewChanged');
|
|
this.getMap().render();
|
|
};
|
|
|
|
|
|
/**
|
|
* @inheritDoc
|
|
*/
|
|
ol.renderer.canvas.Map.prototype.renderFrame = function(frameState) {
|
|
|
|
if (goog.isNull(frameState)) {
|
|
if (this.renderedVisible_) {
|
|
goog.style.showElement(this.canvas_, false);
|
|
this.renderedVisible_ = false;
|
|
}
|
|
return;
|
|
}
|
|
|
|
var size = frameState.size;
|
|
if (!this.canvasSize_.equals(size)) {
|
|
this.canvas_.width = size.width;
|
|
this.canvas_.height = size.height;
|
|
this.canvasSize_ = size;
|
|
}
|
|
|
|
var context = this.context_;
|
|
context.setTransform(1, 0, 0, 1, 0, 0);
|
|
var backgroundColor = frameState.backgroundColor;
|
|
context.fillStyle = 'rgb(' +
|
|
backgroundColor.r.toFixed(0) + ',' +
|
|
backgroundColor.g.toFixed(0) + ',' +
|
|
backgroundColor.b.toFixed(0) + ')';
|
|
context.globalAlpha = 1;
|
|
context.fillRect(0, 0, size.width, size.height);
|
|
|
|
goog.array.forEach(frameState.layersArray, function(layer) {
|
|
|
|
var layerState = frameState.layerStates[goog.getUid(layer)];
|
|
if (!layerState.visible) {
|
|
return;
|
|
} else if (!layerState.ready) {
|
|
frameState.animate = true;
|
|
return;
|
|
}
|
|
var layerRenderer = this.getLayerRenderer(layer);
|
|
layerRenderer.renderFrame(frameState, layerState);
|
|
|
|
var transform = layerRenderer.getTransform();
|
|
context.setTransform(
|
|
goog.vec.Mat4.getElement(transform, 0, 0),
|
|
goog.vec.Mat4.getElement(transform, 1, 0),
|
|
goog.vec.Mat4.getElement(transform, 0, 1),
|
|
goog.vec.Mat4.getElement(transform, 1, 1),
|
|
goog.vec.Mat4.getElement(transform, 0, 3),
|
|
goog.vec.Mat4.getElement(transform, 1, 3));
|
|
|
|
context.globalAlpha = layerState.opacity;
|
|
context.drawImage(layerRenderer.getImage(), 0, 0);
|
|
|
|
}, this);
|
|
|
|
if (!this.renderedVisible_) {
|
|
goog.style.showElement(this.canvas_, true);
|
|
this.renderedVisible_ = true;
|
|
}
|
|
|
|
this.calculateMatrices2D(frameState);
|
|
|
|
};
|