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

Merge pull request #2079 from tschaub/view-options

Browse Source 
Support zoom and resolution constrained views.
This commit is contained in:
Tim Schaub
2014-05-16 11:26:09 -06:00
parent 6185005c3f 3793f33acf
commit e17c8c79f9
6 changed files with 429 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/zoom-constrained.html
+52
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>
examples/zoom-constrained.js
+23
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
})
});
externs/olx.js
+35 -8
View File
@@ -351,7 +351,9 @@ olx.ProjectionOptions.prototype.global;
* constrainRotation: (boolean|number|undefined), * constrainRotation: (boolean|number|undefined),
* enableRotation: (boolean|undefined), * enableRotation: (boolean|undefined),
* extent: (ol.Extent|undefined), * extent: (ol.Extent|undefined),
* minResolution: (number|undefined),
* maxResolution: (number|undefined), * maxResolution: (number|undefined),
* minZoom: (number|undefined),
* maxZoom: (number|undefined), * maxZoom: (number|undefined),
* projection: ol.proj.ProjectionLike, * projection: ol.proj.ProjectionLike,
* resolution: (number|undefined), * resolution: (number|undefined),
@@ -400,23 +402,48 @@ olx.View2DOptions.prototype.extent;
/** /**
* The maximum resolution used to determine the resolution constraint. It is * The maximum resolution used to determine the resolution constraint. It is
* used together with `maxZoom` and `zoomFactor`. If unspecified it is * used together with `minResolution` (or `maxZoom`) and `zoomFactor`. If
* calculated in such a way that the projection's validity extent fits in a * unspecified it is calculated in such a way that the projection's validity
* 256x256 px tile. If the projection is Spherical Mercator (the default) then * extent fits in a 256x256 px tile. If the projection is Spherical Mercator
* `maxResolution` defaults to `40075016.68557849 / 256 = 156543.03392804097`. * (the default) then `maxResolution` defaults to `40075016.68557849 / 256 =
* 156543.03392804097`.
* @type {number|undefined} * @type {number|undefined}
*/ */
olx.View2DOptions.prototype.maxResolution; olx.View2DOptions.prototype.maxResolution;
/**
* The minimum resolution used to determine the resolution constraint. It is
* used together with `maxResolution` (or `minZoom`) and `zoomFactor`. If
* unspecified it is calculated assuming 29 zoom levels (with a factor of 2).
* If the projection is Spherical Mercator (the default) then `minResolution`
* defaults to `40075016.68557849 / 256 / Math.pow(2, 28) =
* 0.0005831682455839253`.
* @type {number|undefined}
*/
olx.View2DOptions.prototype.minResolution;
/** /**
* The maximum zoom level used to determine the resolution constraint. It is * The maximum zoom level used to determine the resolution constraint. It is
* used together with `maxResolution` and `zoomFactor`. Default is `28`. * used together with `minZoom` (or `maxResolution`) and `zoomFactor`. Default
* is `28`. Note that if `minResolution` is also provided, it is given
* precedence over `maxZoom`.
* @type {number|undefined} * @type {number|undefined}
*/ */
olx.View2DOptions.prototype.maxZoom; olx.View2DOptions.prototype.maxZoom;
/**
* The minimum zoom level used to determine the resolution constraint. It is
* used together with `maxZoom` (or `minResolution`) and `zoomFactor`. Default
* is `0`. Note that if `maxResolution` is also provided, it is given
* precedence over `minZoom`.
* @type {number|undefined}
*/
olx.View2DOptions.prototype.minZoom;
/** /**
* The projection. Default is `EPSG:3857` (Spherical Mercator). * The projection. Default is `EPSG:3857` (Spherical Mercator).
* @type {ol.proj.ProjectionLike} * @type {ol.proj.ProjectionLike}
@@ -436,7 +463,8 @@ olx.View2DOptions.prototype.resolution;
/** /**
* Resolutions to determine the resolution constraint. If set the * Resolutions to determine the resolution constraint. If set the
* `maxResolution`, `maxZoom` and `zoomFactor` options are ignored. * `maxResolution`, `minResolution`, `minZoom`, `maxZoom`, and `zoomFactor`
* options are ignored.
* @type {Array.<number>|undefined} * @type {Array.<number>|undefined}
*/ */
olx.View2DOptions.prototype.resolutions; olx.View2DOptions.prototype.resolutions;
@@ -460,8 +488,7 @@ olx.View2DOptions.prototype.zoom;
/** /**
* The zoom factor used to determine the resolution constraint. Used together * The zoom factor used to determine the resolution constraint. Default is `2`.
* with `maxResolution` and `maxZoom`. Default is `2`.
* @type {number|undefined} * @type {number|undefined}
*/ */
olx.View2DOptions.prototype.zoomFactor; olx.View2DOptions.prototype.zoomFactor;
src/ol/ol.js
+8
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.
*/ */
src/ol/view2d.js
+68 -26
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,33 +679,53 @@ ol.View2D.createResolutionConstraint_ = function(options) {
resolutionConstraint = ol.ResolutionConstraint.createSnapToResolutions( resolutionConstraint = ol.ResolutionConstraint.createSnapToResolutions(
resolutions); resolutions);
} else { } else {
// calculate the default min and max resolution
var projection = options.projection;
var extent = ol.proj.createProjection(projection, 'EPSG:3857').getExtent();
var size = goog.isNull(extent) ?
// use an extent that can fit the whole world if need be
360 * ol.proj.METERS_PER_UNIT[ol.proj.Units.DEGREES] /
ol.proj.METERS_PER_UNIT[projection.getUnits()] :
Math.max(ol.extent.getWidth(extent), ol.extent.getHeight(extent));
var defaultMaxResolution = size / ol.DEFAULT_TILE_SIZE / Math.pow(
defaultZoomFactor, ol.DEFAULT_MIN_ZOOM);
var defaultMinResolution = defaultMaxResolution / Math.pow(
defaultZoomFactor, defaultMaxZoom - ol.DEFAULT_MIN_ZOOM);
// user provided maxResolution takes precedence
maxResolution = options.maxResolution; maxResolution = options.maxResolution;
if (!goog.isDef(maxResolution)) { if (goog.isDef(maxResolution)) {
var projection = options.projection; minZoom = 0;
var projectionExtent = ol.proj.createProjection(projection, 'EPSG:3857') } else {
.getExtent(); maxResolution = defaultMaxResolution / Math.pow(zoomFactor, minZoom);
var size = goog.isNull(projectionExtent) ?
// use an extent that can fit the whole world if need be
360 * ol.proj.METERS_PER_UNIT[ol.proj.Units.DEGREES] /
ol.proj.METERS_PER_UNIT[projection.getUnits()] :
Math.max(projectionExtent[2] - projectionExtent[0],
projectionExtent[3] - projectionExtent[1]);
maxResolution = size / ol.DEFAULT_TILE_SIZE;
} }
var maxZoom = options.maxZoom;
if (!goog.isDef(maxZoom)) { // user provided minResolution takes precedence
maxZoom = 28; minResolution = options.minResolution;
if (!goog.isDef(minResolution)) {
if (goog.isDef(options.maxZoom)) {
if (goog.isDef(options.maxResolution)) {
minResolution = maxResolution / Math.pow(zoomFactor, maxZoom);
} else {
minResolution = defaultMaxResolution / Math.pow(zoomFactor, maxZoom);
}
} else {
minResolution = defaultMinResolution;
}
} }
var zoomFactor = options.zoomFactor;
if (!goog.isDef(zoomFactor)) { // given discrete zoom levels, minResolution may be different than provided
zoomFactor = 2; maxZoom = minZoom + Math.floor(
} Math.log(maxResolution / minResolution) / Math.log(zoomFactor));
minResolution = maxResolution / Math.pow(zoomFactor, maxZoom); minResolution = maxResolution / Math.pow(zoomFactor, maxZoom - minZoom);
resolutionConstraint = ol.ResolutionConstraint.createSnapToPower( resolutionConstraint = ol.ResolutionConstraint.createSnapToPower(
zoomFactor, maxResolution, maxZoom); zoomFactor, maxResolution, maxZoom - minZoom);
} }
return {constraint: resolutionConstraint, maxResolution: maxResolution, return {constraint: resolutionConstraint, maxResolution: maxResolution,
minResolution: minResolution}; minResolution: minResolution, minZoom: minZoom};
}; };
test/spec/ol/view2d.test.js
+243
View File
@@ -58,6 +58,185 @@ describe('ol.View2D', function() {
}); });
}); });
describe('with zoom related options', function() {
var defaultMaxRes = 156543.03392804097;
function getConstraint(options) {
return ol.View2D.createResolutionConstraint_(options).constraint;
}
it('works with only maxZoom', function() {
var maxZoom = 10;
var constraint = getConstraint({
maxZoom: maxZoom
});
expect(constraint(defaultMaxRes, 0, 0)).to.roughlyEqual(
defaultMaxRes, 1e-9);
expect(constraint(0, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(2, maxZoom), 1e-9);
});
it('works with only minZoom', function() {
var minZoom = 5;
var constraint = getConstraint({
minZoom: minZoom
});
expect(constraint(defaultMaxRes, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(2, minZoom), 1e-9);
expect(constraint(0, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(2, 28), 1e-9);
});
it('works with maxZoom and minZoom', function() {
var minZoom = 2;
var maxZoom = 11;
var constraint = getConstraint({
minZoom: minZoom,
maxZoom: maxZoom
});
expect(constraint(defaultMaxRes, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(2, minZoom), 1e-9);
expect(constraint(0, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(2, maxZoom), 1e-9);
});
it('works with maxZoom, minZoom, and zoomFactor', function() {
var minZoom = 4;
var maxZoom = 8;
var zoomFactor = 3;
var constraint = getConstraint({
minZoom: minZoom,
maxZoom: maxZoom,
zoomFactor: zoomFactor
});
expect(constraint(defaultMaxRes, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(zoomFactor, minZoom), 1e-9);
expect(constraint(0, 0, 0)).to.roughlyEqual(
defaultMaxRes / Math.pow(zoomFactor, maxZoom), 1e-9);
});
});
describe('with resolution related options', function() {
var defaultMaxRes = 156543.03392804097;
function getConstraint(options) {
return ol.View2D.createResolutionConstraint_(options).constraint;
}
it('works with only maxResolution', function() {
var maxResolution = 10e6;
var constraint = getConstraint({
maxResolution: maxResolution
});
expect(constraint(maxResolution * 3, 0, 0)).to.roughlyEqual(
maxResolution, 1e-9);
var minResolution = constraint(0, 0, 0);
var defaultMinRes = defaultMaxRes / Math.pow(2, 28);
expect(minResolution).to.be.greaterThan(defaultMinRes);
expect(minResolution / defaultMinRes).to.be.lessThan(2);
});
it('works with only minResolution', function() {
var minResolution = 100;
var constraint = getConstraint({
minResolution: minResolution
});
expect(constraint(defaultMaxRes, 0, 0)).to.roughlyEqual(
defaultMaxRes, 1e-9);
var constrainedMinRes = constraint(0, 0, 0);
expect(constrainedMinRes).to.be.greaterThan(minResolution);
expect(constrainedMinRes / minResolution).to.be.lessThan(2);
});
it('works with minResolution and maxResolution', function() {
var constraint = getConstraint({
maxResolution: 500,
minResolution: 100
});
expect(constraint(600, 0, 0)).to.be(500);
expect(constraint(500, 0, 0)).to.be(500);
expect(constraint(400, 0, 0)).to.be(500);
expect(constraint(300, 0, 0)).to.be(250);
expect(constraint(200, 0, 0)).to.be(250);
expect(constraint(100, 0, 0)).to.be(125);
expect(constraint(0, 0, 0)).to.be(125);
});
it('accepts minResolution, maxResolution, and zoomFactor', function() {
var constraint = getConstraint({
maxResolution: 500,
minResolution: 1,
zoomFactor: 10
});
expect(constraint(1000, 0, 0)).to.be(500);
expect(constraint(500, 0, 0)).to.be(500);
expect(constraint(100, 0, 0)).to.be(50);
expect(constraint(50, 0, 0)).to.be(50);
expect(constraint(10, 0, 0)).to.be(5);
expect(constraint(1, 0, 0)).to.be(5);
});
});
describe('overspecified options (prefers resolution)', function() {
var defaultMaxRes = 156543.03392804097;
function getConstraint(options) {
return ol.View2D.createResolutionConstraint_(options).constraint;
}
it('respects maxResolution over minZoom', function() {
var maxResolution = 10e6;
var minZoom = 8;
var constraint = getConstraint({
maxResolution: maxResolution,
minZoom: minZoom
});
expect(constraint(maxResolution * 3, 0, 0)).to.roughlyEqual(
maxResolution, 1e-9);
var minResolution = constraint(0, 0, 0);
var defaultMinRes = defaultMaxRes / Math.pow(2, 28);
expect(minResolution).to.be.greaterThan(defaultMinRes);
expect(minResolution / defaultMinRes).to.be.lessThan(2);
});
it('respects minResolution over maxZoom', function() {
var minResolution = 100;
var maxZoom = 50;
var constraint = getConstraint({
minResolution: minResolution,
maxZoom: maxZoom
});
expect(constraint(defaultMaxRes, 0, 0)).to.roughlyEqual(
defaultMaxRes, 1e-9);
var constrainedMinRes = constraint(0, 0, 0);
expect(constrainedMinRes).to.be.greaterThan(minResolution);
expect(constrainedMinRes / minResolution).to.be.lessThan(2);
});
});
}); });
describe('create rotation constraint', function() { describe('create rotation constraint', function() {
@@ -103,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() {