Repository navigation
Expand file tree
/
Copy pathangular.js
More file actions
105 lines (91 loc) · 3.45 KB
/
Copy pathangular.js
File metadata and controls
105 lines (91 loc) · 3.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { Component, AfterViewInit } from '@angular/core';
import { color } from 'openlayers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
private json;
private updatedstyle;
private clickRefresh;
waterColors = ['#0000CD', '#4169E1', '#0000FF', '#1E90FF'];
defaultWaterColor = this.waterColors[0];
parkColors = ['#25ff00', '#25ff00', '#a29708', '#fe6c00'];
defaultParkColor = this.parkColors[0]
defaultSize = 30
constructor() {
}
ngAfterViewInit() {
let layer = new (<any>ol).mapsuite.VectorTileLayer('../assets/data/light.json', {
'apiKey': 'WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~'
});
let map = new ol.Map({
loadTilesWhileInteracting: true,
layers: [layer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-96.917754, 33.087878]),
maxZoom: 19,
maxResolution: 40075016.68557849 / 512,
zoom: 15,
}),
});
let getJson = () => {
let readTextFile = new Promise(function (resolve, reject) {
let file = "../assets/data/light.json";
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function (ERR) {
if (rawFile.readyState === 4) {
resolve(rawFile.responseText);
}
}
rawFile.send(null);
});
return readTextFile;
}
getJson().then((data) => {
this.json = data;
this.json = JSON.parse(this.json);
})
this.updatedstyle = (poiSize, waterColor, parkColor) => {
let styles = this.json.styles;
let stylesLength = styles.length;
for (let i = 0; i < stylesLength; i++) {
if (styles[i].id === 'poi_icon') {
styles[i]['point-size'] = poiSize;
} else if (styles[i].id === 'water') {
styles[i]['polygon-fill'] = waterColor
} else if (styles[i].id === 'landcover') {
let length = styles[i]['style'].length;
for (let j = 0; j < length; j++) {
let innerStyle = styles[i]['style'];
if (innerStyle[j]['filter'] === "class='park'") {
innerStyle[j]['polygon-fill'] = parkColor;
}
}
}
}
return this.json;
}
this.clickRefresh = (json) => {
let layers = map.getLayers().getArray();
map.removeLayer(layers[0]);
let newLayer = new (<any>ol).mapsuite.VectorTileLayer(json, {
'apiKey': 'WPLmkj3P39OPectosnM1jRgDixwlti71l8KYxyfP2P0~'
});
map.addLayer(newLayer);
}
}
refresh(formValue: formValueConfig): void {
this.json = this.updatedstyle(formValue.poiSize || 30, formValue.waterColor || '#0000CD', formValue.parkColor || '#fe6c00');
this.clickRefresh(this.json)
}
}
interface formValueConfig {
poiSize?: number,
waterColor?: string,
parkColor?: string
};