Commit dc9a0e3c13dbf0773530a20152c26c7eb7451201
1 parent
0f50c3be
Road fatality
Showing
6 changed files
with
112 additions
and
4 deletions
Show diff stats
src/app/data/road/road.component.html
@@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
2 | <road-map [identificator]="'road-map'"></road-map> | 2 | <road-map [identificator]="'road-map'"></road-map> |
3 | <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups | 3 | <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups |
4 | toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)" | 4 | toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)" |
5 | - (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()" | 5 | + (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()" |
6 | (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged($event)" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)"> | 6 | (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged($event)" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)"> |
7 | </ag-grid-ng2> | 7 | </ag-grid-ng2> |
8 | <div class="control_button"> | 8 | <div class="control_button"> |
src/app/data/road/road.component.ts
@@ -13,6 +13,7 @@ import { RendererComponent } from '../../../helpers/renderer.component'; | @@ -13,6 +13,7 @@ import { RendererComponent } from '../../../helpers/renderer.component'; | ||
13 | import { RoadTypeSelectList } from '../../../models/road-type-select-list'; | 13 | import { RoadTypeSelectList } from '../../../models/road-type-select-list'; |
14 | 14 | ||
15 | import { routerTransition } from '../../../animations/router.animation'; | 15 | import { routerTransition } from '../../../animations/router.animation'; |
16 | +import {Way} from "../../../models/way"; | ||
16 | 17 | ||
17 | @Component({ | 18 | @Component({ |
18 | // tslint:disable-next-line:component-selector | 19 | // tslint:disable-next-line:component-selector |
@@ -35,8 +36,14 @@ export class RoadComponent extends StatementBase { | @@ -35,8 +36,14 @@ export class RoadComponent extends StatementBase { | ||
35 | } | 36 | } |
36 | 37 | ||
37 | public showOnMap(): void { | 38 | public showOnMap(): void { |
38 | - console.log(this.gridOptions.api.getSelectedRows()[0].id); | ||
39 | - this.mapComponent.showMap(); | 39 | + let selectedRows: any[] = this.gridOptions.api.getSelectedRows(); |
40 | + if (selectedRows.length) { | ||
41 | + let id = selectedRows[0].id; | ||
42 | + this.service.getRelation(id).then(x => { | ||
43 | + this.mapComponent.setWays(x); | ||
44 | + return x; | ||
45 | + }); | ||
46 | + } | ||
40 | } | 47 | } |
41 | 48 | ||
42 | protected createColumnDefs(): any[] { | 49 | protected createColumnDefs(): any[] { |
src/components/road-map.component.ts
1 | import { Component, Input, AfterViewInit } from '@angular/core'; | 1 | import { Component, Input, AfterViewInit } from '@angular/core'; |
2 | import * as L from 'leaflet'; | 2 | import * as L from 'leaflet'; |
3 | +import { Way } from '../models/way'; | ||
3 | 4 | ||
4 | @Component({ | 5 | @Component({ |
5 | // tslint:disable-next-line:component-selector | 6 | // tslint:disable-next-line:component-selector |
@@ -9,6 +10,7 @@ import * as L from 'leaflet'; | @@ -9,6 +10,7 @@ import * as L from 'leaflet'; | ||
9 | export class RoadMapComponent implements AfterViewInit { | 10 | export class RoadMapComponent implements AfterViewInit { |
10 | protected isVisible: boolean = false; | 11 | protected isVisible: boolean = false; |
11 | protected map: L.Map; | 12 | protected map: L.Map; |
13 | + protected ways: Way[]; | ||
12 | @Input() identificator: string = 'mapID'; | 14 | @Input() identificator: string = 'mapID'; |
13 | 15 | ||
14 | public ngAfterViewInit(): void { | 16 | public ngAfterViewInit(): void { |
@@ -21,6 +23,46 @@ export class RoadMapComponent implements AfterViewInit { | @@ -21,6 +23,46 @@ export class RoadMapComponent implements AfterViewInit { | ||
21 | this.isVisible = true; | 23 | this.isVisible = true; |
22 | } | 24 | } |
23 | public getHeight(): string { | 25 | public getHeight(): string { |
24 | - return this.isVisible ? '100%' : '0'; | 26 | + return this.isVisible ? '100%' : '100%'; |
27 | + } | ||
28 | + public setWays(ways: Way[]): void { | ||
29 | + this.ways = ways; | ||
30 | + this.showWays(); | ||
31 | + } | ||
32 | + protected showWays(): void { | ||
33 | + let minLat: number = 0; | ||
34 | + let maxLat: number = 0; | ||
35 | + let minLon: number = 0; | ||
36 | + let maxLon: number = 0; | ||
37 | + console.log(this.ways); | ||
38 | + this.ways.forEach((way) => { | ||
39 | + let nodes: L.LatLng[] = []; | ||
40 | + way.nodes.forEach((node) => { | ||
41 | + if (minLat == 0) { | ||
42 | + minLat = node.lat; | ||
43 | + maxLat = node.lat; | ||
44 | + } else { | ||
45 | + minLat = (minLat > node.lat)?node.lat:minLat; | ||
46 | + maxLat = (maxLat < node.lat)?node.lat:maxLat; | ||
47 | + } | ||
48 | + if (minLon == 0) { | ||
49 | + minLon = node.lon; | ||
50 | + maxLon = node.lon; | ||
51 | + } else { | ||
52 | + minLon = (minLon > node.lon)?node.lon:minLon; | ||
53 | + maxLon = (maxLon < node.lon)?node.lon:maxLon; | ||
54 | + } | ||
55 | + let latLng = node.getLatLng(); | ||
56 | + nodes.push(latLng); | ||
57 | + }); | ||
58 | + way.polyline = L.polyline(nodes, {color: 'red'}).addTo(this.map); | ||
59 | + console.log(way.polyline); | ||
60 | + }); | ||
61 | + this.map.fitBounds([ | ||
62 | + [minLat, minLon], | ||
63 | + [maxLat, maxLon] | ||
64 | + ]); | ||
65 | + console.log(minLat, maxLat, minLon, maxLon); | ||
66 | + this.showMap(); | ||
25 | } | 67 | } |
26 | } | 68 | } |
1 | +import * as L from 'leaflet'; | ||
2 | + | ||
3 | +export class Node { | ||
4 | + id: number; | ||
5 | + index: number; | ||
6 | + lat: number; | ||
7 | + lon: number; | ||
8 | + latLng: L.LatLng; | ||
9 | + protected createLatLng(): void { | ||
10 | + this.latLng = L.latLng(this.lat, this.lon); | ||
11 | + } | ||
12 | + public getLatLng(): L.LatLng { | ||
13 | + if (this.latLng == undefined) { | ||
14 | + this.createLatLng(); | ||
15 | + } | ||
16 | + return this.latLng; | ||
17 | + } | ||
18 | + public setLatLng(lat: number, lon: number): void { | ||
19 | + this.lat = lat; | ||
20 | + this.lon = lon; | ||
21 | + this.createLatLng(); | ||
22 | + } | ||
23 | +} | ||
0 | \ No newline at end of file | 24 | \ No newline at end of file |
src/services/road.service.ts
@@ -4,6 +4,9 @@ import { Http } from '@angular/http'; | @@ -4,6 +4,9 @@ import { Http } from '@angular/http'; | ||
4 | import { StatementBaseService } from './statement.base.service'; | 4 | import { StatementBaseService } from './statement.base.service'; |
5 | 5 | ||
6 | import { Road } from '../models/road'; | 6 | import { Road } from '../models/road'; |
7 | +import {Way} from "../models/way"; | ||
8 | +import {Node} from "../models/node"; | ||
9 | +import {id} from "@swimlane/ngx-charts/release/utils/id"; | ||
7 | 10 | ||
8 | @Injectable() | 11 | @Injectable() |
9 | export class RoadService extends StatementBaseService { | 12 | export class RoadService extends StatementBaseService { |
@@ -14,10 +17,35 @@ export class RoadService extends StatementBaseService { | @@ -14,10 +17,35 @@ export class RoadService extends StatementBaseService { | ||
14 | public createModel(): Object { | 17 | public createModel(): Object { |
15 | return new Road(); | 18 | return new Road(); |
16 | } | 19 | } |
20 | + public getRelation(id: number): Promise<any> { | ||
21 | + return this.http.get(this.url + '/relation?id=' + id, { headers: this.headers }) | ||
22 | + .toPromise() | ||
23 | + .then(x => this.decodeWays(x.json())) | ||
24 | + .catch(this.handleError); | ||
25 | + } | ||
17 | protected parseModels(json: any): any[] { | 26 | protected parseModels(json: any): any[] { |
18 | return json.roadEditDsM as Road[]; | 27 | return json.roadEditDsM as Road[]; |
19 | }; | 28 | }; |
20 | protected parseModel(json: any): any { | 29 | protected parseModel(json: any): any { |
21 | return json as Road; | 30 | return json as Road; |
22 | }; | 31 | }; |
32 | + protected decodeWays(json: Object[]): Way[] { | ||
33 | + let result: Way[] = []; | ||
34 | + json.forEach((way: Way) => { | ||
35 | + let nodes: Node[] = []; | ||
36 | + way.nodes.forEach((node: Node) => { | ||
37 | + let nodeObj: Node = new Node(); | ||
38 | + nodeObj.id = node.id; | ||
39 | + nodeObj.index = node.index; | ||
40 | + nodeObj.lat = node.lat; | ||
41 | + nodeObj.lon = node.lon; | ||
42 | + nodes.push(nodeObj); | ||
43 | + }); | ||
44 | + let wayObj: Way = new Way(); | ||
45 | + wayObj.id = way.id; | ||
46 | + wayObj.nodes = nodes; | ||
47 | + result.push(wayObj); | ||
48 | + }); | ||
49 | + return result; | ||
50 | + } | ||
23 | } | 51 | } |