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

Handle minZoom in getZoom and setZoom

Browse Source
This commit is contained in:
Tim Schaub
2014-05-15 17:27:53 -06:00
parent 815f5b38c8
commit 3793f33acf
5 changed files with 177 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
examples/zoom-constrained.html Normal file
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Zoom Constrained Example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Zoom constrained example</h4>
<p id="shortdesc">Example of a zoom constrained view.</p>
<div id="docs">
<p>This map has a view that is constrained between zoom levels 9 and 13. This is done using the <code>minZoom</code> and <code>maxZoom</code> view options.</p>
<p>See the <a href="zoom-constrained.js" target="_blank">zoom-constrained.js source</a> for details.</p>
</div>
<div id="tags">bing, zoom, minZoom, maxZoom</div>
</div>
</div>
</div>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=zoom-constrained" type="text/javascript"></script>
</body>
</html>

23
examples/zoom-constrained.js Normal file
View File

@@ -0,0 +1,23 @@
goog.require('ol.Map');
goog.require('ol.View2D');
goog.require('ol.layer.Tile');
goog.require('ol.source.BingMaps');
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial'
})
})
],
view: new ol.View2D({
center: [-13553864, 5918250],
zoom: 11,
minZoom: 9,
maxZoom: 13
})
});

8
src/ol/ol.js
View File

@@ -16,11 +16,19 @@ ol.BUFFER_REPLACE_UNUSED_ENTRIES_WITH_NANS = goog.DEBUG;
/** /**
* TODO: rename this to something having to do with tile grids
* see https://github.com/openlayers/ol3/issues/2076
* @define {number} Default maximum zoom for default tile grids. * @define {number} Default maximum zoom for default tile grids.
*/ */
ol.DEFAULT_MAX_ZOOM = 42; ol.DEFAULT_MAX_ZOOM = 42;
/**
* @define {number} Default min zoom level for the map view. Default is `0`.
*/
ol.DEFAULT_MIN_ZOOM = 0;
/** /**
* @define {number} Default high water mark. * @define {number} Default high water mark.
*/ */

53
src/ol/view2d.js
View File

