init push
This commit is contained in:
Fabian Jeglinski
@@ -0,0 +1,252 @@
|
||||
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';
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
constructor(public dialog: MatDialog) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initBaseLayer();
|
||||
this.initLayerGroup();
|
||||
this.initMap();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
return;
|
||||
}
|
||||
const pixel = this.map.getEventPixel(evt.originalEvent);
|
||||
this.displayFeatureInfo(pixel);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all feature infos for each feature at the given pixel.
|
||||
* @param pixel
|
||||
*/
|
||||
private displayFeatureInfo(pixel) {
|
||||
const features = [];
|
||||
this.map.forEachFeatureAtPixel(pixel, (feature) => {
|
||||
features.push(feature)
|
||||
}
|
||||
);
|
||||
|
||||
if (features.length == 0) {
|
||||
this.currentFeatureInfo = 'Too many features. Please zoom in to see feature infos';
|
||||
} else if (features.length == 1) {
|
||||
features.forEach(feature => {
|
||||
const properties = feature.getProperties();
|
||||
delete properties.geometry;
|
||||
this.currentFeatureInfo = properties;
|
||||
})
|
||||
} else {
|
||||
this.currentFeatureInfo = null;
|
||||
}
|
||||
};
|
||||
|
||||
// private colorPolygons(feature: Feature, resolution: any) {
|
||||
// const styles = {
|
||||
// black: new Style({
|
||||
// stroke: new Stroke({
|
||||
// color: '#86665a',
|
||||
// width: 1
|
||||
// }),
|
||||
// fill: new Fill({
|
||||
// color: 'rgba(121,85,72, 0.4)',
|
||||
// })
|
||||
// }),
|
||||
// green: new Style({
|
||||
// stroke: new Stroke({
|
||||
// color: '#b8c633',
|
||||
// width: 1
|
||||
// }),
|
||||
// fill: new Fill({
|
||||
// color: 'rgba(205,220,57,0.4)',
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// // console.log(feature.getProperties()['Grünland'],feature.getProperties());
|
||||
// if (feature.getProperties()['Nutzung'] === 'Grünland') {
|
||||
// return styles.green;
|
||||
// } else {
|
||||
// return styles.black;
|
||||
// }
|
||||
// }
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user