ol-cesium
Version:
OpenLayers Cesium integration library
288 lines (263 loc) • 7.98 kB
JavaScript
/**
* @module olcs.SynchronizedOverlay
*/
import olOverlay from 'ol/Overlay.js';
import {transform} from 'ol/proj.js';
import {removeNode, removeChildren} from './util.js';
import {unByKey as olObservableUnByKey} from 'ol/Observable.js';
/**
* Options for SynchronizedOverlay
* @typedef {Object} SynchronizedOverlayOptions
* @property {!Cesium.Scene} scene
* @property {olOverlay} parent
* @property {!import('olsc/OverlaySynchronizer.js').default} synchronizer
*/
class SynchronizedOverlay extends olOverlay {
/**
* @param {olcsx.SynchronizedOverlayOptions} options SynchronizedOverlay Options.
* @api
*/
constructor(options) {
const parent = options.parent;
super(parent.getOptions());
/**
* @private
* @type {?Function}
*/
this.scenePostRenderListenerRemover_ = null;
/**
* @private
* @type {!Cesium.Scene}
*/
this.scene_ = options.scene;
/**
* @private
* @type {!olcs.OverlaySynchronizer}
*/
this.synchronizer_ = options.synchronizer;
/**
* @private
* @type {!ol.Overlay}
*/
this.parent_ = parent;
/**
* @private
* @type {ol.Coordinate|undefined}
*/
this.positionWGS84_ = undefined;
/**
* @private
* @type {MutationObserver}
*/
this.observer_ = new MutationObserver(this.handleElementChanged.bind(this));
/**
* @private
* @type {Array.<MutationObserver>}
*/
this.attributeObserver_ = [];
/**
* @private
* @type {Array<ol.EventsKey>}
*/
this.listenerKeys_ = [];
// synchronize our Overlay with the parent Overlay
const setPropertyFromEvent = event => this.setPropertyFromEvent_(event);
this.listenerKeys_.push(this.parent_.on('change:position', setPropertyFromEvent));
this.listenerKeys_.push(this.parent_.on('change:element', setPropertyFromEvent));
this.listenerKeys_.push(this.parent_.on('change:offset', setPropertyFromEvent));
this.listenerKeys_.push(this.parent_.on('change:position', setPropertyFromEvent));
this.listenerKeys_.push(this.parent_.on('change:positioning', setPropertyFromEvent));
this.setProperties(this.parent_.getProperties());
this.handleMapChanged();
this.handleElementChanged();
}
/**
* @param {Node} target
* @private
*/
observeTarget_(target) {
if (!this.observer_) {
// not ready, skip the event (this occurs on construction)
return;
}
this.observer_.disconnect();
this.observer_.observe(target, {
attributes: false,
childList: true,
characterData: true,
subtree: true
});
this.attributeObserver_.forEach((observer) => {
observer.disconnect();
});
this.attributeObserver_.length = 0;
for (let i = 0; i < target.childNodes.length; i++) {
const node = target.childNodes[i];
if (node.nodeType === 1) {
const observer = new MutationObserver(this.handleElementChanged.bind(this));
observer.observe(node, {
attributes: true,
subtree: true
});
this.attributeObserver_.push(observer);
}
}
}
/**
*
* @param {ol.Object.Event} event
* @private
*/
setPropertyFromEvent_(event) {
if (event.target && event.key) {
this.set(event.key, event.target.get(event.key));
}
}
/**
* Get the scene associated with this overlay.
* @see ol.Overlay.prototype.getMap
* @return {!Cesium.Scene} The scene that the overlay is part of.
* @api
*/
getScene() {
return this.scene_;
}
/**
* @override
*/
handleMapChanged() {
if (this.scenePostRenderListenerRemover_) {
this.scenePostRenderListenerRemover_();
removeNode(this.element);
}
this.scenePostRenderListenerRemover_ = null;
const scene = this.getScene();
if (scene) {
this.scenePostRenderListenerRemover_ = scene.postRender.addEventListener(this.updatePixelPosition.bind(this));
this.updatePixelPosition();
const container = this.stopEvent ?
this.synchronizer_.getOverlayContainerStopEvent() : this.synchronizer_.getOverlayContainer();
if (this.insertFirst) {
container.insertBefore(this.element, container.childNodes[0] || null);
} else {
container.appendChild(this.element);
}
}
}
/**
* @override
*/
handlePositionChanged() {
// transform position to WGS84
const position = this.getPosition();
if (position) {
const sourceProjection = this.parent_.getMap().getView().getProjection();
this.positionWGS84_ = transform(position, sourceProjection, 'EPSG:4326');
} else {
this.positionWGS84_ = undefined;
}
this.updatePixelPosition();
}
/**
* @override
*/
handleElementChanged() {
function cloneNode(node, parent) {
const clone = node.cloneNode();
if (parent) {
parent.appendChild(clone);
}
if (node.nodeType != Node.TEXT_NODE) {
clone.addEventListener('click', (event) => {
node.dispatchEvent(new MouseEvent('click', event));
event.stopPropagation();
});
}
const nodes = node.childNodes;
for (let i = 0; i < nodes.length; i++) {
if (!nodes[i]) {
continue;
}
cloneNode(nodes[i], clone);
}
return clone;
}
removeChildren(this.element);
const element = this.getElement();
if (element) {
if (element.parentNode && element.parentNode.childNodes) {
for (const node of element.parentNode.childNodes) {
const clonedNode = cloneNode(node, null);
this.element.appendChild(clonedNode);
}
}
}
if (element.parentNode) {
// set new Observer
this.observeTarget_(element.parentNode);
}
}
/**
* @override
*/
updatePixelPosition() {
const position = this.positionWGS84_;
if (!this.scene_ || !position) {
this.setVisible(false);
return;
}
let height = 0;
if (position.length === 2) {
const globeHeight = this.scene_.globe.getHeight(Cesium.Cartographic.fromDegrees(position[0], position[1]));
if (globeHeight && this.scene_.globe.tilesLoaded) {
position[2] = globeHeight;
}
if (globeHeight) {
height = globeHeight;
}
} else {
height = position[2];
}
const cartesian = Cesium.Cartesian3.fromDegrees(position[0], position[1], height);
const camera = this.scene_.camera;
const ellipsoidBoundingSphere = new Cesium.BoundingSphere(new Cesium.Cartesian3(), 6356752);
const occluder = new Cesium.Occluder(ellipsoidBoundingSphere, camera.position);
// check if overlay position is behind the horizon
if (!occluder.isPointVisible(cartesian)) {
this.setVisible(false);
return;
}
const cullingVolume = camera.frustum.computeCullingVolume(camera.position, camera.direction, camera.up);
// check if overlay position is visible from the camera
if (cullingVolume.computeVisibility(new Cesium.BoundingSphere(cartesian)) !== 1) {
this.setVisible(false);
return;
}
this.setVisible(true);
const pixelCartesian = this.scene_.cartesianToCanvasCoordinates(cartesian);
const pixel = [pixelCartesian.x, pixelCartesian.y];
const mapSize = [this.scene_.canvas.width, this.scene_.canvas.height];
this.updateRenderedPosition(pixel, mapSize);
}
/**
* Destroys the overlay, removing all its listeners and elements
* @api
*/
destroy() {
if (this.scenePostRenderListenerRemover_) {
this.scenePostRenderListenerRemover_();
}
if (this.observer_) {
this.observer_.disconnect();
}
olObservableUnByKey(this.listenerKeys_);
this.listenerKeys_.splice(0);
if (this.element.removeNode) {
this.element.removeNode(true);
} else {
this.element.remove();
}
this.element = null;
}
}
export default SynchronizedOverlay;