@@ -116,6 +116,12 @@ ol.View2D = function(opt_options) {
*/ */
this.minResolution_ = resolutionConstraintInfo.minResolution; this.minResolution_ = resolutionConstraintInfo.minResolution;
/**
* @private
* @type {number}
*/
this.minZoom_ = resolutionConstraintInfo.minZoom;
var centerConstraint = ol.View2D.createCenterConstraint_(options); var centerConstraint = ol.View2D.createCenterConstraint_(options);
var resolutionConstraint = resolutionConstraintInfo.constraint; var resolutionConstraint = resolutionConstraintInfo.constraint;
var rotationConstraint = ol.View2D.createRotationConstraint_(options); var rotationConstraint = ol.View2D.createRotationConstraint_(options);
@@ -131,7 +137,7 @@ ol.View2D = function(opt_options) {
values[ol.View2DProperty.RESOLUTION] = options.resolution; values[ol.View2DProperty.RESOLUTION] = options.resolution;
} else if (goog.isDef(options.zoom)) { } else if (goog.isDef(options.zoom)) {
values[ol.View2DProperty.RESOLUTION] = this.constrainResolution( values[ol.View2DProperty.RESOLUTION] = this.constrainResolution(
this.maxResolution_, options.zoom); this.maxResolution_, options.zoom - this.minZoom_);
} }
values[ol.View2DProperty.ROTATION] = values[ol.View2DProperty.ROTATION] =
goog.isDef(options.rotation) ? options.rotation : 0; goog.isDef(options.rotation) ? options.rotation : 0;
@@ -396,7 +402,7 @@ ol.View2D.prototype.getView3D = function() {
* @todo api * @todo api
*/ */
ol.View2D.prototype.getZoom = function() { ol.View2D.prototype.getZoom = function() {
var zoom; var offset;
var resolution = this.getResolution(); var resolution = this.getResolution();
if (goog.isDef(resolution)) { if (goog.isDef(resolution)) {
@@ -404,14 +410,14 @@ ol.View2D.prototype.getZoom = function() {
do { do {
res = this.constrainResolution(this.maxResolution_, z); res = this.constrainResolution(this.maxResolution_, z);
if (res == resolution) { if (res == resolution) {
zoom = z; offset = z;
break; break;
} }
++z; ++z;
} while (res > this.minResolution_); } while (res > this.minResolution_);
} }
return zoom; return goog.isDef(offset) ? this.minZoom_ + offset : offset;
}; };
@@ -621,7 +627,8 @@ goog.exportProperty(
* @todo api * @todo api
*/ */
ol.View2D.prototype.setZoom = function(zoom) { ol.View2D.prototype.setZoom = function(zoom) {
var resolution = this.constrainResolution(this.maxResolution_, zoom, 0); var resolution = this.constrainResolution(
this.maxResolution_, zoom - this.minZoom_, 0);
this.setResolution(resolution); this.setResolution(resolution);
}; };
@@ -650,6 +657,21 @@ ol.View2D.createResolutionConstraint_ = function(options) {
var resolutionConstraint; var resolutionConstraint;
var maxResolution; var maxResolution;
var minResolution; var minResolution;
// TODO: move these to be ol constants
// see https://github.com/openlayers/ol3/issues/2076
var defaultMaxZoom = 28;
var defaultZoomFactor = 2;
var minZoom = goog.isDef(options.minZoom) ?
options.minZoom : ol.DEFAULT_MIN_ZOOM;
var maxZoom = goog.isDef(options.maxZoom) ?
options.maxZoom : defaultMaxZoom;
var zoomFactor = goog.isDef(options.zoomFactor) ?
options.zoomFactor : defaultZoomFactor;
if (goog.isDef(options.resolutions)) { if (goog.isDef(options.resolutions)) {
var resolutions = options.resolutions; var resolutions = options.resolutions;
maxResolution = resolutions[0]; maxResolution = resolutions[0];
@@ -657,12 +679,6 @@ ol.View2D.createResolutionConstraint_ = function(options) {
resolutionConstraint = ol.ResolutionConstraint.createSnapToResolutions( resolutionConstraint = ol.ResolutionConstraint.createSnapToResolutions(
resolutions); resolutions);
} else { } else {
// TODO: move these to be ol constants
// see https://github.com/openlayers/ol3/issues/2076
var defaultMaxZoom = 28;
var defaultMinZoom = 0;
var defaultZoomFactor = 2;
// calculate the default min and max resolution // calculate the default min and max resolution
var projection = options.projection; var projection = options.projection;
var extent = ol.proj.createProjection(projection, 'EPSG:3857').getExtent(); var extent = ol.proj.createProjection(projection, 'EPSG:3857').getExtent();
@@ -673,19 +689,10 @@ ol.View2D.createResolutionConstraint_ = function(options) {
Math.max(ol.extent.getWidth(extent), ol.extent.getHeight(extent)); Math.max(ol.extent.getWidth(extent), ol.extent.getHeight(extent));
var defaultMaxResolution = size / ol.DEFAULT_TILE_SIZE / Math.pow( var defaultMaxResolution = size / ol.DEFAULT_TILE_SIZE / Math.pow(
defaultZoomFactor, defaultMinZoom); defaultZoomFactor, ol.DEFAULT_MIN_ZOOM);
var defaultMinResolution = defaultMaxResolution / Math.pow( var defaultMinResolution = defaultMaxResolution / Math.pow(
defaultZoomFactor, defaultMaxZoom - defaultMinZoom); defaultZoomFactor, defaultMaxZoom - ol.DEFAULT_MIN_ZOOM);
var minZoom = goog.isDef(options.minZoom) ?
options.minZoom : defaultMinZoom;
var maxZoom = goog.isDef(options.maxZoom) ?
options.maxZoom : defaultMaxZoom;
var zoomFactor = goog.isDef(options.zoomFactor) ?
options.zoomFactor : defaultZoomFactor;
// user provided maxResolution takes precedence // user provided maxResolution takes precedence
maxResolution = options.maxResolution; maxResolution = options.maxResolution;
@@ -718,7 +725,7 @@ ol.View2D.createResolutionConstraint_ = function(options) {
zoomFactor, maxResolution, maxZoom - minZoom); zoomFactor, maxResolution, maxZoom - minZoom);
} }
return {constraint: resolutionConstraint, maxResolution: maxResolution, return {constraint: resolutionConstraint, maxResolution: maxResolution,
minResolution: minResolution}; minResolution: minResolution, minZoom: minZoom};
}; };

64
test/spec/ol/view2d.test.js
View File

@@ -282,6 +282,70 @@ describe('ol.View2D', function() {
}); });
}); });
describe('#getZoom() - constrained', function() {
it('returns correct zoom levels', function() {
var view = new ol.View2D({
minZoom: 10,
maxZoom: 20
});
view.setZoom(5);
expect(view.getZoom()).to.be(10);
view.setZoom(10);
expect(view.getZoom()).to.be(10);
view.setZoom(15);
expect(view.getZoom()).to.be(15);
view.setZoom(20);
expect(view.getZoom()).to.be(20);
view.setZoom(25);
expect(view.getZoom()).to.be(20);
});
});
describe('#getZoom() - custom ol.DEFAULT_MIN_ZOOM', function() {
var defaultMinZoom = ol.DEFAULT_MIN_ZOOM;
afterEach(function() {
ol.DEFAULT_MIN_ZOOM = defaultMinZoom;
});
it('respects custom ol.DEFAULT_MIN_ZOOM', function() {
ol.DEFAULT_MIN_ZOOM = 2;
var view = new ol.View2D();
view.setZoom(1);
expect(view.getZoom()).to.be(2);
view.setZoom(2);
expect(view.getZoom()).to.be(2);
view.setZoom(3);
expect(view.getZoom()).to.be(3);
});
});
describe('#getZoom() - overspecified', function() {
it('gives maxResolution precedence over minZoom', function() {
var view = new ol.View2D({
maxResolution: 100,
minZoom: 2 // this should get ignored
});
view.setResolution(100);
expect(view.getZoom()).to.be(0);
view.setZoom(0);
expect(view.getResolution()).to.be(100);
});
});
describe('fitGeometry', function() { describe('fitGeometry', function() {
var view; var view;
beforeEach(function() { beforeEach(function() {