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

Speed up Overlay element positioning using CSS translate()

Browse Source
This commit is contained in:
horsenit
2020-03-27 00:32:10 -04:00
parent 2d8782b1da
commit 83a5cd63c6
1 changed files with 22 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/Overlay.js
+22 -58
View File
@@ -158,17 +158,11 @@ class Overlay extends BaseObject {
/** /**
* @protected * @protected
* @type {{bottom_: string, * @type {{transform_: string,
* left_: string,
* right_: string,
* top_: string,
* visible: boolean}} * visible: boolean}}
*/ */
this.rendered = { this.rendered = {
bottom_: '', transform_: '',
left_: '',
right_: '',
top_: '',
visible: true visible: true
}; };
@@ -506,63 +500,33 @@ class Overlay extends BaseObject {
this.setVisible(true); this.setVisible(true);
let offsetX = offset[0]; const x = Math.round(pixel[0] + offset[0]) + 'px';
let offsetY = offset[1]; const y = Math.round(pixel[1] + offset[1]) + 'px';
let posX = '0%';
let posY = '0%';
if (positioning == OverlayPositioning.BOTTOM_RIGHT || if (positioning == OverlayPositioning.BOTTOM_RIGHT ||
positioning == OverlayPositioning.CENTER_RIGHT || positioning == OverlayPositioning.CENTER_RIGHT ||
positioning == OverlayPositioning.TOP_RIGHT) { positioning == OverlayPositioning.TOP_RIGHT) {
if (this.rendered.left_ !== '') { posX = '-100%';
this.rendered.left_ = ''; } else if (positioning == OverlayPositioning.BOTTOM_CENTER ||
style.left = ''; positioning == OverlayPositioning.CENTER_CENTER ||
} positioning == OverlayPositioning.TOP_CENTER) {
const right = Math.round(mapSize[0] - pixel[0] - offsetX) + 'px'; posX = '-50%';
if (this.rendered.right_ != right) {
this.rendered.right_ = right;
style.right = right;
}
} else {
if (this.rendered.right_ !== '') {
this.rendered.right_ = '';
style.right = '';
}
if (positioning == OverlayPositioning.BOTTOM_CENTER ||
positioning == OverlayPositioning.CENTER_CENTER ||
positioning == OverlayPositioning.TOP_CENTER) {
offsetX -= this.element.offsetWidth / 2;
}
const left = Math.round(pixel[0] + offsetX) + 'px';
if (this.rendered.left_ != left) {
this.rendered.left_ = left;
style.left = left;
}
} }
if (positioning == OverlayPositioning.BOTTOM_LEFT || if (positioning == OverlayPositioning.BOTTOM_LEFT ||
positioning == OverlayPositioning.BOTTOM_CENTER || positioning == OverlayPositioning.BOTTOM_CENTER ||
positioning == OverlayPositioning.BOTTOM_RIGHT) { positioning == OverlayPositioning.BOTTOM_RIGHT) {
if (this.rendered.top_ !== '') { posY = '-100%';
this.rendered.top_ = ''; } else if (positioning == OverlayPositioning.CENTER_LEFT ||
style.top = ''; positioning == OverlayPositioning.CENTER_CENTER ||
} positioning == OverlayPositioning.CENTER_RIGHT) {
const bottom = Math.round(mapSize[1] - pixel[1] - offsetY) + 'px'; posY = '-50%';
if (this.rendered.bottom_ != bottom) { }
this.rendered.bottom_ = bottom; const transform = `translate(${posX}, ${posY}) translate(${x}, ${y})`;
style.bottom = bottom; if (this.rendered.transform_ != transform) {
} this.rendered.transform_ = transform;
} else { style.transform = transform;
if (this.rendered.bottom_ !== '') { style.msTransform = transform; // IE9
this.rendered.bottom_ = '';
style.bottom = '';
}
if (positioning == OverlayPositioning.CENTER_LEFT ||
positioning == OverlayPositioning.CENTER_CENTER ||
positioning == OverlayPositioning.CENTER_RIGHT) {
offsetY -= this.element.offsetHeight / 2;
}
const top = Math.round(pixel[1] + offsetY) + 'px';
if (this.rendered.top_ != top) {
this.rendered.top_ = 'top';
style.top = top;
}
} }
} }