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

Make ZoomSlider use View2D value/resolution funcs

Browse Source
This commit is contained in:
Éric Lemoine
2013-04-08 12:51:14 +02:00
parent 6163f05b2b
commit 516f21eb17
3 changed files with 13 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
examples/zoomslider.js
View File

@@ -12,12 +12,9 @@ goog.require('ol.source.MapQuestOpenAerial');
* @return {ol.Map} The ol.Map instance.
*/
var createMap = function(divId) {
var source, layer, map, zoomslider, resolutions, minRes, maxRes;
var source, layer, map, zoomslider, resolutions;
source = new ol.source.MapQuestOpenAerial();
// These are the min and max resolutions of MapQuestOpenAerial
minRes = 0.5971642834779395;
maxRes = 156543.03392804097;
layer = new ol.layer.TileLayer({
source: source
});
@@ -30,8 +27,6 @@ var createMap = function(divId) {
})
});
zoomslider = new ol.control.ZoomSlider({
minResolution: minRes,
maxResolution: maxRes,
map: map
});
return map;

72
src/ol/control/zoomslidercontrol.js
View File

@@ -5,7 +5,6 @@
goog.provide('ol.control.ZoomSlider');
goog.require('goog.array');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.events');
@@ -26,38 +25,6 @@ goog.require('ol.css');
* @param {ol.control.ZoomSliderOptions} options Zoom slider options.
*/
ol.control.ZoomSlider = function(options) {
// FIXME these should be read out from a map if not given, and only then
// fallback to the constants if they weren't defined on the map.
/**
* The minimum resolution that one can set with this control.
*
* @type {number}
* @private
*/
this.maxResolution_ = goog.isDef(options.maxResolution) ?
options.maxResolution : ol.control.ZoomSlider.DEFAULT_MAX_RESOLUTION;
/**
* The maximum resolution that one can set with this control.
*
* @type {number}
* @private
*/
this.minResolution_ = goog.isDef(options.minResolution) ?
options.minResolution : ol.control.ZoomSlider.DEFAULT_MIN_RESOLUTION;
goog.asserts.assert(
this.minResolution_ < this.maxResolution_,
'minResolution must be smaller than maxResolution.'
);
/**
* The range of resolutions we are handling in this slider.
*
* @type {number}
* @private
*/
this.range_ = this.maxResolution_ - this.minResolution_;
/**
* Will hold the current resolution of the view.
@@ -127,26 +94,6 @@ ol.control.ZoomSlider.CSS_CLASS_THUMB =
ol.control.ZoomSlider.CSS_CLASS_CONTAINER + '-thumb';
/**
* The default value for minResolution_ when the control isn't instanciated with
* an explicit value. The default value is the resolution of the standard OSM
* tiles at zoomlevel 18.
*
* @const {number}
*/
ol.control.ZoomSlider.DEFAULT_MIN_RESOLUTION = 0.5971642833948135;
/**
* The default value for maxResolution_ when the control isn't instanciated with
* an explicit value. The default value is the resolution of the standard OSM
* tiles at zoomlevel 0.
*
* @const {number}
*/
ol.control.ZoomSlider.DEFAULT_MAX_RESOLUTION = 156543.0339;
/**
* @inheritDoc
*/
@@ -262,13 +209,14 @@ ol.control.ZoomSlider.prototype.amountDragged_ = function(e) {
* been dragged from its minimum.
*
* @param {number} amount The amount the thumb has been dragged.
* @return {number} a resolution between this.minResolution_ and
* this.maxResolution_.
* @return {number} The corresponding resolution.
* @private
*/
ol.control.ZoomSlider.prototype.resolutionForAmount_ = function(amount) {
var saneAmount = goog.math.clamp(amount, 0, 1);
return this.minResolution_ + this.range_ * saneAmount;
// FIXME do we really need this affine transform?
amount = (goog.math.clamp(amount, 0, 1) - 1) * -1;
var fn = this.getMap().getView().getResolutionForValueFunction();
return fn(amount);
};
@@ -277,12 +225,14 @@ ol.control.ZoomSlider.prototype.resolutionForAmount_ = function(amount) {
* given resolution.
*
* @param {number} res The resolution to get the amount for.
* @return {number} an amount between 0 and 1.
* @return {number} The corresponding value (between 0 and 1).
* @private
*/
ol.control.ZoomSlider.prototype.amountForResolution_ = function(res) {
var saneRes = goog.math.clamp(res, this.minResolution_, this.maxResolution_);
return (saneRes - this.minResolution_) / this.range_;
var fn = this.getMap().getView().getValueForResolutionFunction();
var value = fn(res);
// FIXME do we really need this affine transform?
return (value - 1) * -1;
};
@@ -298,8 +248,6 @@ ol.control.ZoomSlider.prototype.handleSliderChange_ = function(e) {
var map = this.getMap(),
amountDragged = this.amountDragged_(e),
res = this.resolutionForAmount_(amountDragged);
goog.asserts.assert(res >= this.minResolution_ && res <= this.maxResolution_,
'calculated new resolution is in allowed bounds.');
if (res !== this.currentResolution_) {
this.currentResolution_ = res;
map.getView().setResolution(res);

49
test/spec/ol/control/zoomslider.test.js
View File

@@ -10,8 +10,6 @@ describe('ol.control.ZoomSlider', function() {
target: target
});
zoomslider = new ol.control.ZoomSlider({
minResolution: 5000,
maxResolution: 100000,
map: map
});
});
@@ -25,43 +23,6 @@ describe('ol.control.ZoomSlider', function() {
target = null;
});
describe('configuration & defaults', function() {
it('has valid defaults for min and maxresolution', function() {
var zoomslider,
expectedMin = 0.5971642833948135,
expectedMax = 156543.0339,
expectedRange = expectedMax - expectedMin;
expect(function() {
zoomslider = new ol.control.ZoomSlider({});
}).not.to.throwException();
expect(zoomslider.minResolution_).to.be(expectedMin);
expect(zoomslider.maxResolution_).to.be(expectedMax);
expect(zoomslider.range_).to.be(expectedRange);
});
it('throws exception when configured with wrong resolutions', function() {
expect(function() {
zoomslider = new ol.control.ZoomSlider({
minResolution: 50,
maxResolution: 0
});
}).to.throwException();
});
it('can be configured with valid resolutions', function() {
expect(function() {
zoomslider = new ol.control.ZoomSlider({
minResolution: 790,
maxResolution: 91000
});
}).not.to.throwException();
expect(zoomslider.minResolution_).to.be(790);
expect(zoomslider.maxResolution_).to.be(91000);
expect(zoomslider.range_).to.be(90210);
});
});
describe('DOM creation', function() {
it('creates the expected DOM elements', function() {
var zoomSliderContainers = goog.dom.getElementsByClass(
@@ -103,10 +64,7 @@ describe('ol.control.ZoomSlider', function() {
describe('#direction_', function() {
it('is horizontal for wide containers', function() {
var control = new ol.control.ZoomSlider({
minResolution: 5000,
maxResolution: 100000
});
var control = new ol.control.ZoomSlider({});
control.element.style.width = '1000px';
control.element.style.height = '10px';
control.setMap(map);
@@ -118,10 +76,7 @@ describe('ol.control.ZoomSlider', function() {
});
it('is vertical for tall containers', function() {
var control = new ol.control.ZoomSlider({
minResolution: 5000,
maxResolution: 100000
});
var control = new ol.control.ZoomSlider({});
control.element.style.width = '10px';
control.element.style.height = '1000px';