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;