init push
This commit is contained in:
Fabian Jeglinski
@@ -0,0 +1,64 @@
|
||||
<div class="content">
|
||||
<!-- map area -->
|
||||
<div class="map-area">
|
||||
<div class="map" #mapContainer></div>
|
||||
<div class="map-info">
|
||||
<form>
|
||||
<label>
|
||||
Show OSM Map
|
||||
<input type="checkbox" [checked]="baseLayer.getVisible()"
|
||||
(click)="baseLayer.setVisible(!baseLayer.getVisible())">
|
||||
</label>
|
||||
</form>
|
||||
<div>
|
||||
{{ cursorCoordinates ? cursorCoordinates : 'Lat: ? / Long: ?' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- layer property area-->
|
||||
<div class="layer-property-area">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Layer Properties</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div>
|
||||
{{ currentFeatureInfo | json}}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<!-- layer control area-->
|
||||
<div class="layer-control-area">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Layer</mat-card-title>
|
||||
<div class="controls">
|
||||
<i class="material-icons" (click)="addLayer()">add_circle</i>
|
||||
</div>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div cdkDropList class="layer-list" (cdkDropListDropped)="drop($event)">
|
||||
<div class="list-entry" *ngFor="let layer of customLayerCollection.getArray();let i = index" cdkDrag>
|
||||
<h4>{{layer.get('name') }}</h4>
|
||||
<i class="material-icons" (click)="centerLayerOnMap(layer)">
|
||||
center_focus_strong
|
||||
</i>
|
||||
<i class="material-icons" (click)="toggleLayerVisibility(layer)">
|
||||
{{layer.getVisible() ? 'visibility' : 'visibility_off'}}
|
||||
</i>
|
||||
<i class="material-icons" (click)="editLayer(i)">
|
||||
edit
|
||||
</i>
|
||||
<i class="material-icons" (click)="deleteLayer(layer)">
|
||||
delete
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<button mat-button (click)="saveLayers()">Speichern</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,94 @@
|
||||
|
||||
.content {
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
|
||||
&,
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.map-area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 80vh; // TODO make canvas resizable ..
|
||||
}
|
||||
|
||||
.map-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
|
||||
*:not(:first-child) {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layer-control-area {
|
||||
|
||||
|
||||
.layer-list {
|
||||
max-width: 100%;
|
||||
border: solid 1px #ccc;
|
||||
min-height: 60px;
|
||||
display: block;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.list-entry {
|
||||
padding: 20px 10px;
|
||||
border-bottom: solid 1px #ccc;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
cursor: move;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layer-list.cdk-drop-list-dragging .list-entry:not(.cdk-drag-placeholder) {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MapComponent } from './map.component';
|
||||
|
||||
describe('MapComponent', () => {
|
||||
let component: MapComponent;
|
||||
let fixture: ComponentFixture<MapComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MapComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MapComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -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