UNPKG

openlayers

Version:

Build tools and sources for developing OpenLayers based mapping applications

286 lines (244 loc) 7.06 kB
goog.provide('ol.control.ScaleLine'); goog.require('ol'); goog.require('ol.Object'); goog.require('ol.asserts'); goog.require('ol.control.Control'); goog.require('ol.css'); goog.require('ol.events'); goog.require('ol.proj'); goog.require('ol.proj.Units'); /** * @classdesc * A control displaying rough y-axis distances, calculated for the center of the * viewport. For conformal projections (e.g. EPSG:3857, the default view * projection in OpenLayers), the scale is valid for all directions. * No scale line will be shown when the y-axis distance of a pixel at the * viewport center cannot be calculated in the view projection. * By default the scale line will show in the bottom left portion of the map, * but this can be changed by using the css selector `.ol-scale-line`. * * @constructor * @extends {ol.control.Control} * @param {olx.control.ScaleLineOptions=} opt_options Scale line options. * @api stable */ ol.control.ScaleLine = function(opt_options) { var options = opt_options ? opt_options : {}; var className = options.className !== undefined ? options.className : 'ol-scale-line'; /** * @private * @type {Element} */ this.innerElement_ = document.createElement('DIV'); this.innerElement_.className = className + '-inner'; /** * @private * @type {Element} */ this.element_ = document.createElement('DIV'); this.element_.className = className + ' ' + ol.css.CLASS_UNSELECTABLE; this.element_.appendChild(this.innerElement_); /** * @private * @type {?olx.ViewState} */ this.viewState_ = null; /** * @private * @type {number} */ this.minWidth_ = options.minWidth !== undefined ? options.minWidth : 64; /** * @private * @type {boolean} */ this.renderedVisible_ = false; /** * @private * @type {number|undefined} */ this.renderedWidth_ = undefined; /** * @private * @type {string} */ this.renderedHTML_ = ''; var render = options.render ? options.render : ol.control.ScaleLine.render; ol.control.Control.call(this, { element: this.element_, render: render, target: options.target }); ol.events.listen( this, ol.Object.getChangeEventType(ol.control.ScaleLine.Property.UNITS), this.handleUnitsChanged_, this); this.setUnits(/** @type {ol.control.ScaleLine.Units} */ (options.units) || ol.control.ScaleLine.Units.METRIC); }; ol.inherits(ol.control.ScaleLine, ol.control.Control); /** * @const * @type {Array.<number>} */ ol.control.ScaleLine.LEADING_DIGITS = [1, 2, 5]; /** * Return the units to use in the scale line. * @return {ol.control.ScaleLine.Units|undefined} The units to use in the scale * line. * @observable * @api stable */ ol.control.ScaleLine.prototype.getUnits = function() { return /** @type {ol.control.ScaleLine.Units|undefined} */ ( this.get(ol.control.ScaleLine.Property.UNITS)); }; /** * Update the scale line element. * @param {ol.MapEvent} mapEvent Map event. * @this {ol.control.ScaleLine} * @api */ ol.control.ScaleLine.render = function(mapEvent) { var frameState = mapEvent.frameState; if (!frameState) { this.viewState_ = null; } else { this.viewState_ = frameState.viewState; } this.updateElement_(); }; /** * @private */ ol.control.ScaleLine.prototype.handleUnitsChanged_ = function() { this.updateElement_(); }; /** * Set the units to use in the scale line. * @param {ol.control.ScaleLine.Units} units The units to use in the scale line. * @observable * @api stable */ ol.control.ScaleLine.prototype.setUnits = function(units) { this.set(ol.control.ScaleLine.Property.UNITS, units); }; /** * @private */ ol.control.ScaleLine.prototype.updateElement_ = function() { var viewState = this.viewState_; if (!viewState) { if (this.renderedVisible_) { this.element_.style.display = 'none'; this.renderedVisible_ = false; } return; } var center = viewState.center; var projection = viewState.projection; var metersPerUnit = projection.getMetersPerUnit(); var pointResolution = ol.proj.getPointResolution(projection, viewState.resolution, center) * metersPerUnit; var nominalCount = this.minWidth_ * pointResolution; var suffix = ''; var units = this.getUnits(); if (units == ol.control.ScaleLine.Units.DEGREES) { var metersPerDegree = ol.proj.METERS_PER_UNIT[ol.proj.Units.DEGREES]; pointResolution /= metersPerDegree; if (nominalCount < metersPerDegree / 60) { suffix = '\u2033'; // seconds pointResolution *= 3600; } else if (nominalCount < metersPerDegree) { suffix = '\u2032'; // minutes pointResolution *= 60; } else { suffix = '\u00b0'; // degrees } } else if (units == ol.control.ScaleLine.Units.IMPERIAL) { if (nominalCount < 0.9144) { suffix = 'in'; pointResolution /= 0.0254; } else if (nominalCount < 1609.344) { suffix = 'ft'; pointResolution /= 0.3048; } else { suffix = 'mi'; pointResolution /= 1609.344; } } else if (units == ol.control.ScaleLine.Units.NAUTICAL) { pointResolution /= 1852; suffix = 'nm'; } else if (units == ol.control.ScaleLine.Units.METRIC) { if (nominalCount < 1) { suffix = 'mm'; pointResolution *= 1000; } else if (nominalCount < 1000) { suffix = 'm'; } else { suffix = 'km'; pointResolution /= 1000; } } else if (units == ol.control.ScaleLine.Units.US) { if (nominalCount < 0.9144) { suffix = 'in'; pointResolution *= 39.37; } else if (nominalCount < 1609.344) { suffix = 'ft'; pointResolution /= 0.30480061; } else { suffix = 'mi'; pointResolution /= 1609.3472; } } else { ol.asserts.assert(false, 33); // Invalid units } var i = 3 * Math.floor( Math.log(this.minWidth_ * pointResolution) / Math.log(10)); var count, width; while (true) { count = ol.control.ScaleLine.LEADING_DIGITS[((i % 3) + 3) % 3] * Math.pow(10, Math.floor(i / 3)); width = Math.round(count / pointResolution); if (isNaN(width)) { this.element_.style.display = 'none'; this.renderedVisible_ = false; return; } else if (width >= this.minWidth_) { break; } ++i; } var html = count + ' ' + suffix; if (this.renderedHTML_ != html) { this.innerElement_.innerHTML = html; this.renderedHTML_ = html; } if (this.renderedWidth_ != width) { this.innerElement_.style.width = width + 'px'; this.renderedWidth_ = width; } if (!this.renderedVisible_) { this.element_.style.display = ''; this.renderedVisible_ = true; } }; /** * @enum {string} * @api */ ol.control.ScaleLine.Property = { UNITS: 'units' }; /** * Units for the scale line. Supported values are `'degrees'`, `'imperial'`, * `'nautical'`, `'metric'`, `'us'`. * @enum {string} */ ol.control.ScaleLine.Units = { DEGREES: 'degrees', IMPERIAL: 'imperial', NAUTICAL: 'nautical', METRIC: 'metric', US: 'us' };