From cbf04024714d0b4adcc854dbd8724cde9c993265 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 19 Jun 2013 16:43:59 +0200 Subject: [PATCH 1/4] Make ol.control.Control extends ol.Object --- src/ol/control/control.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ol/control/control.js b/src/ol/control/control.js index a8dd7c312a..ce88bc89d9 100644 --- a/src/ol/control/control.js +++ b/src/ol/control/control.js @@ -1,10 +1,10 @@ goog.provide('ol.control.Control'); -goog.require('goog.Disposable'); goog.require('goog.array'); goog.require('goog.dom'); goog.require('goog.events'); goog.require('ol.MapEventType'); +goog.require('ol.Object'); @@ -13,7 +13,7 @@ goog.require('ol.MapEventType'); * (buttons) or to show annotations (status bars). * * @constructor - * @extends {goog.Disposable} + * @extends {ol.Object} * @implements {oli.control.Control} * @param {ol.control.ControlOptions} options Control options. */ @@ -50,7 +50,7 @@ ol.control.Control = function(options) { } }; -goog.inherits(ol.control.Control, goog.Disposable); +goog.inherits(ol.control.Control, ol.Object); /** From 9d632177785a794b0ff7a8a5d71af29ed11700cd Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 19 Jun 2013 17:00:00 +0200 Subject: [PATCH 2/4] Add 'units' property to ol.control.ScaleLine --- examples/scale-line.html | 5 ++ examples/scale-line.js | 12 ++-- src/ol/control/scalelinecontrol.js | 101 ++++++++++++++++++++++------- 3 files changed, 90 insertions(+), 28 deletions(-) diff --git a/examples/scale-line.html b/examples/scale-line.html index 045b3c989c..099e75a227 100644 --- a/examples/scale-line.html +++ b/examples/scale-line.html @@ -30,6 +30,11 @@
+
diff --git a/examples/scale-line.js b/examples/scale-line.js index d916320123..52fa92e496 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -2,17 +2,17 @@ goog.require('ol.Map'); goog.require('ol.RendererHints'); goog.require('ol.View2D'); goog.require('ol.control.ScaleLine'); -goog.require('ol.control.ScaleLineUnits'); goog.require('ol.control.defaults'); +goog.require('ol.dom.Input'); goog.require('ol.layer.TileLayer'); goog.require('ol.source.OSM'); +var control = new ol.control.ScaleLine(); + var map = new ol.Map({ controls: ol.control.defaults({}, [ - new ol.control.ScaleLine({ - units: ol.control.ScaleLineUnits.IMPERIAL - }) + control ]), layers: [ new ol.layer.TileLayer({ @@ -26,3 +26,7 @@ var map = new ol.Map({ zoom: 2 }) }); + + +var units = new ol.dom.Input(document.getElementById('units')); +units.bindTo('value', control, 'units'); diff --git a/src/ol/control/scalelinecontrol.js b/src/ol/control/scalelinecontrol.js index 7c3d76c913..3e2af66005 100644 --- a/src/ol/control/scalelinecontrol.js +++ b/src/ol/control/scalelinecontrol.js @@ -1,21 +1,32 @@ goog.provide('ol.control.ScaleLine'); +goog.provide('ol.control.ScaleLineProperty'); goog.provide('ol.control.ScaleLineUnits'); goog.require('goog.array'); goog.require('goog.asserts'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); +goog.require('goog.events'); goog.require('goog.math'); goog.require('goog.style'); -goog.require('ol.FrameState'); +goog.require('ol.Object'); goog.require('ol.ProjectionUnits'); goog.require('ol.TransformFunction'); +goog.require('ol.View2DState'); goog.require('ol.control.Control'); goog.require('ol.css'); goog.require('ol.proj'); goog.require('ol.sphere.NORMAL'); +/** + * @enum {string} + */ +ol.control.ScaleLineProperty = { + UNITS: 'units' +}; + + /** * @enum {string} */ @@ -71,16 +82,15 @@ ol.control.ScaleLine = function(opt_options) { /** * @private - * @type {number} + * @type {?ol.View2DState} */ - this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64; + this.view2DState_ = null; /** * @private - * @type {ol.control.ScaleLineUnits} + * @type {number} */ - this.units_ = goog.isDef(options.units) ? - options.units : ol.control.ScaleLineUnits.METRIC; + this.minWidth_ = goog.isDef(options.minWidth) ? options.minWidth : 64; /** * @private @@ -112,6 +122,12 @@ ol.control.ScaleLine = function(opt_options) { target: options.target }); + goog.events.listen( + this, ol.Object.getChangeEventType(ol.control.ScaleLineProperty.UNITS), + this.handleUnitsChanged_, false, this); + + this.setUnits(options.units || ol.control.ScaleLineUnits.METRIC); + }; goog.inherits(ol.control.ScaleLine, ol.control.Control); @@ -123,21 +139,60 @@ goog.inherits(ol.control.ScaleLine, ol.control.Control); ol.control.ScaleLine.LEADING_DIGITS = [1, 2, 5]; +/** + * @return {ol.control.ScaleLineUnits|undefined} units. + */ +ol.control.ScaleLine.prototype.getUnits = function() { + return /** @type {ol.control.ScaleLineUnits|undefined} */ ( + this.get(ol.control.ScaleLineProperty.UNITS)); +}; +goog.exportProperty( + ol.control.ScaleLine.prototype, + 'getUnits', + ol.control.ScaleLine.prototype.getUnits); + + /** * @inheritDoc */ ol.control.ScaleLine.prototype.handleMapPostrender = function(mapEvent) { - this.updateElement_(mapEvent.frameState); + var frameState = mapEvent.frameState; + if (goog.isNull(frameState)) { + this.view2DState_ = null; + } else { + this.view2DState_ = frameState.view2DState; + } + this.updateElement_(); }; /** - * @param {?ol.FrameState} frameState Frame state. * @private */ -ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { +ol.control.ScaleLine.prototype.handleUnitsChanged_ = function() { + this.updateElement_(); +}; - if (goog.isNull(frameState)) { + +/** + * @param {ol.control.ScaleLineUnits} units Units. + */ +ol.control.ScaleLine.prototype.setUnits = function(units) { + this.set(ol.control.ScaleLineProperty.UNITS, units); +}; +goog.exportProperty( + ol.control.ScaleLine.prototype, + 'setUnits', + ol.control.ScaleLine.prototype.setUnits); + + +/** + * @private + */ +ol.control.ScaleLine.prototype.updateElement_ = function() { + var view2DState = this.view2DState_; + + if (goog.isNull(view2DState)) { if (this.renderedVisible_) { goog.style.showElement(this.element_, false); this.renderedVisible_ = false; @@ -145,7 +200,6 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { return; } - var view2DState = frameState.view2DState; var center = view2DState.center; var projection = view2DState.projection; var pointResolution = @@ -153,9 +207,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { var projectionUnits = projection.getUnits(); var cosLatitude; + var units = this.getUnits(); if (projectionUnits == ol.ProjectionUnits.DEGREES && - (this.units_ == ol.control.ScaleLineUnits.METRIC || - this.units_ == ol.control.ScaleLineUnits.IMPERIAL)) { + (units == ol.control.ScaleLineUnits.METRIC || + units == ol.control.ScaleLineUnits.IMPERIAL)) { // Convert pointResolution from degrees to meters this.toEPSG4326_ = null; @@ -165,7 +220,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { } else if ((projectionUnits == ol.ProjectionUnits.FEET || projectionUnits == ol.ProjectionUnits.METERS) && - this.units_ == ol.control.ScaleLineUnits.DEGREES) { + units == ol.control.ScaleLineUnits.DEGREES) { // Convert pointResolution from meters or feet to degrees if (goog.isNull(this.toEPSG4326_)) { @@ -181,21 +236,19 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { projectionUnits = ol.ProjectionUnits.DEGREES; } else { - this.toEPSG4326_ = null; - } goog.asserts.assert( - ((this.units_ == ol.control.ScaleLineUnits.METRIC || - this.units_ == ol.control.ScaleLineUnits.IMPERIAL) && + ((units == ol.control.ScaleLineUnits.METRIC || + units == ol.control.ScaleLineUnits.IMPERIAL) && projectionUnits == ol.ProjectionUnits.METERS) || - (this.units_ == ol.control.ScaleLineUnits.DEGREES && + (units == ol.control.ScaleLineUnits.DEGREES && projectionUnits == ol.ProjectionUnits.DEGREES)); var nominalCount = this.minWidth_ * pointResolution; var suffix = ''; - if (this.units_ == ol.control.ScaleLineUnits.DEGREES) { + if (units == ol.control.ScaleLineUnits.DEGREES) { if (nominalCount < 1 / 60) { suffix = '\u2033'; // seconds pointResolution *= 3600; @@ -205,7 +258,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { } else { suffix = '\u00b0'; // degrees } - } else if (this.units_ == ol.control.ScaleLineUnits.IMPERIAL) { + } else if (units == ol.control.ScaleLineUnits.IMPERIAL) { if (nominalCount < 0.9144) { suffix = 'in'; pointResolution /= 0.0254; @@ -216,10 +269,10 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { suffix = 'mi'; pointResolution /= 1609.344; } - } else if (this.units_ == ol.control.ScaleLineUnits.NAUTICAL) { + } else if (units == ol.control.ScaleLineUnits.NAUTICAL) { pointResolution /= 1852; suffix = 'nm'; - } else if (this.units_ == ol.control.ScaleLineUnits.METRIC) { + } else if (units == ol.control.ScaleLineUnits.METRIC) { if (nominalCount < 1) { suffix = 'mm'; pointResolution *= 1000; @@ -229,7 +282,7 @@ ol.control.ScaleLine.prototype.updateElement_ = function(frameState) { suffix = 'km'; pointResolution /= 1000; } - } else if (this.units_ == ol.control.ScaleLineUnits.US) { + } else if (units == ol.control.ScaleLineUnits.US) { if (nominalCount < 0.9144) { suffix = 'in'; pointResolution *= 39.37; From 22adf354e28b163cc0ba3b044d3f66747d41d775 Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Thu, 20 Jun 2013 11:56:49 +0200 Subject: [PATCH 3/4] Add 'projection' and 'coordinateFormat' to ol.control.MousePosition --- examples/mouse-position.html | 21 +++-- examples/mouse-position.js | 15 +++- src/ol/control/mousepositioncontrol.exports | 2 - src/ol/control/mousepositioncontrol.js | 90 ++++++++++++++++----- 4 files changed, 99 insertions(+), 29 deletions(-) diff --git a/examples/mouse-position.html b/examples/mouse-position.html index 620b8e5544..6424cac8ca 100644 --- a/examples/mouse-position.html +++ b/examples/mouse-position.html @@ -30,11 +30,6 @@
- -
@@ -48,7 +43,23 @@
mouse-position, openstreetmap
+
+
 
+
+ +
+
+
+ + + + +
+
diff --git a/examples/mouse-position.js b/examples/mouse-position.js index 848b002d4b..9e4fed51ef 100644 --- a/examples/mouse-position.js +++ b/examples/mouse-position.js @@ -4,7 +4,9 @@ goog.require('ol.View2D'); goog.require('ol.control.MousePosition'); goog.require('ol.control.defaults'); goog.require('ol.coordinate'); +goog.require('ol.dom.Input'); goog.require('ol.layer.TileLayer'); +goog.require('ol.proj'); goog.require('ol.source.OSM'); var control = new ol.control.MousePosition({ @@ -32,6 +34,13 @@ var map = new ol.Map({ }) }); -document.getElementById('projection').addEventListener('change', function() { - control.setProjection(this.value); -}, false); +var projection = new ol.dom.Input(document.getElementById('projection')); +projection.on('change:value', function() { + control.setProjection(ol.proj.get(projection.getValue())); +}); + +var precision = new ol.dom.Input(document.getElementById('precision')); +precision.on('change:value', function() { + var format = ol.coordinate.createStringXY(precision.getValue()); + control.setCoordinateFormat(format); +}); diff --git a/src/ol/control/mousepositioncontrol.exports b/src/ol/control/mousepositioncontrol.exports index 602113910e..925d6c0720 100644 --- a/src/ol/control/mousepositioncontrol.exports +++ b/src/ol/control/mousepositioncontrol.exports @@ -1,4 +1,2 @@ @exportClass ol.control.MousePosition ol.control.MousePositionOptions @exportProperty ol.control.MousePosition.prototype.setMap -@exportProperty ol.control.MousePosition.prototype.getProjection -@exportProperty ol.control.MousePosition.prototype.setProjection diff --git a/src/ol/control/mousepositioncontrol.js b/src/ol/control/mousepositioncontrol.js index 2be4b2d3dd..b4b62d3c07 100644 --- a/src/ol/control/mousepositioncontrol.js +++ b/src/ol/control/mousepositioncontrol.js @@ -10,6 +10,7 @@ goog.require('goog.events'); goog.require('goog.events.EventType'); goog.require('goog.style'); goog.require('ol.CoordinateFormatType'); +goog.require('ol.Object'); goog.require('ol.Pixel'); goog.require('ol.Projection'); goog.require('ol.TransformFunction'); @@ -17,6 +18,15 @@ goog.require('ol.control.Control'); goog.require('ol.proj'); +/** + * @enum {string} + */ +ol.control.MousePositionProperty = { + PROJECTION: 'projection', + COORDINATE_FORMAT: 'coordinateFormat' +}; + + /** * Create a new control to show the position of the mouse in the map's @@ -53,17 +63,16 @@ ol.control.MousePosition = function(opt_options) { target: options.target }); - /** - * @private - * @type {ol.Projection} - */ - this.projection_ = ol.proj.get(options.projection); + goog.events.listen(this, + ol.Object.getChangeEventType(ol.control.MousePositionProperty.PROJECTION), + this.handleProjectionChanged_, false, this); - /** - * @private - * @type {ol.CoordinateFormatType|undefined} - */ - this.coordinateFormat_ = options.coordinateFormat; + if (goog.isDef(options.coordinateFormat)) { + this.setCoordinateFormat(options.coordinateFormat); + } + if (goog.isDef(options.projection)) { + this.setProjection(ol.proj.get(options.projection)); + } /** * @private @@ -118,11 +127,37 @@ ol.control.MousePosition.prototype.handleMapPostrender = function(mapEvent) { /** - * @return {ol.Projection} projection. + * @private + */ +ol.control.MousePosition.prototype.handleProjectionChanged_ = function() { + this.transform_ = null; +}; + + +/** + * @return {ol.CoordinateFormatType|undefined} projection. + */ +ol.control.MousePosition.prototype.getCoordinateFormat = function() { + return /** @type {ol.CoordinateFormatType|undefined} */ ( + this.get(ol.control.MousePositionProperty.COORDINATE_FORMAT)); +}; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'getCoordinateFormat', + ol.control.MousePosition.prototype.getCoordinateFormat); + + +/** + * @return {ol.Projection|undefined} projection. */ ol.control.MousePosition.prototype.getProjection = function() { - return this.projection_; + return /** @type {ol.Projection|undefined} */ ( + this.get(ol.control.MousePositionProperty.PROJECTION)); }; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'getProjection', + ol.control.MousePosition.prototype.getProjection); /** @@ -166,12 +201,27 @@ ol.control.MousePosition.prototype.setMap = function(map) { /** - * @param {ol.ProjectionLike} projection Projection. + * @param {ol.CoordinateFormatType} format Coordinate format. + */ +ol.control.MousePosition.prototype.setCoordinateFormat = function(format) { + this.set(ol.control.MousePositionProperty.COORDINATE_FORMAT, format); +}; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'setCoordinateFormat', + ol.control.MousePosition.prototype.setCoordinateFormat); + + +/** + * @param {ol.Projection} projection Projection. */ ol.control.MousePosition.prototype.setProjection = function(projection) { - this.projection_ = ol.proj.get(projection); - this.transform_ = null; + this.set(ol.control.MousePositionProperty.PROJECTION, projection); }; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'setProjection', + ol.control.MousePosition.prototype.setProjection); /** @@ -182,9 +232,10 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) { var html = this.undefinedHTML_; if (!goog.isNull(pixel)) { if (goog.isNull(this.transform_)) { - if (!goog.isNull(this.projection_)) { + var projection = this.getProjection(); + if (goog.isDef(projection)) { this.transform_ = ol.proj.getTransformFromProjections( - this.mapProjection_, this.projection_); + this.mapProjection_, projection); } else { this.transform_ = ol.proj.identityTransform; } @@ -193,8 +244,9 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) { var coordinate = map.getCoordinateFromPixel(pixel); if (!goog.isNull(coordinate)) { this.transform_(coordinate, coordinate); - if (goog.isDef(this.coordinateFormat_)) { - html = this.coordinateFormat_(coordinate); + var coordinateFormat = this.getCoordinateFormat(); + if (goog.isDef(coordinateFormat)) { + html = coordinateFormat(coordinate); } else { html = coordinate.toString(); } From 4217c5e47a6b71e8082ee7a87dd78a99c00acd8e Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Thu, 20 Jun 2013 16:56:59 +0200 Subject: [PATCH 4/4] Meaningful variable names --- examples/mouse-position.js | 18 +++++++++--------- examples/scale-line.js | 8 ++++---- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/mouse-position.js b/examples/mouse-position.js index 9e4fed51ef..d6c262d1f2 100644 --- a/examples/mouse-position.js +++ b/examples/mouse-position.js @@ -9,7 +9,7 @@ goog.require('ol.layer.TileLayer'); goog.require('ol.proj'); goog.require('ol.source.OSM'); -var control = new ol.control.MousePosition({ +var mousePositionControl = new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326', // comment the following two lines to have the mouse position @@ -20,7 +20,7 @@ var control = new ol.control.MousePosition({ }); var map = new ol.Map({ - controls: ol.control.defaults({}, [control]), + controls: ol.control.defaults({}, [mousePositionControl]), layers: [ new ol.layer.TileLayer({ source: new ol.source.OSM() @@ -34,13 +34,13 @@ var map = new ol.Map({ }) }); -var projection = new ol.dom.Input(document.getElementById('projection')); -projection.on('change:value', function() { - control.setProjection(ol.proj.get(projection.getValue())); +var projectionSelect = new ol.dom.Input(document.getElementById('projection')); +projectionSelect.on('change:value', function() { + mousePositionControl.setProjection(ol.proj.get(projectionSelect.getValue())); }); -var precision = new ol.dom.Input(document.getElementById('precision')); -precision.on('change:value', function() { - var format = ol.coordinate.createStringXY(precision.getValue()); - control.setCoordinateFormat(format); +var precisionInput = new ol.dom.Input(document.getElementById('precision')); +precisionInput.on('change:value', function() { + var format = ol.coordinate.createStringXY(precisionInput.getValue()); + mousePositionControl.setCoordinateFormat(format); }); diff --git a/examples/scale-line.js b/examples/scale-line.js index 52fa92e496..dffe53948d 100644 --- a/examples/scale-line.js +++ b/examples/scale-line.js @@ -8,11 +8,11 @@ goog.require('ol.layer.TileLayer'); goog.require('ol.source.OSM'); -var control = new ol.control.ScaleLine(); +var scaleLineControl = new ol.control.ScaleLine(); var map = new ol.Map({ controls: ol.control.defaults({}, [ - control + scaleLineControl ]), layers: [ new ol.layer.TileLayer({ @@ -28,5 +28,5 @@ var map = new ol.Map({ }); -var units = new ol.dom.Input(document.getElementById('units')); -units.bindTo('value', control, 'units'); +var unitsSelect = new ol.dom.Input(document.getElementById('units')); +unitsSelect.bindTo('value', scaleLineControl, 'units');