You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

155 lines
4.0 KiB

/**
* @module ol/renderer/Composite
*/
import MapRenderer from './Map.js';
import ObjectEventType from '../ObjectEventType.js';
import RenderEvent from '../render/Event.js';
import RenderEventType from '../render/EventType.js';
import {CLASS_UNSELECTABLE} from '../css.js';
import {checkedFonts} from '../render/canvas.js';
import {inView} from '../layer/Layer.js';
import {listen, unlistenByKey} from '../events.js';
import {replaceChildren} from '../dom.js';
/**
* @classdesc
* Canvas map renderer.
* @api
*/
class CompositeMapRenderer extends MapRenderer {
/**
* @param {import("../Map.js").default} map Map.
*/
constructor(map) {
super(map);
/**
* @type {import("../events.js").EventsKey}
*/
this.fontChangeListenerKey_ = listen(
checkedFonts,
ObjectEventType.PROPERTYCHANGE,
map.redrawText.bind(map)
);
/**
* @private
* @type {HTMLDivElement}
*/
this.element_ = document.createElement('div');
const style = this.element_.style;
style.position = 'absolute';
style.width = '100%';
style.height = '100%';
style.zIndex = '0';
this.element_.className = CLASS_UNSELECTABLE + ' ol-layers';
const container = map.getViewport();
container.insertBefore(this.element_, container.firstChild || null);
/**
* @private
* @type {Array<HTMLElement>}
*/
this.children_ = [];
/**
* @private
* @type {boolean}
*/
this.renderedVisible_ = true;
}
/**
* @param {import("../render/EventType.js").default} type Event type.
* @param {import("../Map.js").FrameState} frameState Frame state.
*/
dispatchRenderEvent(type, frameState) {
const map = this.getMap();
if (map.hasListener(type)) {
const event = new RenderEvent(type, undefined, frameState);
map.dispatchEvent(event);
}
}
disposeInternal() {
unlistenByKey(this.fontChangeListenerKey_);
this.element_.parentNode.removeChild(this.element_);
super.disposeInternal();
}
/**
* Render.
* @param {?import("../Map.js").FrameState} frameState Frame state.
*/
renderFrame(frameState) {
if (!frameState) {
if (this.renderedVisible_) {
this.element_.style.display = 'none';
this.renderedVisible_ = false;
}
return;
}
this.calculateMatrices2D(frameState);
this.dispatchRenderEvent(RenderEventType.PRECOMPOSE, frameState);
const layerStatesArray = frameState.layerStatesArray.sort(function (a, b) {
return a.zIndex - b.zIndex;
});
const viewState = frameState.viewState;
this.children_.length = 0;
/**
* @type {Array<import("../layer/BaseVector.js").default>}
*/
const declutterLayers = [];
let previousElement = null;
for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
const layerState = layerStatesArray[i];
frameState.layerIndex = i;
const layer = layerState.layer;
const sourceState = layer.getSourceState();
if (
!inView(layerState, viewState) ||
(sourceState != 'ready' && sourceState != 'undefined')
) {
layer.unrender();
continue;
}
const element = layer.render(frameState, previousElement);
if (!element) {
continue;
}
if (element !== previousElement) {
this.children_.push(element);
previousElement = element;
}
if ('getDeclutter' in layer) {
declutterLayers.push(
/** @type {import("../layer/BaseVector.js").default} */ (layer)
);
}
}
for (let i = declutterLayers.length - 1; i >= 0; --i) {
declutterLayers[i].renderDeclutter(frameState);
}
replaceChildren(this.element_, this.children_);
this.dispatchRenderEvent(RenderEventType.POSTCOMPOSE, frameState);
if (!this.renderedVisible_) {
this.element_.style.display = '';
this.renderedVisible_ = true;
}
this.scheduleExpireIconCache(frameState);
}
}
export default CompositeMapRenderer;