fabian/GANE-AreaManager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add styling improvements; add geojson export for as zip file;

Browse Source
This commit is contained in:
Fabian Jeglinski
2020-02-16 13:06:52 +01:00
parent 539643caf4
commit f5c00cfa93
9 changed files with 1518 additions and 1095 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/add-layer-component/add-layer.component.ts
+9 -8
View File
@@ -1,8 +1,8 @@
import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {ValidationErrors} from "@angular/forms";
import {RawLayer} from "../models/RawLayer";
import {Utils} from "../misc/Utils";
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {ValidationErrors} from '@angular/forms';
import {RawLayer} from '../models/RawLayer';
import {Utils} from '../misc/Utils';
/**
* TODO: Add description
@@ -24,10 +24,11 @@ export class AddLayerComponent {
layerName: '',
layerData: null,
color: '#4fadc2'
}
};
public uploadError: ValidationErrors = null;
public uploadIsDirty: boolean = false;
public editMode : boolean = false;
public editMode: boolean = false;
constructor(
public dialogRef: MatDialogRef<AddLayerComponent>,
@@ -37,7 +38,7 @@ export class AddLayerComponent {
this.formData.layerName = data.name;
this.formData.layerData = data.data;
const colorRgb = data.getDefaultColor();
this.formData.color = Utils.rgbToHex(colorRgb[0],colorRgb[1],colorRgb[2]);
this.formData.color = Utils.rgbToHex(colorRgb[0], colorRgb[1], colorRgb[2]);
this.editMode = true;
}
}
@@ -63,7 +64,7 @@ export class AddLayerComponent {
} else {
this.uploadError = {
invalidFileType: true
}
};
}
const fileReader = new FileReader();
src/app/feature-management/feature-manager/feature-manager.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div *ngIf="curFeature">
<div *ngIf="curFeature" class="property-list">
<div class="header">
<h4>Custom Properties</h4>
</div>
src/app/feature-management/feature-manager/feature-manager.component.scss
+2
View File
@@ -14,6 +14,7 @@
.property-name {
}
.property-value {
margin: 0 0 0 6px;
}
@@ -26,3 +27,4 @@
.button-container {
margin-top: 3rem;
}
src/app/map/map.component.html
+19 -16
View File
@@ -16,13 +16,13 @@
</div>
</div>
<!-- layer property area-->
<div>
<div class="property-list-area">
<mat-card>
<mat-card-header>
<mat-card-title>Layer Properties</mat-card-title>
</mat-card-header>
<mat-card-content>
<lm-feature-manager [curFeature]="cache.selectedFeature"></lm-feature-manager>
<lm-feature-manager [curFeature]="cache.selectedFeature"></lm-feature-manager>
</mat-card-content>
</mat-card>
</div>
@@ -38,24 +38,27 @@
<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>
<h4 class="title">{{layer.get('name') }}</h4>
<div class="layer-controls">
<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>
</div>
</mat-card-content>
<mat-card-actions>
<button mat-button (click)="saveLayers()">Speichern</button>
<button mat-button (click)="exportLayerForApp()">Export für App</button>
<button mat-button (click)="exportLayerAsGeoJson()">Export als GeoJSON</button>
</mat-card-actions>
</mat-card>
</div>
src/app/map/map.component.scss
+23 -4
View File
@@ -38,6 +38,8 @@
}
.layer-control-area {
max-width:25vw;
.layer-list {
max-width: 100%;
border: solid 1px #ccc;
@@ -49,18 +51,31 @@
.list-entry {
padding: 20px 10px;
padding: 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;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
.title {
margin: 10px 0px 10px 0;
word-break: break-word;
}
.layer-controls {
> * {
margin-right: 8px;
cursor: pointer;
}
}
&:last-child {
border: none;
}
@@ -71,6 +86,10 @@
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
}
.property-list-area {
max-width: 25vw;
}
}
.cdk-drag-preview {
src/app/map/map.component.ts
+30 -9
View File
@@ -19,6 +19,8 @@ import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import {FeatureManagerComponent} from '../feature-management/feature-manager/feature-manager.component';
import {saveAs} from 'file-saver';
import {Config} from '../misc/Config';
import * as JSZip from 'jszip';
/**
* TODO: add description
@@ -30,10 +32,6 @@ import {saveAs} from 'file-saver';
* - The design und ux of the whole application has to be improved
* - Add bunch edit to ease coloring of the features
* - add possibility to filter for features to color them easier (or add some kind of custom query language)
* - add software versions number to geo json
* - how about the import of an previous exported file?
* -> Would work, but the export has to be improved: Single Layer export as geojson or multi geojson export,
* currently just the rawLawers are exported.
*/
@Component({
selector: 'app-map',
@@ -309,9 +307,9 @@ export class MapComponent implements OnInit {
}
/**
* TODO add description (currently it is not completely clear what this function is going to do)
* Export all Layers in one file for app usage
*/
public saveLayers(): void {
public exportLayerForApp(): void {
const rawLayers = [];
this.customLayerCollection.forEach(layer => rawLayers.push(RawLayer.fromVectorLayer(layer)));
@@ -323,9 +321,32 @@ export class MapComponent implements OnInit {
data: JSON.parse(rawLayer.data)
};
});
const blob = new Blob([JSON.stringify(processedRawLayers)], {type: 'application/geo+json;charset=utf-8'});
// TODO use dynamic name
saveAs(blob, 'lm_layer.geojson');
const blob = new Blob([JSON.stringify(processedRawLayers)], {type: 'application/json;charset=utf-8'});
saveAs(blob, `app_export_${new Date().toISOString()}.json`);
}
/**
* Exports all layer as single geoJson files in a zip for later processing
*/
public exportLayerAsGeoJson(): void {
const zipArchive = new JSZip();
const rawLayers = [];
this.customLayerCollection.forEach(layer => rawLayers.push(RawLayer.fromVectorLayer(layer)));
// create a zip archive
rawLayers.forEach(rawLayer => {
// process raw layer with JSON.stringify(JSON.parse(...)) to avoid escaping in data property e. g. {\"type\": \"aaa\"...
// the geo json string in data property comes like this from openlayer function GeoJSON().writeFeatures
const fileContent = new Blob([JSON.stringify(JSON.parse(rawLayer.data))], {type: 'application/geo+json;charset=utf-8'});
const fileName = `${rawLayer.name}.geojson`;
zipArchive.file(fileName, fileContent);
});
// save zip archive
zipArchive.generateAsync({type: 'blob'})
.then((blob) => {
saveAs(blob, `lm_export_${new Date().toISOString()}.zip`);
});
}
/**
src/app/models/RawLayer.ts
+1 -2
View File
@@ -22,8 +22,7 @@ export class RawLayer {
* Data of Layer (normally in geojson format)
*/
public data: string
) {
}
) {}
/**
* Creates a RawLayer instance from a VectorLayer and saves the style properties in geojson. Consider that the