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

Remove the requirement to provide a size to ol.View#fit()

Browse Source
This commit is contained in:
Andreas Hocevar
2016-12-16 11:03:54 +01:00
parent 40afb9d40d
commit 20155ce2a7
14 changed files with 72 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
changelog/upgrade-notes.md
View File

@@ -1,5 +1,28 @@
## Upgrade notes
### Next release
#### Simplified `ol.View#fit()` API
In most cases, it is no longer necessary to provide an `ol.Size` (previously the 2nd argument) to `ol.View#fit()`. By default, the size of the first map that uses the view will be used. If you want to specify a different size, it goes in the options now (previously the 3rd argument, now the 2nd).
Most common use case - old API:
```js
map.getView().fit(extent, map.getSize());
```
Most common use case - new API:
```js
map.getView().fit(extent);
```
Advanced use - old API:
```js
map.getView().fit(extent, [200, 100], {padding: 10});
```
Advanced use - new API:
```js
map.getView().fit(extent, {size: [200, 100], padding 10});
```
### v3.20.0
#### Use `view.animate()` instead of `map.beforeRender()` and `ol.animation` functions

12
examples/center.js
View File

@@ -62,8 +62,7 @@ var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
zoomtoswitzerlandbest.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});
view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
}, false);
var zoomtoswitzerlandconstrained =
@@ -71,8 +70,7 @@ var zoomtoswitzerlandconstrained =
zoomtoswitzerlandconstrained.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(polygon, size, {padding: [170, 50, 30, 150]});
view.fit(polygon, {padding: [170, 50, 30, 150]});
}, false);
var zoomtoswitzerlandnearest =
@@ -80,16 +78,14 @@ var zoomtoswitzerlandnearest =
zoomtoswitzerlandnearest.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});
view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
}, false);
var zoomtolausanne = document.getElementById('zoomtolausanne');
zoomtolausanne.addEventListener('click', function() {
var feature = source.getFeatures()[1];
var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});
view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
}, false);
var centerlausanne = document.getElementById('centerlausanne');

3
examples/drag-and-drop-image-vector.js
View File

@@ -121,8 +121,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
style: styleFunction
})
}));
map.getView().fit(
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
map.getView().fit(vectorSource.getExtent());
});
var displayFeatureInfo = function(pixel) {

3
examples/drag-and-drop.js
View File

@@ -118,8 +118,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
source: vectorSource,
style: styleFunction
}));
map.getView().fit(
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
map.getView().fit(vectorSource.getExtent());
});
var displayFeatureInfo = function(pixel) {

4
examples/export-pdf.js
View File

@@ -89,7 +89,7 @@ exportButton.addEventListener('click', function() {
source.un('tileloadend', tileLoadEnd, canvas);
source.un('tileloaderror', tileLoadEnd, canvas);
map.setSize(size);
map.getView().fit(extent, size);
map.getView().fit(extent);
map.renderSync();
exportButton.disabled = false;
document.body.style.cursor = 'auto';
@@ -104,7 +104,7 @@ exportButton.addEventListener('click', function() {
});
map.setSize([width, height]);
map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
map.getView().fit(extent);
map.renderSync();
}, false);

6
examples/reprojection-by-code.js
View File

@@ -53,11 +53,7 @@ function setProjection(code, name, proj4def, bbox) {
projection: newProj
});
map.setView(newView);
var size = map.getSize();
if (size) {
newView.fit(extent, size);
}
newView.fit(extent);
}

2
examples/vector-wfs-getfeature.js
View File

@@ -61,5 +61,5 @@ fetch('https://ahocevar.com/geoserver/wfs', {
}).then(function(json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
map.getView().fit(vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
map.getView().fit(vectorSource.getExtent());
});

2
examples/zoomify.js
View File

@@ -28,4 +28,4 @@ var map = new ol.Map({
extent: extent
})
});
map.getView().fit(extent, /** @type {ol.Size} */ (map.getSize()));
map.getView().fit(extent);

11
externs/olx.js
View File

@@ -7627,6 +7627,7 @@ olx.view;
/**
* @typedef {{
* size: (ol.Size|undefined),
* padding: (!Array.<number>|undefined),
* constrainResolution: (boolean|undefined),
* nearest: (boolean|undefined),
@@ -7639,6 +7640,16 @@ olx.view;
olx.view.FitOptions;
/**
* The size in pixels of the box to fit the extent into. Default is
* the current size of the first map in the DOM that uses this view, or
* `[100, 100]` if no such map is found.
* @type {ol.Size|undefined}
* @api
*/
olx.view.FitOptions.prototype.size;
/**
* Padding (in pixels) to be cleared inside the view. Values in the array are
* top, right, bottom and left padding. Default is `[0, 0, 0, 0]`.

4
src/ol/control/overviewmap.js
View File

@@ -318,8 +318,6 @@ ol.control.OverviewMap.prototype.resetExtent_ = function() {
var view = map.getView();
var extent = view.calculateExtent(mapSize);
var ovmapSize = /** @type {ol.Size} */ (ovmap.getSize());
var ovview = ovmap.getView();
// get how many times the current map overview could hold different
@@ -329,7 +327,7 @@ ol.control.OverviewMap.prototype.resetExtent_ = function() {
ol.OVERVIEWMAP_MAX_RATIO / ol.OVERVIEWMAP_MIN_RATIO) / Math.LN2;
var ratio = 1 / (Math.pow(2, steps / 2) * ol.OVERVIEWMAP_MIN_RATIO);
ol.extent.scaleFromCenter(extent, ratio);
ovview.fit(extent, ovmapSize);
ovview.fit(extent);
};

3
src/ol/control/zoomtoextent.js
View File

