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

Merge pull request #12282 from M393/dragzoom-view-padding

Browse Source 
Fix DragZoom with view padding
This commit is contained in:
MoonE
2021-06-17 19:13:03 +02:00
committed by GitHub
parent cf7213c5cb dabfe40700
commit 9ab5b70e3a
4 changed files with 193 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
examples/view-padding.js
View File

@@ -50,24 +50,26 @@ const map = new Map({
view: view,
});
const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
zoomtoswitzerland.addEventListener(
'click',
function () {
const feature = source.getFeatures()[0];
const polygon = feature.getGeometry();
view.fit(polygon);
},
false
);
vectorLayer.getSource().on('featuresloadend', function () {
const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
zoomtoswitzerland.addEventListener(
'click',
function () {
const feature = source.getFeatures()[0];
const polygon = feature.getGeometry();
view.fit(polygon);
},
false
);
const centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener(
'click',
function () {
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
view.setCenter(point.getCoordinates());
},
false
);
const centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener(
'click',
function () {
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
view.setCenter(point.getCoordinates());
},
false
);
});

70
src/ol/View.js
View File

@@ -1078,7 +1078,7 @@ class View extends BaseObject {
* the given size.
*/
getResolutionForExtentInternal(extent, opt_size) {
const size = opt_size || this.getViewportSize_();
const size = opt_size || this.getViewportSizeMinusPadding_();
const xResolution = getWidth(extent) / size[0];
const yResolution = getHeight(extent) / size[1];
return Math.max(xResolution, yResolution);
@@ -1300,6 +1300,32 @@ class View extends BaseObject {
this.fitInternal(geometry, opt_options);
}
/**
* Calculate rotated extent
* @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
* @return {import("./extent").Extent} The rotated extent for the geometry.
*/
rotatedExtentForGeometry(geometry) {
const rotation = this.getRotation();
const cosAngle = Math.cos(rotation);
const sinAngle = Math.sin(-rotation);
const coords = geometry.getFlatCoordinates();
const stride = geometry.getStride();
let minRotX = +Infinity;
let minRotY = +Infinity;
let maxRotX = -Infinity;
let maxRotY = -Infinity;
for (let i = 0, ii = coords.length; i < ii; i += stride) {
const rotX = coords[i] * cosAngle - coords[i + 1] * sinAngle;
const rotY = coords[i] * sinAngle + coords[i + 1] * cosAngle;
minRotX = Math.min(minRotX, rotX);
minRotY = Math.min(minRotY, rotY);
maxRotX = Math.max(maxRotX, rotX);
maxRotY = Math.max(maxRotY, rotY);
}
return [minRotX, minRotY, maxRotX, maxRotY];
}
/**
* @param {import("./geom/SimpleGeometry.js").default} geometry The geometry.
* @param {FitOptions} [opt_options] Options.
@@ -1321,44 +1347,28 @@ class View extends BaseObject {
} else {
minResolution = 0;
}
const coords = geometry.getFlatCoordinates();
// calculate rotated extent
const rotation = this.getRotation();
const cosAngle = Math.cos(-rotation);
let sinAngle = Math.sin(-rotation);
let minRotX = +Infinity;
let minRotY = +Infinity;
let maxRotX = -Infinity;
let maxRotY = -Infinity;
const stride = geometry.getStride();
for (let i = 0, ii = coords.length; i < ii; i += stride) {
const rotX = coords[i] * cosAngle - coords[i + 1] * sinAngle;
const rotY = coords[i] * sinAngle + coords[i + 1] * cosAngle;
minRotX = Math.min(minRotX, rotX);
minRotY = Math.min(minRotY, rotY);
maxRotX = Math.max(maxRotX, rotX);
maxRotY = Math.max(maxRotY, rotY);
}
const rotatedExtent = this.rotatedExtentForGeometry(geometry);
// calculate resolution
let resolution = this.getResolutionForExtentInternal(
[minRotX, minRotY, maxRotX, maxRotY],
[size[0] - padding[1] - padding[3], size[1] - padding[0] - padding[2]]
);
let resolution = this.getResolutionForExtentInternal(rotatedExtent, [
size[0] - padding[1] - padding[3],
size[1] - padding[0] - padding[2],
]);
resolution = isNaN(resolution)
? minResolution
: Math.max(resolution, minResolution);
resolution = this.getConstrainedResolution(resolution, nearest ? 0 : 1);
// calculate center
sinAngle = -sinAngle; // go back to original rotation
let centerRotX = (minRotX + maxRotX) / 2;
let centerRotY = (minRotY + maxRotY) / 2;
centerRotX += ((padding[1] - padding[3]) / 2) * resolution;
centerRotY += ((padding[0] - padding[2]) / 2) * resolution;
const centerX = centerRotX * cosAngle - centerRotY * sinAngle;
const centerY = centerRotY * cosAngle + centerRotX * sinAngle;
const rotation = this.getRotation();
const sinAngle = Math.sin(rotation);
const cosAngle = Math.cos(rotation);
const centerRot = getCenter(rotatedExtent);
centerRot[0] += ((padding[1] - padding[3]) / 2) * resolution;
centerRot[1] += ((padding[0] - padding[2]) / 2) * resolution;
const centerX = centerRot[0] * cosAngle - centerRot[1] * sinAngle;
const centerY = centerRot[1] * cosAngle + centerRot[0] * sinAngle;
const center = this.getConstrainedCenter([centerX, centerY], resolution);
const callback = options.callback ? options.callback : VOID;

33
src/ol/interaction/DragZoom.js
View File

@@ -2,13 +2,6 @@
* @module ol/interaction/DragZoom
*/
import DragBox from './DragBox.js';
import {
createOrUpdateFromCoordinates,
getBottomLeft,
getCenter,
getTopRight,
scaleFromCenter,
} from '../extent.js';
import {easeOut} from '../easing.js';
import {shiftKeyOnly} from '../events/condition.js';
@@ -71,29 +64,17 @@ class DragZoom extends DragBox {
onBoxEnd(event) {
const map = this.getMap();
const view = /** @type {!import("../View.js").default} */ (map.getView());
const size = /** @type {!import("../size.js").Size} */ (map.getSize());
let extent = this.getGeometry().getExtent();
let geometry = this.getGeometry();
if (this.out_) {
const mapExtent = view.calculateExtentInternal(size);
const boxPixelExtent = createOrUpdateFromCoordinates([
map.getPixelFromCoordinateInternal(getBottomLeft(extent)),
map.getPixelFromCoordinateInternal(getTopRight(extent)),
]);
const factor = view.getResolutionForExtentInternal(boxPixelExtent, size);
scaleFromCenter(mapExtent, 1 / factor);
extent = mapExtent;
const rotatedExtent = view.rotatedExtentForGeometry(geometry);
const resolution = view.getResolutionForExtentInternal(rotatedExtent);
const factor = view.getResolution() / resolution;
geometry = geometry.clone();
geometry.scale(factor * factor);
}
const resolution = view.getConstrainedResolution(
view.getResolutionForExtentInternal(extent, size)
);
const center = view.getConstrainedCenter(getCenter(extent), resolution);
view.animateInternal({
resolution: resolution,
center: center,
view.fitInternal(geometry, {
duration: this.duration_,
easing: easeOut,
});

146
test/browser/spec/ol/interaction/dragzoom.test.js
View File

@@ -1,14 +1,21 @@
import DragZoom from '../../../../../src/ol/interaction/DragZoom.js';
import Map from '../../../../../src/ol/Map.js';
import Polygon, {
fromExtent as polygonFromExtent,
} from '../../../../../src/ol/geom/Polygon.js';
import RenderBox from '../../../../../src/ol/render/Box.js';
import VectorLayer from '../../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import View from '../../../../../src/ol/View.js';
import {getCenter} from '../../../../../src/ol/extent.js';
import {fromExtent as polygonFromExtent} from '../../../../../src/ol/geom/Polygon.js';
import {getCenter, scaleFromCenter} from '../../../../../src/ol/extent.js';
describe('ol.interaction.DragZoom', function () {
let target, map, source;
/** @type {HTMLElement} */
let target;
/** @type {Map} */
let map;
/** @type {VectorSource} */
let source;
const width = 360;
const height = 180;
@@ -31,6 +38,7 @@ describe('ol.interaction.DragZoom', function () {
projection: 'EPSG:4326',
center: [0, 0],
resolution: 1,
multiWorld: true,
}),
});
map.once('postrender', function () {
@@ -59,9 +67,27 @@ describe('ol.interaction.DragZoom', function () {
});
describe('#onBoxEnd()', function () {
it('centers the view on the box geometry', function (done) {
it('uses the configured duration', function () {
const interaction = new DragZoom({
duration: 10,
duration: 1,
});
map.addInteraction(interaction);
const view = map.getView();
view.fitInternal = sinon.spy();
const box = new RenderBox();
const extent = [-110, 40, -90, 60];
box.geometry_ = polygonFromExtent(extent);
interaction.box_ = box;
interaction.onBoxEnd();
expect(view.fitInternal.calledOnce).to.be(true);
expect(view.fitInternal.args[0][1].duration).to.be(1);
});
it('centers the view on the box geometry', function () {
const interaction = new DragZoom({
duration: 0,
});
map.addInteraction(interaction);
@@ -71,17 +97,63 @@ describe('ol.interaction.DragZoom', function () {
interaction.box_ = box;
interaction.onBoxEnd();
setTimeout(function () {
const view = map.getView();
const center = view.getCenterInternal();
expect(center).to.eql(getCenter(extent));
done();
}, 50);
const view = map.getView();
const center = view.getCenterInternal();
expect(center).to.eql(getCenter(extent));
});
it('sets new resolution while zooming out', function (done) {
it('centers the rotated view on the box geometry', function () {
const view = map.getView();
view.setRotation(Math.PI / 4);
const interaction = new DragZoom({
duration: 10,
duration: 0,
});
map.addInteraction(interaction);
const box = new RenderBox();
map.renderSync();
box.geometry_ = new Polygon([
[
map.getCoordinateFromPixel([0, 0]),
map.getCoordinateFromPixel([360, 0]),
map.getCoordinateFromPixel([360, 180]),
map.getCoordinateFromPixel([0, 180]),
map.getCoordinateFromPixel([0, 0]),
],
]);
interaction.box_ = box;
const extentBefore = view.calculateExtentInternal();
interaction.onBoxEnd();
const newExtent = view.calculateExtentInternal();
expect(newExtent[0]).to.roughlyEqual(extentBefore[0], 1e-9);
expect(newExtent[1]).to.roughlyEqual(extentBefore[1], 1e-9);
expect(newExtent[2]).to.roughlyEqual(extentBefore[2], 1e-9);
expect(newExtent[3]).to.roughlyEqual(extentBefore[3], 1e-9);
expect(view.getResolution()).to.roughlyEqual(1, 1e-9);
});
it('centers the padded view on the box geometry', function () {
map.getView().padding = [0, 180, 0, 0];
const interaction = new DragZoom({
duration: 0,
});
map.addInteraction(interaction);
const box = new RenderBox();
const extent = [-180, -90, 0, 90];
box.geometry_ = polygonFromExtent(extent);
interaction.box_ = box;
interaction.onBoxEnd();
const view = map.getView();
expect(view.getResolution()).to.be(1);
expect(view.calculateExtentInternal()).to.eql(extent);
});
it('sets new resolution while zooming out', function () {
const interaction = new DragZoom({
duration: 0,
out: true,
});
map.addInteraction(interaction);
@@ -92,15 +164,45 @@ describe('ol.interaction.DragZoom', function () {
interaction.box_ = box;
map.getView().setResolution(0.25);
setTimeout(function () {
interaction.onBoxEnd();
setTimeout(function () {
const view = map.getView();
const resolution = view.getResolution();
expect(resolution).to.eql(view.getConstrainedResolution(0.5));
done();
}, 50);
}, 50);
interaction.onBoxEnd();
const view = map.getView();
const resolution = view.getResolution();
expect(resolution).to.eql(view.getConstrainedResolution(0.5));
});
it('sets new resolution while zooming out with view padding and rotation', function () {
const view = map.getView();
view.setResolution(0.5);
view.setRotation(Math.PI / 4);
view.padding = [90, 0, 0, 0];
const interaction = new DragZoom({
duration: 0,
out: true,
});
map.addInteraction(interaction);
const box = new RenderBox();
map.renderSync();
box.geometry_ = new Polygon([
[
map.getCoordinateFromPixel([90, 117.5]),
map.getCoordinateFromPixel([90, 152.5]),
map.getCoordinateFromPixel([270, 152.5]),
map.getCoordinateFromPixel([270, 117.5]),
map.getCoordinateFromPixel([90, 117.5]),
],
]);
interaction.box_ = box;
const expected = view.calculateExtentInternal();
scaleFromCenter(expected, 2);
interaction.onBoxEnd();
const newExtent = view.calculateExtentInternal();
expect(view.getResolution()).to.roughlyEqual(1, 1e-9);
expect(newExtent[0]).to.roughlyEqual(expected[0], 1e-9);
expect(newExtent[1]).to.roughlyEqual(expected[1], 1e-9);
expect(newExtent[2]).to.roughlyEqual(expected[2], 1e-9);
expect(newExtent[3]).to.roughlyEqual(expected[3], 1e-9);
});
});
});