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

Rotation support for the dom renderer

Browse Source 
Thanks @fredj for the inspiration.  This gives us initial rotation support.  It exposes some issues in the interactions that I'll address separately.  Closes #22.
This commit is contained in:
Tim Schaub
2012-09-28 10:53:36 +02:00
parent ab403bf71d
commit 6ed27779cc
2 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/ol/renderer/dom/map.js
View File

@@ -5,6 +5,7 @@ goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
goog.require('goog.events.Event');
goog.require('goog.functions');
goog.require('goog.style');
goog.require('ol.Coordinate');
goog.require('ol.Map');
@@ -30,7 +31,11 @@ ol.renderer.dom.Map = function(container, map) {
*/
this.layersPane_ = goog.dom.createElement(goog.dom.TagName.DIV);
this.layersPane_.className = 'ol-layers-pane';
this.layersPane_.style.position = 'absolute';
var style = this.layersPane_.style;
style.position = 'absolute';
style.width = '100%';
style.height = '100%';
goog.dom.appendChild(container, this.layersPane_);
/**
@@ -68,6 +73,27 @@ ol.renderer.dom.Map = function(container, map) {
goog.inherits(ol.renderer.dom.Map, ol.renderer.Map);
/**
* Apply the given transform to the layers pane.
* @param {string} transform The transform to apply.
* @private
*/
ol.renderer.dom.Map.prototype.applyTransform_ = function(transform) {
var style = this.layersPane_.style;
style.WebkitTransform = transform;
style.MozTransform = transform;
style.OTransform = transform;
style.msTransform = transform;
style.transform = transform;
};
/**
* @inheritDoc
*/
ol.renderer.dom.Map.prototype.canRotate = goog.functions.TRUE;
/**
* @inheritDoc
*/
@@ -119,6 +145,19 @@ ol.renderer.dom.Map.prototype.handleResolutionChanged = function() {
};
/**
* @inheritDoc
*/
ol.renderer.dom.Map.prototype.handleRotationChanged = function() {
var map = this.getMap();
if (!map.isDef()) {
return;
}
var rotation = map.getRotation() * 180 / Math.PI;
this.applyTransform_('rotate(' + rotation + 'deg)');
};
/**
* @inheritDoc
*/
@@ -205,14 +244,16 @@ ol.renderer.dom.Map.prototype.resetLayersPane_ = function() {
*/
ol.renderer.dom.Map.prototype.shiftLayersPane_ = function() {
var center = this.map.getCenter();
goog.asserts.assert(goog.isDef(center));
var oldCenter = this.renderedCenter_;
var resolution = this.map.getResolution();
var dx = Math.round((oldCenter.x - center.x) / resolution);
var dy = Math.round((center.y - oldCenter.y) / resolution);
var currentPx = this.getPixelFromCoordinate(center);
var oldPx = this.getPixelFromCoordinate(oldCenter);
var dx = Math.round(oldPx.x - currentPx.x);
var dy = Math.round(oldPx.y - currentPx.y);
if (!(dx === 0 && dy === 0)) {
var offset = this.layersPaneOffset_;
offset.x += Math.round((oldCenter.x - center.x) / resolution);
offset.y += Math.round((center.y - oldCenter.y) / resolution);
offset.x += dx;
offset.y += dy;
goog.style.setPosition(this.layersPane_, offset);
}
};

2
src/ol/renderer/dom/tilelayer.js
View File

@@ -175,7 +175,7 @@ ol.renderer.dom.TileLayer.prototype.render = function() {
if (!map.isDef()) {
return;
}
var mapExtent = /** @type {!ol.Extent} */ map.getExtent();
var mapExtent = /** @type {!ol.Extent} */ map.getRotatedExtent();
var mapResolution = /** @type {number} */ map.getResolution();
var resolutionChanged = (mapResolution !== this.renderedMapResolution_);