Add view abstraction

src/ol/renderer/dom/dommaprenderer.js

@@ -133,26 +133,8 @@ ol.renderer.dom.Map.prototype.createLayerRenderer = function(layer) {
 /**
  * @inheritDoc
  */
-ol.renderer.dom.Map.prototype.handleCenterChanged = function() {
-  goog.base(this, 'handleCenterChanged');
-  this.getMap().render();
-};
-
-
-/**
- * @inheritDoc
- */
-ol.renderer.dom.Map.prototype.handleResolutionChanged = function() {
-  goog.base(this, 'handleResolutionChanged');
-  this.getMap().render();
-};
-
-
-/**
- * @inheritDoc
- */
-ol.renderer.dom.Map.prototype.handleRotationChanged = function() {
-  goog.base(this, 'handleRotationChanged');
+ol.renderer.dom.Map.prototype.handleViewPropertyChanged = function() {
+  goog.base(this, 'handleViewPropertyChanged');
   this.getMap().render();
 };
 
@@ -166,6 +148,15 @@ ol.renderer.dom.Map.prototype.handleSizeChanged = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.renderer.dom.Map.prototype.handleViewChanged = function() {
+  goog.base(this, 'handleViewChanged');
+  this.getMap().render();
+};
+
+
 /**
  * Render the map.  Sets up the layers pane on first render and adjusts its
  * position as needed on subsequent calls.
@@ -177,10 +168,11 @@ ol.renderer.dom.Map.prototype.renderFrame = function(time) {
     return;
   }
 
-  var mapCenter = map.getCenter();
+  var view = map.getView().getView2D();
+  var mapCenter = view.getCenter();
   var mapSize = map.getSize();
-  var mapResolution = map.getResolution();
-  var mapRotation = map.getRotation();
+  var mapResolution = view.getResolution();
+  var mapRotation = view.getRotation();
 
   goog.asserts.assert(goog.isDefAndNotNull(mapCenter));
   goog.asserts.assert(goog.isDef(mapResolution));
@@ -235,14 +227,15 @@ ol.renderer.dom.Map.prototype.resetLayersPane_ = function() {
   var mapSize = map.getSize();
   var halfWidth = mapSize.width / 2;
   var halfHeight = mapSize.height / 2;
-  var center = map.getCenter();
-  var resolution = map.getResolution();
+  var view = /** @type {ol.View2D} */ (map.getView().getView2D());
+  var center = view.getCenter();
+  var resolution = view.getResolution();
   var origin = new ol.Coordinate(
       center.x - resolution * halfWidth,
       center.y + resolution * halfHeight);
   this.layersPaneOrigin_ = origin;
   this.setTransformOrigin_(halfWidth, halfHeight);
-  this.applyTransform_(0, 0, map.getRotation());
+  this.applyTransform_(0, 0, view.getRotation());
   goog.object.forEach(this.layerRenderers, function(layerRenderer) {
     layerRenderer.setOrigin(origin);
   });
@@ -273,8 +266,9 @@ ol.renderer.dom.Map.prototype.setTransformOrigin_ = function(x, y) {
  */
 ol.renderer.dom.Map.prototype.transformLayersPane_ = function() {
   var map = this.map;
-  var resolution = map.getResolution();
-  var center = map.getCenter();
+  var view = map.getView();
+  var resolution = view.getResolution();
+  var center = view.getCenter();
   var size = map.getSize();
   var origin = this.layersPaneOrigin_;
   var ox = (center.x - origin.x) / resolution;
@@ -282,5 +276,5 @@ ol.renderer.dom.Map.prototype.transformLayersPane_ = function() {
   this.setTransformOrigin_(ox, oy);
   var dx = ox - (size.width / 2);
   var dy = oy - (size.height / 2);
-  this.applyTransform_(-dx, -dy, map.getRotation());
+  this.applyTransform_(-dx, -dy, view.getRotation());
 };

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -95,8 +95,10 @@ ol.renderer.dom.TileLayer.prototype.renderFrame = function(time) {
   if (!map.isDef()) {
     return;
   }
-  var mapExtent = /** @type {!ol.Extent} */ map.getRotatedExtent();
-  var mapResolution = /** @type {number} */ map.getResolution();
+  var mapSize = /** @type {ol.Size} */ (map.getSize());
+  var view = map.getView().getView2D();
+  var mapExtent = /** @type {!ol.Extent} */ (view.getRotatedExtent(mapSize));
+  var mapResolution = /** @type {number} */ (view.getResolution());
   var resolutionChanged = (mapResolution !== this.renderedMapResolution_);
 
   var tileLayer = this.getLayer();

src/ol/renderer/maprenderer.js

@@ -1,11 +1,14 @@
 goog.provide('ol.renderer.Map');
 
 goog.require('goog.Disposable');
+goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.functions');
 goog.require('goog.fx.anim');
 goog.require('goog.fx.anim.Animated');
 goog.require('goog.vec.Mat4');
+goog.require('ol.View2D');
+goog.require('ol.View2DProperty');
 
 
 
@@ -43,6 +46,13 @@ ol.renderer.Map = function(container, map) {
    */
   this.layersListenerKeys_ = null;
 
+
+  /**
+   * @private
+   * @type {?number}
+   */
+  this.viewPropertyListenerKey_ = null;
+
   /**
    * @private
    * @type {goog.vec.Mat4.Number}
@@ -70,25 +80,17 @@ ol.renderer.Map = function(container, map) {
         map, ol.Object.getChangedEventType(ol.MapProperty.BACKGROUND_COLOR),
         this.handleBackgroundColorChanged, false, this),
 
-    goog.events.listen(
-        map, ol.Object.getChangedEventType(ol.MapProperty.CENTER),
-        this.handleCenterChanged, false, this),
-
     goog.events.listen(
         map, ol.Object.getChangedEventType(ol.MapProperty.LAYERS),
         this.handleLayersChanged, false, this),
 
-    goog.events.listen(
-        map, ol.Object.getChangedEventType(ol.MapProperty.RESOLUTION),
-        this.handleResolutionChanged, false, this),
-
-    goog.events.listen(
-        map, ol.Object.getChangedEventType(ol.MapProperty.ROTATION),
-        this.handleRotationChanged, false, this),
-
     goog.events.listen(
         map, ol.Object.getChangedEventType(ol.MapProperty.SIZE),
-        this.handleSizeChanged, false, this)
+        this.handleSizeChanged, false, this),
+
+    goog.events.listen(
+        map, ol.Object.getChangedEventType(ol.MapProperty.VIEW),
+        this.handleViewChanged, false, this)
   ];
 
 };
@@ -127,6 +129,9 @@ ol.renderer.Map.prototype.disposeInternal = function() {
     goog.dispose(layerRenderer);
   });
   goog.array.forEach(this.mapListenerKeys_, goog.events.unlistenByKey);
+  if (!goog.isNull(this.viewPropertyListenerKey_)) {
+    goog.events.unlistenByKey(this.viewPropertyListenerKey_);
+  }
   if (!goog.isNull(this.layersListenerKeys_)) {
     goog.array.forEach(this.layersListenerKeys_, goog.events.unlistenByKey);
   }
@@ -204,14 +209,6 @@ ol.renderer.Map.prototype.getPixelFromCoordinate = function(coordinate) {
 ol.renderer.Map.prototype.handleBackgroundColorChanged = goog.nullFunction;
 
 
-/**
- * @protected
- */
-ol.renderer.Map.prototype.handleCenterChanged = function() {
-  this.matricesDirty_ = true;
-};
-
-
 /**
  * @param {ol.CollectionEvent} collectionEvent Collection event.
  * @protected
@@ -258,15 +255,7 @@ ol.renderer.Map.prototype.handleLayersRemove = function(collectionEvent) {
 /**
  * @protected
  */
-ol.renderer.Map.prototype.handleResolutionChanged = function() {
-  this.matricesDirty_ = true;
-};
-
-
-/**
- * @protected
- */
-ol.renderer.Map.prototype.handleRotationChanged = function() {
+ol.renderer.Map.prototype.handleViewPropertyChanged = function() {
   this.matricesDirty_ = true;
 };
 
@@ -279,6 +268,23 @@ ol.renderer.Map.prototype.handleSizeChanged = function() {
 };
 
 
+/**
+ * @protected
+ */
+ol.renderer.Map.prototype.handleViewChanged = function() {
+  if (!goog.isNull(this.viewPropertyListenerKey_)) {
+    goog.events.unlistenByKey(this.viewPropertyListenerKey_);
+    this.viewPropertyListenerKey_ = null;
+  }
+  var view = this.getMap().getView();
+  if (goog.isDefAndNotNull(view)) {
+    this.viewPropertyListenerKey_ = goog.events.listen(
+        view, ol.ObjectEventType.CHANGED,
+        this.handleViewPropertyChanged, false, this);
+  }
+};
+
+
 /**
  * @param {ol.layer.Layer} layer Layer.
  * @protected
@@ -332,10 +338,11 @@ ol.renderer.Map.prototype.updateMatrices_ = function() {
   if (this.matricesDirty_) {
 
     var map = this.map;
-    var center = /** @type {!ol.Coordinate} */ map.getCenter();
-    var resolution = /** @type {number} */ map.getResolution();
-    var rotation = map.getRotation();
-    var size = /** @type {!ol.Size} */ map.getSize();
+    var view = map.getView().getView2D();
+    var center = /** @type {!ol.Coordinate} */ (view.getCenter());
+    var resolution = /** @type {number} */ (view.getResolution());
+    var rotation = view.getRotation();
+    var size = /** @type {!ol.Size} */ (map.getSize());
 
     goog.vec.Mat4.makeIdentity(this.coordinateToPixelMatrix_);
     goog.vec.Mat4.translate(this.coordinateToPixelMatrix_,

src/ol/renderer/webgl/webglmaprenderer.js

@@ -386,8 +386,8 @@ ol.renderer.webgl.Map.prototype.handleBackgroundColorChanged = function() {
 /**
  * @inheritDoc
  */
-ol.renderer.webgl.Map.prototype.handleCenterChanged = function() {
-  goog.base(this, 'handleCenterChanged');
+ol.renderer.webgl.Map.prototype.handleViewPropertyChanged = function() {
+  goog.base(this, 'handleViewPropertyChanged');
   this.getMap().render();
 };
 
@@ -401,24 +401,6 @@ ol.renderer.webgl.Map.prototype.handleLayerRendererChange = function(event) {
 };
 
 
-/**
- * @inheritDoc
- */
-ol.renderer.webgl.Map.prototype.handleResolutionChanged = function() {
-  goog.base(this, 'handleResolutionChanged');
-  this.getMap().render();
-};
-
-
-/**
- * @inheritDoc
- */
-ol.renderer.webgl.Map.prototype.handleRotationChanged = function() {
-  goog.base(this, 'handleRotationChanged');
-  this.getMap().render();
-};
-
-
 /**
  * @inheritDoc
  */
@@ -428,6 +410,15 @@ ol.renderer.webgl.Map.prototype.handleSizeChanged = function() {
 };
 
 
+/**
+ * @inheritDoc
+ */
+ol.renderer.webgl.Map.prototype.handleViewChanged = function() {
+  goog.base(this, 'handleViewChanged');
+  this.getMap().render();
+};
+
+
 /**
  * @param {goog.events.Event} event Event.
  * @protected
@@ -525,7 +516,7 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(time) {
     }
   });
 
-  var size = /** @type {ol.Size} */ this.getMap().getSize();
+  var size = /** @type {ol.Size} */ (this.getMap().getSize());
   if (!this.canvasSize_.equals(size)) {
     this.canvas_.width = size.width;
     this.canvas_.height = size.height;

src/ol/renderer/webgl/webgltilelayerrenderer.js

@@ -294,13 +294,15 @@ ol.renderer.webgl.TileLayer.prototype.renderFrame = function(time) {
   var mapRenderer = this.getMapRenderer();
   var map = this.getMap();
   var gl = mapRenderer.getGL();
+  var view = map.getView().getView2D();
 
   goog.asserts.assert(map.isDef());
-  var mapCenter = map.getCenter();
-  var mapExtent = map.getExtent();
-  var mapResolution = /** @type {number} */ map.getResolution();
-  var mapRotatedExtent = map.getRotatedExtent();
-  var mapRotation = map.getRotation();
+  var mapSize = map.getSize();
+  var mapCenter = view.getCenter();
+  var mapExtent = view.getExtent(mapSize);
+  var mapResolution = /** @type {number} */ (view.getResolution());
+  var mapRotatedExtent = view.getRotatedExtent(mapSize);
+  var mapRotation = view.getRotation();
 
   var tileLayer = this.getLayer();
   var tileSource = tileLayer.getTileSource();