implement layer compare slider

This commit is contained in:
Willem Dantuma
2022-09-27 19:58:08 +02:00
parent 7b2dbc1777
commit ddb112b989
11 changed files with 192 additions and 31 deletions

View File

@@ -17,7 +17,7 @@ import VectorTileSource from 'ol/source/VectorTile';
import VectorTileLayer from 'ol/layer/VectorTile';
import {GeoJSON,MVT} from 'ol/format';
import { Geometry } from 'ol/geom';
import TileSource from 'ol/source/Tile';
import BaseLayer from 'ol/layer/Base';
@Component({
selector: 'fm-map-item-layers',
@@ -32,9 +32,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
@Input() itemLayer: IItemLayer;
@Output() onFeatureSelected: EventEmitter<any> = new EventEmitter<any>();
@Output() onFeatureHover: EventEmitter<any> = new EventEmitter<any>();
@Output() onPrerender: EventEmitter<any> = new EventEmitter<any>();
private _apiEndPoint: string;
private initialized:boolean = false;
private mapEventHandlerInstalled = false;
private topLayerPrerenderEventhandlerInstalled = false;
private selectedFeatures = {};
private selectionLayer:Layer<Source> = null;
@@ -362,6 +364,36 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
}
}
installTopLayerPrerenderEventhandler() {
if(!this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 ) {
if(this.instance.getVisible()) {
var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
if(olLayers.length >0) {
var topLayer = olLayers[0] as any;
topLayer.on('prerender',this.topLayerPrerenderEventhandler);
topLayer.on('postrender',this.topLayerPostrenderEventhandler);
this.topLayerPrerenderEventhandlerInstalled = true;
}
}
}
}
unInstallTopLayerPrerenderEventhandler() {
if(this.topLayerPrerenderEventhandlerInstalled && this.onPrerender.observers.length > 0 )
{
if(this.instance.getVisible()) {
var olLayers = this.instance.getLayers().getArray().filter(l=> l.getVisible());
if(olLayers.length >0) {
var topLayer = olLayers[0] as any;
topLayer.un('prerender',this.topLayerPrerenderEventhandler);
topLayer.un('postrender',this.topLayerPostrenderEventhandler);
this.topLayerPrerenderEventhandlerInstalled = false;
}
}
}
}
addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer<Source> {
if(!itemLayer) return null;
var olLayers = this.instance.getLayers();
@@ -387,6 +419,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
}
updateLayers(itemLayers: IItemLayer[]) {
this.unInstallTopLayerPrerenderEventhandler();
let newLayers: Layer<Source>[] = [];
if (itemLayers) {
itemLayers.forEach((itemLayer, index) => {
@@ -414,12 +447,23 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
if(this.selectionLayer) olLayers.push(this.selectionLayer)
}
}
this.installTopLayerPrerenderEventhandler();
}
topLayerPrerenderEventhandler = (event) => {
this.onPrerender.emit(event);
}
topLayerPostrenderEventhandler = (event) => {
const ctx = event.context;
ctx.restore();
}
mapEventHandler = (event) => {
// select only when having observers
if(event.type === 'click' && !this.onFeatureSelected.observers.length) return;
if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return;
if(event.type === 'pointermove' && !this.onFeatureHover.observers.length) return;
let itemLayer= this.getItemlayer(this.itemLayer);
if(itemLayer && itemLayer.layer) {
this.selectedFeatures = {};