Mercurial > gemma
comparison client/src/map/store.js @ 967:2025074ad835
refac: extracted layer configuration to layers
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 17 Oct 2018 15:51:48 +0200 |
parents | a22f66acfd96 |
children | 3da707172772 |
comparison
equal
deleted
inserted
replaced
966:6114c512508b | 967:2025074ad835 |
---|---|
1 //import { HTTP } from "../lib/http"; | 1 //import { HTTP } from "../lib/http"; |
2 | 2 |
3 import TileWMS from "ol/source/TileWMS.js"; | 3 import { layers } from "../layers/layers"; |
4 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; | |
5 import OSM from "ol/source/OSM"; | |
6 import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js"; | |
7 import VectorSource from "ol/source/Vector.js"; | |
8 import { bbox as bboxStrategy } from "ol/loadingstrategy"; | |
9 import { HTTP } from "../application/lib/http"; | |
10 | 4 |
11 const MapStore = { | 5 const MapStore = { |
12 namespaced: true, | 6 namespaced: true, |
13 state: { | 7 state: { |
14 openLayersMap: null, | 8 openLayersMap: null, |
15 layers: [ | 9 layers: layers, |
16 { | |
17 name: "Open Streetmap", | |
18 data: new TileLayer({ | |
19 source: new OSM() | |
20 }), | |
21 isVisible: true | |
22 }, | |
23 { | |
24 name: "Inland ECDIS chart Danube", | |
25 data: new TileLayer({ | |
26 source: new TileWMS({ | |
27 preload: 1, | |
28 url: "https://demo.d4d-portal.info/wms", | |
29 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } | |
30 }) | |
31 }), | |
32 isVisible: true | |
33 }, | |
34 { | |
35 name: "Fairway Dimensions", | |
36 data: new VectorLayer({ | |
37 source: new VectorSource(), | |
38 style: function(feature) { | |
39 return [ | |
40 new Style({ | |
41 stroke: new Stroke({ | |
42 color: "rgba(0, 0, 255, 1.0)", | |
43 width: 2 | |
44 }) | |
45 }), | |
46 new Style({ | |
47 text: new Text({ | |
48 font: 'bold 12px "Open Sans", "sans-serif"', | |
49 placement: "line", | |
50 fill: new Fill({ | |
51 color: "black" | |
52 }), | |
53 text: "LOS: " + feature.get("level_of_service").toString() | |
54 //, zIndex: 10 | |
55 }) | |
56 }) | |
57 ]; | |
58 } | |
59 }), | |
60 isVisible: true | |
61 }, | |
62 { | |
63 name: "Waterway Area, named", | |
64 data: new VectorLayer({ | |
65 source: new VectorSource({ | |
66 strategy: bboxStrategy | |
67 }), | |
68 style: new Style({ | |
69 stroke: new Stroke({ | |
70 color: "rgba(0, 132, 0, 1)", | |
71 width: 2 | |
72 }) | |
73 }) | |
74 }), | |
75 isVisible: false | |
76 }, | |
77 { | |
78 name: "Waterway Area", | |
79 data: new VectorLayer({ | |
80 source: new VectorSource({ | |
81 strategy: bboxStrategy | |
82 }), | |
83 style: new Style({ | |
84 stroke: new Stroke({ | |
85 color: "rgba(0, 102, 0, 1)", | |
86 width: 2 | |
87 }) | |
88 }) | |
89 }), | |
90 isVisible: true | |
91 }, | |
92 { | |
93 name: "Waterway Axis", | |
94 data: new VectorLayer({ | |
95 source: new VectorSource({ | |
96 strategy: bboxStrategy | |
97 }), | |
98 style: new Style({ | |
99 stroke: new Stroke({ | |
100 color: "rgba(0, 0, 255, .5)", | |
101 lineDash: [5, 5], | |
102 width: 2 | |
103 }) | |
104 }) | |
105 }), | |
106 isVisible: true | |
107 }, | |
108 { | |
109 name: "Distance marks", | |
110 forLegendStyle: { point: true, resolution: 8 }, | |
111 data: new VectorLayer({ | |
112 source: new VectorSource({ | |
113 strategy: bboxStrategy | |
114 }) | |
115 }), | |
116 isVisible: false | |
117 }, | |
118 { | |
119 name: "Bottlenecks", | |
120 data: new VectorLayer({ | |
121 source: new VectorSource({ | |
122 strategy: bboxStrategy | |
123 }), | |
124 style: new Style({ | |
125 stroke: new Stroke({ | |
126 color: "rgba(230, 230, 10, .8)", | |
127 width: 4 | |
128 }), | |
129 fill: new Fill({ | |
130 color: "rgba(230, 230, 10, .3)" | |
131 }) | |
132 }) | |
133 }), | |
134 isVisible: true | |
135 }, | |
136 { | |
137 name: "Bottleneck isolines", | |
138 data: new TileLayer({ | |
139 source: new TileWMS({ | |
140 preload: 0, | |
141 projection: "EPSG:3857", | |
142 url: window.location.origin + "/api/internal/wms", | |
143 params: { | |
144 LAYERS: "sounding_results_contour_lines_geoserver", | |
145 VERSION: "1.1.1", | |
146 TILED: true | |
147 }, | |
148 tileLoadFunction: function(tile, src) { | |
149 // console.log("calling for", tile, src); | |
150 HTTP.get(src, { | |
151 headers: { | |
152 "X-Gemma-Auth": localStorage.getItem("token") | |
153 }, | |
154 responseType: "blob" | |
155 }).then(response => { | |
156 tile.getImage().src = URL.createObjectURL(response.data); | |
157 }); | |
158 } // TODO tile.setState(TileState.ERROR); | |
159 }) | |
160 }), | |
161 isVisible: false | |
162 }, | |
163 { | |
164 name: "Distance marks, Axis", | |
165 forLegendStyle: { point: true, resolution: 8 }, | |
166 data: new VectorLayer({ | |
167 source: new VectorSource({ | |
168 strategy: bboxStrategy | |
169 }), | |
170 style: function(feature, resolution) { | |
171 if (resolution < 10) { | |
172 var s = new Style({ | |
173 image: new CircleStyle({ | |
174 radius: 5, | |
175 fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }), | |
176 stroke: new Stroke({ color: "blue", width: 1 }) | |
177 }) | |
178 }); | |
179 if (resolution < 6) { | |
180 s.setText( | |
181 new Text({ | |
182 offsetY: 12, | |
183 font: '10px "Open Sans", "sans-serif"', | |
184 fill: new Fill({ | |
185 color: "black" | |
186 }), | |
187 text: (feature.get("hectometre") / 10).toString() | |
188 }) | |
189 ); | |
190 } | |
191 return s; | |
192 } else { | |
193 return []; | |
194 } | |
195 } | |
196 }), | |
197 isVisible: true | |
198 } | |
199 ], | |
200 // note that some identified features may not have an id | 10 // note that some identified features may not have an id |
201 // especially related to drawing in our own vector layer | 11 // especially related to drawing in our own vector layer |
202 identifiedFeatures: [], | 12 identifiedFeatures: [], |
203 currentMeasurement: null, | 13 currentMeasurement: null, |
204 selectedMorph: null | 14 selectedMorph: null |