398 lines
11 KiB
JavaScript
398 lines
11 KiB
JavaScript
import {
|
|
MapEventType_default
|
|
} from "./chunk-BHVDQB66.js";
|
|
import {
|
|
CLASS_SELECTABLE
|
|
} from "./chunk-GNM7L5BH.js";
|
|
import {
|
|
outerHeight,
|
|
outerWidth,
|
|
removeChildren
|
|
} from "./chunk-YWIWRQT2.js";
|
|
import {
|
|
containsExtent
|
|
} from "./chunk-CKDBVGKM.js";
|
|
import {
|
|
Object_default
|
|
} from "./chunk-H47PV7W6.js";
|
|
import {
|
|
listen,
|
|
unlistenByKey
|
|
} from "./chunk-KJXIHBKT.js";
|
|
|
|
// node_modules/ol/Overlay.js
|
|
var Property = {
|
|
ELEMENT: "element",
|
|
MAP: "map",
|
|
OFFSET: "offset",
|
|
POSITION: "position",
|
|
POSITIONING: "positioning"
|
|
};
|
|
var Overlay = class extends Object_default {
|
|
/**
|
|
* @param {Options} options Overlay options.
|
|
*/
|
|
constructor(options) {
|
|
super();
|
|
this.on;
|
|
this.once;
|
|
this.un;
|
|
this.options = options;
|
|
this.id = options.id;
|
|
this.insertFirst = options.insertFirst !== void 0 ? options.insertFirst : true;
|
|
this.stopEvent = options.stopEvent !== void 0 ? options.stopEvent : true;
|
|
this.element = document.createElement("div");
|
|
this.element.className = options.className !== void 0 ? options.className : "ol-overlay-container " + CLASS_SELECTABLE;
|
|
this.element.style.position = "absolute";
|
|
this.element.style.pointerEvents = "auto";
|
|
this.autoPan = options.autoPan === true ? {} : options.autoPan || void 0;
|
|
this.rendered = {
|
|
transform_: "",
|
|
visible: true
|
|
};
|
|
this.mapPostrenderListenerKey = null;
|
|
this.addChangeListener(Property.ELEMENT, this.handleElementChanged);
|
|
this.addChangeListener(Property.MAP, this.handleMapChanged);
|
|
this.addChangeListener(Property.OFFSET, this.handleOffsetChanged);
|
|
this.addChangeListener(Property.POSITION, this.handlePositionChanged);
|
|
this.addChangeListener(Property.POSITIONING, this.handlePositioningChanged);
|
|
if (options.element !== void 0) {
|
|
this.setElement(options.element);
|
|
}
|
|
this.setOffset(options.offset !== void 0 ? options.offset : [0, 0]);
|
|
this.setPositioning(options.positioning || "top-left");
|
|
if (options.position !== void 0) {
|
|
this.setPosition(options.position);
|
|
}
|
|
}
|
|
/**
|
|
* Get the DOM element of this overlay.
|
|
* @return {HTMLElement|undefined} The Element containing the overlay.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
getElement() {
|
|
return (
|
|
/** @type {HTMLElement|undefined} */
|
|
this.get(Property.ELEMENT)
|
|
);
|
|
}
|
|
/**
|
|
* Get the overlay identifier which is set on constructor.
|
|
* @return {number|string|undefined} Id.
|
|
* @api
|
|
*/
|
|
getId() {
|
|
return this.id;
|
|
}
|
|
/**
|
|
* Get the map associated with this overlay.
|
|
* @return {import("./Map.js").default|null} The map that the
|
|
* overlay is part of.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
getMap() {
|
|
return (
|
|
/** @type {import("./Map.js").default|null} */
|
|
this.get(Property.MAP) || null
|
|
);
|
|
}
|
|
/**
|
|
* Get the offset of this overlay.
|
|
* @return {Array<number>} The offset.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
getOffset() {
|
|
return (
|
|
/** @type {Array<number>} */
|
|
this.get(Property.OFFSET)
|
|
);
|
|
}
|
|
/**
|
|
* Get the current position of this overlay.
|
|
* @return {import("./coordinate.js").Coordinate|undefined} The spatial point that the overlay is
|
|
* anchored at.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
getPosition() {
|
|
return (
|
|
/** @type {import("./coordinate.js").Coordinate|undefined} */
|
|
this.get(Property.POSITION)
|
|
);
|
|
}
|
|
/**
|
|
* Get the current positioning of this overlay.
|
|
* @return {Positioning} How the overlay is positioned
|
|
* relative to its point on the map.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
getPositioning() {
|
|
return (
|
|
/** @type {Positioning} */
|
|
this.get(Property.POSITIONING)
|
|
);
|
|
}
|
|
/**
|
|
* @protected
|
|
*/
|
|
handleElementChanged() {
|
|
removeChildren(this.element);
|
|
const element = this.getElement();
|
|
if (element) {
|
|
this.element.appendChild(element);
|
|
}
|
|
}
|
|
/**
|
|
* @protected
|
|
*/
|
|
handleMapChanged() {
|
|
var _a;
|
|
if (this.mapPostrenderListenerKey) {
|
|
(_a = this.element) == null ? void 0 : _a.remove();
|
|
unlistenByKey(this.mapPostrenderListenerKey);
|
|
this.mapPostrenderListenerKey = null;
|
|
}
|
|
const map = this.getMap();
|
|
if (map) {
|
|
this.mapPostrenderListenerKey = listen(
|
|
map,
|
|
MapEventType_default.POSTRENDER,
|
|
this.render,
|
|
this
|
|
);
|
|
this.updatePixelPosition();
|
|
const container = this.stopEvent ? map.getOverlayContainerStopEvent() : map.getOverlayContainer();
|
|
if (this.insertFirst) {
|
|
container.insertBefore(this.element, container.childNodes[0] || null);
|
|
} else {
|
|
container.appendChild(this.element);
|
|
}
|
|
this.performAutoPan();
|
|
}
|
|
}
|
|
/**
|
|
* @protected
|
|
*/
|
|
render() {
|
|
this.updatePixelPosition();
|
|
}
|
|
/**
|
|
* @protected
|
|
*/
|
|
handleOffsetChanged() {
|
|
this.updatePixelPosition();
|
|
}
|
|
/**
|
|
* @protected
|
|
*/
|
|
handlePositionChanged() {
|
|
this.updatePixelPosition();
|
|
this.performAutoPan();
|
|
}
|
|
/**
|
|
* @protected
|
|
*/
|
|
handlePositioningChanged() {
|
|
this.updatePixelPosition();
|
|
}
|
|
/**
|
|
* Set the DOM element to be associated with this overlay.
|
|
* @param {HTMLElement|undefined} element The Element containing the overlay.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
setElement(element) {
|
|
this.set(Property.ELEMENT, element);
|
|
}
|
|
/**
|
|
* Set the map to be associated with this overlay.
|
|
* @param {import("./Map.js").default|null} map The map that the
|
|
* overlay is part of. Pass `null` to just remove the overlay from the current map.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
setMap(map) {
|
|
this.set(Property.MAP, map);
|
|
}
|
|
/**
|
|
* Set the offset for this overlay.
|
|
* @param {Array<number>} offset Offset.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
setOffset(offset) {
|
|
this.set(Property.OFFSET, offset);
|
|
}
|
|
/**
|
|
* Set the position for this overlay. If the position is `undefined` the
|
|
* overlay is hidden.
|
|
* @param {import("./coordinate.js").Coordinate|undefined} position The spatial point that the overlay
|
|
* is anchored at.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
setPosition(position) {
|
|
this.set(Property.POSITION, position);
|
|
}
|
|
/**
|
|
* Pan the map so that the overlay is entirely visible in the current viewport
|
|
* (if necessary) using the configured autoPan parameters
|
|
* @protected
|
|
*/
|
|
performAutoPan() {
|
|
if (this.autoPan) {
|
|
this.panIntoView(this.autoPan);
|
|
}
|
|
}
|
|
/**
|
|
* Pan the map so that the overlay is entirely visible in the current viewport
|
|
* (if necessary).
|
|
* @param {PanIntoViewOptions} [panIntoViewOptions] Options for the pan action
|
|
* @api
|
|
*/
|
|
panIntoView(panIntoViewOptions) {
|
|
const map = this.getMap();
|
|
if (!map || !map.getTargetElement() || !this.get(Property.POSITION)) {
|
|
return;
|
|
}
|
|
const mapRect = this.getRect(map.getTargetElement(), map.getSize());
|
|
const element = this.getElement();
|
|
const overlayRect = this.getRect(element, [
|
|
outerWidth(element),
|
|
outerHeight(element)
|
|
]);
|
|
panIntoViewOptions = panIntoViewOptions || {};
|
|
const myMargin = panIntoViewOptions.margin === void 0 ? 20 : panIntoViewOptions.margin;
|
|
if (!containsExtent(mapRect, overlayRect)) {
|
|
const offsetLeft = overlayRect[0] - mapRect[0];
|
|
const offsetRight = mapRect[2] - overlayRect[2];
|
|
const offsetTop = overlayRect[1] - mapRect[1];
|
|
const offsetBottom = mapRect[3] - overlayRect[3];
|
|
const delta = [0, 0];
|
|
if (offsetLeft < 0) {
|
|
delta[0] = offsetLeft - myMargin;
|
|
} else if (offsetRight < 0) {
|
|
delta[0] = Math.abs(offsetRight) + myMargin;
|
|
}
|
|
if (offsetTop < 0) {
|
|
delta[1] = offsetTop - myMargin;
|
|
} else if (offsetBottom < 0) {
|
|
delta[1] = Math.abs(offsetBottom) + myMargin;
|
|
}
|
|
if (delta[0] !== 0 || delta[1] !== 0) {
|
|
const center = (
|
|
/** @type {import("./coordinate.js").Coordinate} */
|
|
map.getView().getCenterInternal()
|
|
);
|
|
const centerPx = map.getPixelFromCoordinateInternal(center);
|
|
if (!centerPx) {
|
|
return;
|
|
}
|
|
const newCenterPx = [centerPx[0] + delta[0], centerPx[1] + delta[1]];
|
|
const panOptions = panIntoViewOptions.animation || {};
|
|
map.getView().animateInternal({
|
|
center: map.getCoordinateFromPixelInternal(newCenterPx),
|
|
duration: panOptions.duration,
|
|
easing: panOptions.easing
|
|
});
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Get the extent of an element relative to the document
|
|
* @param {HTMLElement} element The element.
|
|
* @param {import("./size.js").Size} size The size of the element.
|
|
* @return {import("./extent.js").Extent} The extent.
|
|
* @protected
|
|
*/
|
|
getRect(element, size) {
|
|
const box = element.getBoundingClientRect();
|
|
const offsetX = box.left + window.pageXOffset;
|
|
const offsetY = box.top + window.pageYOffset;
|
|
return [offsetX, offsetY, offsetX + size[0], offsetY + size[1]];
|
|
}
|
|
/**
|
|
* Set the positioning for this overlay.
|
|
* @param {Positioning} positioning how the overlay is
|
|
* positioned relative to its point on the map.
|
|
* @observable
|
|
* @api
|
|
*/
|
|
setPositioning(positioning) {
|
|
this.set(Property.POSITIONING, positioning);
|
|
}
|
|
/**
|
|
* Modify the visibility of the element.
|
|
* @param {boolean} visible Element visibility.
|
|
* @protected
|
|
*/
|
|
setVisible(visible) {
|
|
if (this.rendered.visible !== visible) {
|
|
this.element.style.display = visible ? "" : "none";
|
|
this.rendered.visible = visible;
|
|
}
|
|
}
|
|
/**
|
|
* Update pixel position.
|
|
* @protected
|
|
*/
|
|
updatePixelPosition() {
|
|
const map = this.getMap();
|
|
const position = this.getPosition();
|
|
if (!map || !map.isRendered() || !position) {
|
|
this.setVisible(false);
|
|
return;
|
|
}
|
|
const pixel = map.getPixelFromCoordinate(position);
|
|
const mapSize = map.getSize();
|
|
this.updateRenderedPosition(pixel, mapSize);
|
|
}
|
|
/**
|
|
* @param {import("./pixel.js").Pixel} pixel The pixel location.
|
|
* @param {import("./size.js").Size|undefined} mapSize The map size.
|
|
* @protected
|
|
*/
|
|
updateRenderedPosition(pixel, mapSize) {
|
|
const style = this.element.style;
|
|
const offset = this.getOffset();
|
|
const positioning = this.getPositioning();
|
|
this.setVisible(true);
|
|
const x = `${pixel[0] + offset[0]}px`;
|
|
const y = `${pixel[1] + offset[1]}px`;
|
|
let posX = "0%";
|
|
let posY = "0%";
|
|
if (positioning == "bottom-right" || positioning == "center-right" || positioning == "top-right") {
|
|
posX = "-100%";
|
|
} else if (positioning == "bottom-center" || positioning == "center-center" || positioning == "top-center") {
|
|
posX = "-50%";
|
|
}
|
|
if (positioning == "bottom-left" || positioning == "bottom-center" || positioning == "bottom-right") {
|
|
posY = "-100%";
|
|
} else if (positioning == "center-left" || positioning == "center-center" || positioning == "center-right") {
|
|
posY = "-50%";
|
|
}
|
|
const transform = `translate(${posX}, ${posY}) translate(${x}, ${y})`;
|
|
if (this.rendered.transform_ != transform) {
|
|
this.rendered.transform_ = transform;
|
|
style.transform = transform;
|
|
}
|
|
}
|
|
/**
|
|
* returns the options this Overlay has been created with
|
|
* @return {Options} overlay options
|
|
*/
|
|
getOptions() {
|
|
return this.options;
|
|
}
|
|
};
|
|
var Overlay_default = Overlay;
|
|
|
|
export {
|
|
Overlay_default
|
|
};
|
|
//# sourceMappingURL=chunk-WJRPSVEV.js.map
|