@@ -73,6 +73,5 @@ ol.control.ZoomToExtent.prototype.handleZoomToExtent_ = function() {
var map = this.getMap();
var view = map.getView();
var extent = !this.extent_ ? view.getProjection().getExtent() : this.extent_;
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(extent, size);
view.fit(extent);
};

1
src/ol/map.js
View File

@@ -1092,6 +1092,7 @@ ol.Map.prototype.handleViewChanged_ = function() {
}
var view = this.getView();
if (view) {
this.viewport_.setAttribute('data-view', ol.getUid(view));
this.viewPropertyListenerKey_ = ol.events.listen(
view, ol.Object.EventType.PROPERTYCHANGE,
this.handleViewPropertyChanged_, this);

20
src/ol/view.js
View File

@@ -672,12 +672,22 @@ ol.View.prototype.getZoom = function() {
* Takes care of the map angle.
* @param {ol.geom.SimpleGeometry|ol.Extent} geometryOrExtent The geometry or
* extent to fit the view to.
* @param {ol.Size} size The size in pixels of the box to fit the extent into.
* Will often be `mep.getSize()`.
* @param {olx.view.FitOptions=} opt_options Options.
* @api
* @api stable
*/
ol.View.prototype.fit = function(geometryOrExtent, size, opt_options) {
ol.View.prototype.fit = function(geometryOrExtent, opt_options) {
var options = opt_options || {};
var size = options.size;
if (!size) {
size = [100, 100];
var selector = '.ol-viewport[data-view="' + ol.getUid(this) + '"]';
var element = document.querySelector(selector);
if (element) {
var metrics = getComputedStyle(element);
size[0] = parseInt(metrics.width, 10);
size[1] = parseInt(metrics.height, 10);
}
}
/** @type {ol.geom.SimpleGeometry} */
var geometry;
if (!(geometryOrExtent instanceof ol.geom.SimpleGeometry)) {
@@ -690,8 +700,6 @@ ol.View.prototype.fit = function(geometryOrExtent, size, opt_options) {
geometry = geometryOrExtent;
}
var options = opt_options || {};
var padding = options.padding !== undefined ? options.padding : [0, 0, 0, 0];
var constrainResolution = options.constrainResolution !== undefined ?
options.constrainResolution : true;

26
test/spec/ol/view.test.js
View File

@@ -912,40 +912,35 @@ describe('ol.View', function() {
it('fits correctly to the geometry', function() {
view.fit(
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
[200, 200],
{padding: [100, 0, 0, 100], constrainResolution: false});
{size: [200, 200], padding: [100, 0, 0, 100], constrainResolution: false});
expect(view.getResolution()).to.be(11);
expect(view.getCenter()[0]).to.be(5950);
expect(view.getCenter()[1]).to.be(47100);
view.fit(
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
[200, 200],
{padding: [100, 0, 0, 100]});
{size: [200, 200], padding: [100, 0, 0, 100]});
expect(view.getResolution()).to.be(20);
expect(view.getCenter()[0]).to.be(5500);
expect(view.getCenter()[1]).to.be(47550);
view.fit(
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
[200, 200],
{padding: [100, 0, 0, 100], nearest: true});
{size: [200, 200], padding: [100, 0, 0, 100], nearest: true});
expect(view.getResolution()).to.be(10);
expect(view.getCenter()[0]).to.be(6000);
expect(view.getCenter()[1]).to.be(47050);
view.fit(
new ol.geom.Point([6000, 46000]),
[200, 200],
{padding: [100, 0, 0, 100], minResolution: 2});
{size: [200, 200], padding: [100, 0, 0, 100], minResolution: 2});
expect(view.getResolution()).to.be(2);
expect(view.getCenter()[0]).to.be(5900);
expect(view.getCenter()[1]).to.be(46100);
view.fit(
new ol.geom.Point([6000, 46000]),
[200, 200],
{padding: [100, 0, 0, 100], maxZoom: 6});
{size: [200, 200], padding: [100, 0, 0, 100], maxZoom: 6});
expect(view.getResolution()).to.be(2);
expect(view.getZoom()).to.be(6);
expect(view.getCenter()[0]).to.be(5900);
@@ -954,14 +949,13 @@ describe('ol.View', function() {
view.setRotation(Math.PI / 4);
view.fit(
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
[200, 200],
{padding: [100, 0, 0, 100], constrainResolution: false});
{size: [200, 200], padding: [100, 0, 0, 100], constrainResolution: false});
expect(view.getResolution()).to.roughlyEqual(14.849242404917458, 1e-9);
expect(view.getCenter()[0]).to.roughlyEqual(5200, 1e-9);
expect(view.getCenter()[1]).to.roughlyEqual(46300, 1e-9);
});
it('fit correctly to the extent', function() {
view.fit([1000, 1000, 2000, 2000], [200, 200]);
it('fits correctly to the extent', function() {
view.fit([1000, 1000, 2000, 2000], {size: [200, 200]});
expect(view.getResolution()).to.be(5);
expect(view.getCenter()[0]).to.be(1500);
expect(view.getCenter()[1]).to.be(1500);
@@ -973,14 +967,14 @@ describe('ol.View', function() {
});
it('throws on empty extent', function() {
expect(function() {
view.fit(ol.extent.createEmpty(), [200, 200]);
view.fit(ol.extent.createEmpty());
}).to.throwException();
});
it('animates when duration is defined', function(done) {
view.fit(
new ol.geom.LineString([[6000, 46000], [6000, 47100], [7000, 46000]]),
[200, 200],
{
size: [200, 200],
padding: [100, 0, 0, 100],
constrainResolution: false,
duration: 25