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

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,
});