refactoring to life map
This commit is contained in:
Generated
+408
-242
File diff suppressed because it is too large
Load Diff
+15
-18
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"layerName": "gane-web",
|
||||
"layerName": "lm-web",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
@@ -11,32 +11,29 @@
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^7.2.12",
|
||||
"@angular/animations": "^7.2.15",
|
||||
"@angular/cdk": "^7.3.7",
|
||||
"@angular/common": "~7.2.0",
|
||||
"@angular/compiler": "~7.2.0",
|
||||
"@angular/core": "~7.2.0",
|
||||
"@angular/forms": "~7.2.0",
|
||||
"@angular/common": "^7.2.15",
|
||||
"@angular/compiler": "^7.2.15",
|
||||
"@angular/core": "^7.2.15",
|
||||
"@angular/forms": "^7.2.15",
|
||||
"@angular/material": "^7.3.7",
|
||||
"@angular/platform-browser": "~7.2.0",
|
||||
"@angular/platform-browser-dynamic": "~7.2.0",
|
||||
"@angular/router": "~7.2.0",
|
||||
"@types/leaflet": "^1.4.3",
|
||||
"@types/openlayers": "^4.6.16",
|
||||
"@angular/platform-browser": "^7.2.15",
|
||||
"@angular/platform-browser-dynamic": "^7.2.15",
|
||||
"@angular/router": "^7.2.15",
|
||||
"@types/openlayers": "^4.6.17",
|
||||
"core-js": "^2.5.4",
|
||||
"hammerjs": "^2.0.8",
|
||||
"leaflet": "^1.4.0",
|
||||
"ngx-color-picker": "^7.5.0",
|
||||
"ol": "^5.3.1",
|
||||
"ol": "^5.3.2",
|
||||
"rxjs": "~6.3.3",
|
||||
"tslib": "^1.9.0",
|
||||
"zone.js": "~0.8.26"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.13.0",
|
||||
"@angular/cli": "~7.3.5",
|
||||
"@angular/compiler-cli": "~7.2.0",
|
||||
"@angular/language-service": "~7.2.0",
|
||||
"@angular-devkit/build-angular": "^0.13.9",
|
||||
"@angular/cli": "^7.3.9",
|
||||
"@angular/compiler-cli": "^7.2.15",
|
||||
"@angular/language-service": "^7.2.15",
|
||||
"@types/jasmine": "~2.8.8",
|
||||
"@types/jasminewd2": "~2.0.3",
|
||||
"@types/node": "~8.9.4",
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import {MapComponent} from "./map/map.component";
|
||||
import {LeafletMapComponent} from "./leaflet-map/leaflet-map.component";
|
||||
|
||||
const routes: Routes = [
|
||||
{path: '**', component: MapComponent},
|
||||
{path: 'osm', component: MapComponent},
|
||||
{path: 'leaflet', component: LeafletMapComponent},
|
||||
{path: 'osm', component: MapComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {Component} from '@angular/core';
|
||||
import 'hammerjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { MapComponent } from './map/map.component';
|
||||
import { LeafletMapComponent } from './leaflet-map/leaflet-map.component';
|
||||
import {HttpClient, HttpClientModule} from "@angular/common/http";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
|
||||
import {
|
||||
@@ -26,7 +23,6 @@ import {ColorPickerModule} from "ngx-color-picker";
|
||||
declarations: [
|
||||
AppComponent,
|
||||
MapComponent,
|
||||
LeafletMapComponent,
|
||||
AddLayerComponent,
|
||||
FeatureManagerComponent,
|
||||
CustomColorEntryComponent
|
||||
@@ -35,7 +31,6 @@ import {ColorPickerModule} from "ngx-color-picker";
|
||||
BrowserModule,
|
||||
BrowserAnimationsModule,
|
||||
AppRoutingModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
MatCardModule,
|
||||
MatGridListModule,
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<div id="mapid"></div>
|
||||
@@ -1 +0,0 @@
|
||||
#mapid { height: 50vh; }
|
||||
@@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LeafletMapComponent } from './leaflet-map.component';
|
||||
|
||||
describe('LeafletMapComponent', () => {
|
||||
let component: LeafletMapComponent;
|
||||
let fixture: ComponentFixture<LeafletMapComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ LeafletMapComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LeafletMapComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -1,52 +0,0 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import * as L from 'Leaflet';
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {GeoJSON} from "Leaflet";
|
||||
import {GeoJsonObject} from "geojson";
|
||||
|
||||
@Component({
|
||||
selector: 'app-leaflet-map',
|
||||
templateUrl: './leaflet-map.component.html',
|
||||
styleUrls: ['./leaflet-map.component.scss']
|
||||
})
|
||||
export class LeafletMapComponent implements OnInit {
|
||||
|
||||
private map;
|
||||
|
||||
private vectorLayerFiles: string[] = [
|
||||
'./assets/geolayer/flurstuecke-nutzer-baum-kompensation.geojson',
|
||||
// './assets/geolayer/bebauung.geojson',
|
||||
'./assets/geolayer/feldwege.geojson',
|
||||
'./assets/geolayer/gehoelze.geojson',
|
||||
'./assets/geolayer/gewaesser.geojson',
|
||||
// './assets/geolayer/grabensysteme.geojson',
|
||||
// './assets/geolayer/grabenuebergaenge.geojson',
|
||||
// './assets/geolayer/gsp_einsatzgebiete.geojson',
|
||||
// './assets/geolayer/stromleitungen.geojson',
|
||||
// './assets/geolayer/strommasten.geojson',
|
||||
// './assets/geolayer/windenergieanlagen.geojson',
|
||||
];
|
||||
|
||||
constructor(private http: HttpClient) {
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
|
||||
this.map = L.map('mapid').setView([53.1582, 8.7728], 13);
|
||||
// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
// attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
// }).addTo(this.map);
|
||||
|
||||
// L.marker([53.1582, 8.7728]).addTo(this.map)
|
||||
// .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
|
||||
// .openPopup();
|
||||
|
||||
const layers : any[] = await this.getGeoJsons();
|
||||
layers.forEach(layer => L.geoJSON(layer).addTo(this.map));
|
||||
}
|
||||
|
||||
async getGeoJsons() {
|
||||
const promises = this.vectorLayerFiles.map(file => this.http.get(file).toPromise());
|
||||
return await Promise.all(promises);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user