400 lines
11 KiB
TypeScript
400 lines
11 KiB
TypeScript
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
|
import 'ol/ol.css';
|
|
import {Map, View} from 'ol';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import {fromLonLat, transform} from 'ol/proj';
|
|
import VectorLayer from 'ol/layer/Vector';
|
|
import {OSM} from 'ol/source';
|
|
import {CdkDragDrop} from "@angular/cdk/drag-drop";
|
|
import {MatDialog} from "@angular/material";
|
|
import {AddLayerComponent} from "../add-layer-component/add-layer.component";
|
|
import {RawLayer} from "../models/RawLayer";
|
|
import LayerGroup from 'ol/layer/Group';
|
|
import {Collection} from "openlayers";
|
|
import {EPSG} from "../enums/EPSG";
|
|
import {inAndOut} from 'ol/easing';
|
|
import {Feature} from 'ol/Feature';
|
|
import Style from 'ol/style/Style';
|
|
import Stroke from 'ol/style/Stroke';
|
|
import Fill from 'ol/style/Fill';
|
|
|
|
/**
|
|
* TODO: add description
|
|
*/
|
|
@Component({
|
|
selector: 'app-map',
|
|
templateUrl: './map.component.html',
|
|
styleUrls: ['./map.component.scss']
|
|
})
|
|
export class MapComponent implements OnInit {
|
|
|
|
@ViewChild('mapContainer') mapContainer: ElementRef<HTMLDivElement>;
|
|
public map: Map;
|
|
public baseLayer: TileLayer;
|
|
|
|
/**
|
|
* Represents the custom layer that were uploaded by user
|
|
*/
|
|
private customLayerGroup: LayerGroup;
|
|
|
|
/**
|
|
* Returns the layer collection of the customLayerGroup
|
|
*/
|
|
get customLayerCollection(): Collection<VectorLayer> {
|
|
return this.customLayerGroup.getLayers();
|
|
}
|
|
|
|
/**
|
|
* The coordinates in wgs84 according to the cursor position
|
|
*/
|
|
public cursorCoordinates: string;
|
|
|
|
/**
|
|
* The properties of the current feature. The current layer is the layer beneath the cursor.
|
|
*/
|
|
public currentFeatureInfo: any;
|
|
|
|
/**
|
|
* A simple cache to save styles
|
|
*/
|
|
private styleCache: { [key: string]: Style } = {};
|
|
|
|
/**
|
|
* A simple feature cache
|
|
*/
|
|
private featureCache: { [key: string]: Feature } = {};
|
|
|
|
constructor(public dialog: MatDialog) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.initCache();
|
|
this.initBaseLayer();
|
|
this.initLayerGroup();
|
|
this.initMap();
|
|
this.addMockData();
|
|
}
|
|
|
|
/**
|
|
* Inits the base layer (OSM TileLayer)
|
|
*/
|
|
initBaseLayer() {
|
|
this.baseLayer = new TileLayer({
|
|
source: new OSM()
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Inits the customLayerGroup
|
|
*/
|
|
initLayerGroup() {
|
|
this.customLayerGroup = new LayerGroup({
|
|
layers: []
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Inits the open layers map instance
|
|
*/
|
|
private initMap() {
|
|
this.map = new Map({
|
|
target: this.mapContainer.nativeElement,
|
|
layers: [
|
|
this.baseLayer,
|
|
this.customLayerGroup
|
|
],
|
|
view: new View({
|
|
center: fromLonLat([0, 0]),
|
|
zoom: 2
|
|
})
|
|
});
|
|
|
|
this.addMapEventlistener();
|
|
|
|
// without this line the map is only visible after resizing window
|
|
requestAnimationFrame(() => {
|
|
this.map.updateSize();
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Adds all map event listener
|
|
*/
|
|
private addMapEventlistener() {
|
|
// get current cursor coordinates to transform and display them
|
|
this.map.on('pointermove', (evt) => {
|
|
const tmpCoords = transform(evt.coordinate, EPSG.openLayersDefault, EPSG.wgs84);
|
|
this.cursorCoordinates = `Lat: ${tmpCoords[1]} / Long: ${tmpCoords[0]}`;
|
|
});
|
|
|
|
// add event to get feature infos
|
|
this.map.on('pointermove', (evt) => {
|
|
if (evt.dragging || this.featureCache['selectedFeature']) {
|
|
return;
|
|
}
|
|
const pixel = this.map.getEventPixel(evt.originalEvent);
|
|
const features = this.map.getFeaturesAtPixel(pixel);
|
|
if (features && features.length > 0) {
|
|
this.map.getTargetElement().style.cursor = 'pointer';
|
|
this.displayFeatureInfo(features[0]);
|
|
this.highlightFeature(features[0]);
|
|
} else {
|
|
this.map.getTargetElement().style.cursor = '';
|
|
// reapply original style to last highlighted feature
|
|
if (this.featureCache['lastHighlighted']) {
|
|
this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
|
|
}
|
|
// reset cache for feature and style
|
|
this.featureCache['lastHighlighted'] = null;
|
|
this.styleCache['lastHighlightedStyle'] = null;
|
|
this.currentFeatureInfo = null;
|
|
}
|
|
});
|
|
|
|
// handle feature selection
|
|
this.map.on('click', (evt) => {
|
|
const pixel = this.map.getEventPixel(evt.originalEvent);
|
|
const features = this.map.getFeaturesAtPixel(pixel);
|
|
|
|
if (this.featureCache['selectedFeature']) {
|
|
// use lastHighlightedStyle because the original style is saved there
|
|
this.featureCache['selectedFeature'].setStyle(this.styleCache['lastHighlightedStyle']);
|
|
// this.styleCache['lastHighlightedStyle'] = null;
|
|
this.featureCache['selectedFeature'] = null;
|
|
} else if (features && features.length > 0) {
|
|
this.map.getTargetElement().style.cursor = '';
|
|
this.displayFeatureInfo(features[0]);
|
|
this.featureCache['selectedFeature'] = features[0];
|
|
this.featureCache['lastHighlighted'] = null;
|
|
features[0].setStyle(this.styleCache['defaultSelected']);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Prepared feature properties and shows them
|
|
* @param features
|
|
*/
|
|
private displayFeatureInfo(feature: Feature) {
|
|
const properties = feature.getProperties();
|
|
delete properties.geometry;
|
|
this.currentFeatureInfo = properties;
|
|
};
|
|
|
|
/**
|
|
* Highlights a Features
|
|
* @param feature
|
|
*/
|
|
private highlightFeature(feature: Feature) {
|
|
// reapply saved feature and style
|
|
if (this.featureCache['lastHighlighted']) {
|
|
this.featureCache['lastHighlighted'].setStyle(this.styleCache['lastHighlightedStyle']);
|
|
}
|
|
// save current feature and style
|
|
this.featureCache['lastHighlighted'] = feature;
|
|
this.styleCache['lastHighlightedStyle'] = feature.getStyle();
|
|
|
|
// set new feature style
|
|
feature.setStyle(this.styleCache['defaultHighlight']);
|
|
}
|
|
|
|
/**
|
|
* Opens a dialog to create a new custom layer
|
|
*/
|
|
addLayer(): void {
|
|
const dialogRef = this.dialog.open(AddLayerComponent);
|
|
dialogRef.afterClosed().subscribe(rawLayer => {
|
|
if (rawLayer) {
|
|
const customLayer = RawLayer.toVectorLayer(rawLayer);
|
|
this.centerLayerOnMap(customLayer);
|
|
this.customLayerCollection.push(customLayer);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Opens a dialog to edit a custom layer
|
|
*/
|
|
editLayer(index: number): void {
|
|
const vectorLayer = this.customLayerCollection.item(index);
|
|
const rawLayer = RawLayer.fromVectorLayer(vectorLayer);
|
|
const dialogRef = this.dialog.open(AddLayerComponent, {data: rawLayer});
|
|
dialogRef.afterClosed().subscribe(rawLayer => {
|
|
if (rawLayer) {
|
|
// TODO
|
|
// when a layer was edited the information about the file is lost.
|
|
// That causes that the layer is removed from map. In such a case, just edit color or name.
|
|
|
|
const customLayer = RawLayer.toVectorLayer(rawLayer);
|
|
this.customLayerCollection.setAt(index, customLayer);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Updates the customLayer collection according to drag and drop actions.
|
|
* @param event
|
|
*/
|
|
drop(event: CdkDragDrop<RawLayer[]>) {
|
|
const tmp = this.customLayerCollection.item(event.previousIndex);
|
|
this.customLayerCollection.removeAt(event.previousIndex);
|
|
this.customLayerCollection.insertAt(event.currentIndex, tmp);
|
|
}
|
|
|
|
deleteLayer(layer: VectorLayer) {
|
|
this.customLayerCollection.remove(layer);
|
|
}
|
|
|
|
/**
|
|
* Toggles the visibility of a custom layer
|
|
* @param index
|
|
*/
|
|
toggleLayerVisibility(layer: VectorLayer) {
|
|
layer.setVisible(!layer.getVisible());
|
|
}
|
|
|
|
saveLayers(): RawLayer[] {
|
|
const rawLayers = [];
|
|
this.customLayerCollection.forEach(layer => rawLayers.push(RawLayer.fromVectorLayer(layer)));
|
|
return rawLayers;
|
|
}
|
|
|
|
/**
|
|
* Focusses the passed layer on map
|
|
* @param customLayer
|
|
*/
|
|
private centerLayerOnMap(customLayer: VectorLayer) {
|
|
const options = {
|
|
size: this.map.getSize(),
|
|
duration: 888,
|
|
easing: inAndOut
|
|
}
|
|
this.map.getView().fit(customLayer.getSource().getExtent(), options);
|
|
}
|
|
|
|
/**
|
|
* Support function that inits cache values
|
|
*/
|
|
private initCache() {
|
|
this.styleCache['defaultSelected'] = new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgb(245, 64, 41)',
|
|
width: 3
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(245, 64, 41, 0.3)',
|
|
})
|
|
})
|
|
|
|
this.styleCache['defaultHighlight'] = new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgb(245, 64, 41)',
|
|
width: 2
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(245, 64, 41, 0.1)',
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* DeBUG DEBUG DBEUG
|
|
*/
|
|
private addMockData() {
|
|
const data = {
|
|
"type": "FeatureCollection",
|
|
"name": "background",
|
|
"crs": {
|
|
"type": "name",
|
|
"properties": {
|
|
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
|
|
}
|
|
},
|
|
"features": [{
|
|
"type": "Feature",
|
|
"properties": {
|
|
"name": "Layer 1"
|
|
},
|
|
"geometry": {
|
|
"type": "MultiPolygon",
|
|
"coordinates": [
|
|
[
|
|
[
|
|
[8.801864395832126, 53.14770721254275],
|
|
[8.806370506977146, 53.14770721254275],
|
|
[8.806542168354099, 53.14500456859233],
|
|
[8.80203605720908, 53.14521049030746]
|
|
]
|
|
]
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "Feature",
|
|
"properties": {
|
|
"name": "Layer 2"
|
|
},
|
|
"geometry": {
|
|
"type": "MultiPolygon",
|
|
"coordinates": [
|
|
[
|
|
[
|
|
[8.807787400997881, 53.1477644198588],
|
|
[8.808044893063311, 53.145010298994144],
|
|
[8.813452226437335, 53.145010298994144],
|
|
[8.813194734371905, 53.1477644198588]
|
|
]
|
|
]
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "Feature",
|
|
"properties": {
|
|
"name": "Layer 3"
|
|
},
|
|
"geometry": {
|
|
"type": "MultiPolygon",
|
|
"coordinates": [
|
|
[
|
|
[
|
|
[8.80207966021419, 53.14392919393571],
|
|
[8.802122575558428, 53.138780701270434],
|
|
[8.80632827929378, 53.13896090893504],
|
|
[8.806542856014971, 53.14410938000193]
|
|
]
|
|
]
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "Feature",
|
|
"properties": {
|
|
"name": "Layer 4"
|
|
},
|
|
"geometry": {
|
|
"type": "MultiPolygon",
|
|
"coordinates": [
|
|
[
|
|
[
|
|
[8.808654874418039, 53.143631496039035],
|
|
[8.809770673368234, 53.1391523112723],
|
|
[8.816036313627023, 53.13930677369489],
|
|
[8.8156071601846, 53.14352853151957]
|
|
]
|
|
]
|
|
]
|
|
}
|
|
}
|
|
]
|
|
};
|
|
const rawLayer = new RawLayer('Mock Data Layer', JSON.stringify(data));
|
|
rawLayer.saveDefaultColor([125,125,125])
|
|
const customLayer = RawLayer.toVectorLayer(rawLayer);
|
|
this.centerLayerOnMap(customLayer);
|
|
this.customLayerCollection.push(customLayer);
|
|
}
|
|
}
|