Mercurial > gemma

comparison client/src/components/map/Map.vue @ 4271:315474a66589

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Map: refreshing layers triggers reloading of styles
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 28 Aug 2019 11:06:47 +0200
parents a5694f6d62a4
children 2261462ddcdc
comparison
equal deleted inserted replaced
4270:e4d6c6339cb4 4271:315474a66589
57 return { 57 return {
58 map: null 58 map: null
59 }; 59 };
60 }, 60 },
61 computed: { 61 computed: {
62 ...mapState("map", ["initialLoad", "extent", "syncedMaps", "syncedView"]), 62 ...mapState("map", [
63 "initialLoad",
64 "extent",
65 "syncedMaps",
66 "syncedView",
67 "ongoingRefresh"
68 ]),
63 ...mapState("bottlenecks", ["selectedSurvey"]), 69 ...mapState("bottlenecks", ["selectedSurvey"]),
64 ...mapState("fairwayprofile", ["additionalSurvey"]), 70 ...mapState("fairwayprofile", ["additionalSurvey"]),
65 ...mapState("application", ["paneSetup", "paneRotate", "config"]), 71 ...mapState("application", ["paneSetup", "paneRotate", "config"]),
66 ...mapState("imports", ["selectedStretchId", "selectedSectionId"]), 72 ...mapState("imports", ["selectedStretchId", "selectedSectionId"]),
67 layers() { 73 layers() {
80 ).length 86 ).length
81 ); 87 );
82 } 88 }
83 }, 89 },
84 watch: { 90 watch: {
91 ongoingRefresh() {
92 if (this.ongoingRefresh) return;
93 this.loadStyles();
94 },
85 paneSetup() { 95 paneSetup() {
86 this.$nextTick(() => this.map.updateSize()); 96 this.$nextTick(() => this.map.updateSize());
87 }, 97 },
88 paneRotate() { 98 paneRotate() {
89 this.$nextTick(() => this.map.updateSize()); 99 this.$nextTick(() => this.map.updateSize());
241 zoom: event.map.getView().getZoom() 251 zoom: event.map.getView().getZoom()
242 }); 252 });
243 }); 253 });
244 this.$store.dispatch("map/openLayersMap", this.map); 254 this.$store.dispatch("map/openLayersMap", this.map);
245 this.$store.dispatch("map/initIdentifyTool", this.map); 255 this.$store.dispatch("map/initIdentifyTool", this.map);
256 },
257 loadStyles() {
258 // load configured bottleneck colors
259 HTTP.get("/system/settings", {
260 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
261 })
262 .then(response => {
263 let btlnStrokeC = response.data.bottlenecks_stroke,
264 btlnFillC = response.data.bottlenecks_fill,
265 strFillC = response.data.stretches_fill,
266 strStrokeC = response.data.stretches_stroke,
267 secStrokeC = response.data.sections_stroke,
268 secFillC = response.data.sections_fill,
269 fwd1StrokeC = response.data.fairwaydimensionslos1_stroke,
270 fwd1FillC = response.data.fairwaydimensionslos1_fill,
271 fwd2StrokeC = response.data.fairwaydimensionslos2_stroke,
272 fwd2FillC = response.data.fairwaydimensionslos2_fill,
273 fwd3StrokeC = response.data.fairwaydimensionslos3_stroke,
274 fwd3FillC = response.data.fairwaydimensionslos3_fill,
275 wwpStokeC = response.data.waterwayprofiles_stroke;
276 let btlnStyle = new Style({
277 stroke: new Stroke({
278 color: btlnStrokeC,
279 width: 4
280 }),
281 fill: new Fill({
282 color: btlnFillC
283 })
284 }),
285 strStyle = new Style({
286 stroke: new Stroke({
287 color: strStrokeC,
288 width: 2
289 }),
290 fill: new Fill({
291 color: strFillC
292 })
293 }),
294 secStyle = new Style({
295 stroke: new Stroke({
296 color: secStrokeC,
297 width: 5
298 }),
299 fill: new Fill({
300 color: secFillC
301 })
302 }),
303 fwd1Style = new Style({
304 stroke: new Stroke({
305 lineDash: [2, 4],
306 lineCap: "round",
307 color: fwd1StrokeC,
308 width: 2
309 }),
310 fill: new Fill({
311 color: fwd1FillC
312 })
313 }),
314 fwd2Style = new Style({
315 stroke: new Stroke({
316 lineDash: [3, 6],
317 lineCap: "round",
318 color: fwd2StrokeC,
319 width: 2
320 }),
321 fill: new Fill({
322 color: fwd2FillC
323 })
324 }),
325 fwd3Style = new Style({
326 stroke: new Stroke({
327 color: fwd3StrokeC,
328 width: 2
329 }),
330 fill: new Fill({
331 color: fwd3FillC
332 })
333 }),
334 wwpStyle = new Style({
335 stroke: new Stroke({
336 color: wwpStokeC,
337 lineDash: [5, 5],
338 width: 2
339 })
340 });
341 this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle);
342 this.layers
343 .get("FAIRWAYDIMENSIONSLOS1")
344 .setStyle(() => [fwd1Style, styles.textFW1]);
345 this.layers
346 .get("FAIRWAYDIMENSIONSLOS2")
347 .setStyle(() => [fwd2Style, styles.textFW2]);
348 this.layers
349 .get("FAIRWAYDIMENSIONSLOS3")
350 .setStyle(() => [fwd3Style, styles.textFW3]);
351 this.layers.get("SECTIONS").setStyle(secStyle);
352 this.layers.get("STRETCHES").setStyle(strStyle);
353 this.layers.get("BOTTLENECKS").setStyle(btlnStyle);
354 this.$store.commit("gauges/deleteNashSutcliffeCache");
355 this.$store.dispatch("map/refreshLayers");
356 })
357 .catch(error => {
358 console.log(error);
359 });
246 } 360 }
247 }, 361 },
248 mounted() { 362 mounted() {
249 // ToDo set path to correct endpoint in order to retrieve an OSM URL 363 // ToDo set path to correct endpoint in order to retrieve an OSM URL
250 HTTP.get("/system/config", { 364 HTTP.get("/system/config", {
269 this.updateBottleneckFilter( 383 this.updateBottleneckFilter(
270 this.additionalSurvey.bottleneck_id, 384 this.additionalSurvey.bottleneck_id,
271 this.additionalSurvey.date_info 385 this.additionalSurvey.date_info
272 ); 386 );
273 } 387 }
274 // load configured bottleneck colors 388 this.loadStyles();
275 HTTP.get("/system/settings", {
276 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
277 })
278 .then(response => {
279 let btlnStrokeC = response.data.bottlenecks_stroke,
280 btlnFillC = response.data.bottlenecks_fill,
281 strFillC = response.data.stretches_fill,
282 strStrokeC = response.data.stretches_stroke,
283 secStrokeC = response.data.sections_stroke,
284 secFillC = response.data.sections_fill,
285 fwd1StrokeC = response.data.fairwaydimensionslos1_stroke,
286 fwd1FillC = response.data.fairwaydimensionslos1_fill,
287 fwd2StrokeC = response.data.fairwaydimensionslos2_stroke,
288 fwd2FillC = response.data.fairwaydimensionslos2_fill,
289 fwd3StrokeC = response.data.fairwaydimensionslos3_stroke,
290 fwd3FillC = response.data.fairwaydimensionslos3_fill,
291 wwpStokeC = response.data.waterwayprofiles_stroke;
292 let btlnStyle = new Style({
293 stroke: new Stroke({
294 color: btlnStrokeC,
295 width: 4
296 }),
297 fill: new Fill({
298 color: btlnFillC
299 })
300 }),
301 strStyle = new Style({
302 stroke: new Stroke({
303 color: strStrokeC,
304 width: 2
305 }),
306 fill: new Fill({
307 color: strFillC
308 })
309 }),
310 secStyle = new Style({
311 stroke: new Stroke({
312 color: secStrokeC,
313 width: 5
314 }),
315 fill: new Fill({
316 color: secFillC
317 })
318 }),
319 fwd1Style = new Style({
320 stroke: new Stroke({
321 lineDash: [2, 4],
322 lineCap: "round",
323 color: fwd1StrokeC,
324 width: 2
325 }),
326 fill: new Fill({
327 color: fwd1FillC
328 })
329 }),
330 fwd2Style = new Style({
331 stroke: new Stroke({
332 lineDash: [3, 6],
333 lineCap: "round",
334 color: fwd2StrokeC,
335 width: 2
336 }),
337 fill: new Fill({
338 color: fwd2FillC
339 })
340 }),
341 fwd3Style = new Style({
342 stroke: new Stroke({
343 color: fwd3StrokeC,
344 width: 2
345 }),
346 fill: new Fill({
347 color: fwd3FillC
348 })
349 }),
350 wwpStyle = new Style({
351 stroke: new Stroke({
352 color: wwpStokeC,
353 lineDash: [5, 5],
354 width: 2
355 })
356 });
357 this.layers.get("WATERWAYPROFILES").setStyle(wwpStyle);
358 this.layers
359 .get("FAIRWAYDIMENSIONSLOS1")
360 .setStyle(() => [fwd1Style, styles.textFW1]);
361 this.layers
362 .get("FAIRWAYDIMENSIONSLOS2")
363 .setStyle(() => [fwd2Style, styles.textFW2]);
364 this.layers
365 .get("FAIRWAYDIMENSIONSLOS3")
366 .setStyle(() => [fwd3Style, styles.textFW3]);
367 this.layers.get("SECTIONS").setStyle(secStyle);
368 this.layers.get("STRETCHES").setStyle(strStyle);
369 this.layers.get("BOTTLENECKS").setStyle(btlnStyle);
370 this.$store.commit("gauges/deleteNashSutcliffeCache");
371 this.$store.dispatch("map/refreshLayers");
372 })
373 .catch(error => {
374 console.log(error);
375 });
376 }) 389 })
377 .catch(error => { 390 .catch(error => {
378 const { status, data } = error.response; 391 const { status, data } = error.response;
379 displayError({ 392 displayError({
380 title: "Backend Error", 393 title: "Backend Error",