Mercurial > gemma
comparison client/src/components/fairway/Profiles.vue @ 3006:44493664d40e
client: refactored layers config
Layers are not stored in the vuex store anymore but instead they are served from a factory function, so that
different maps can haved individual layer objects
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Thu, 11 Apr 2019 11:44:11 +0200 |
parents | 1b8bb4f89227 |
children | c71373594719 |
comparison
equal
deleted
inserted
replaced
3005:870d2a0e866b | 3006:44493664d40e |
---|---|
262 showLabelInput: false | 262 showLabelInput: false |
263 }; | 263 }; |
264 }, | 264 }, |
265 computed: { | 265 computed: { |
266 ...mapState("application", ["showProfiles"]), | 266 ...mapState("application", ["showProfiles"]), |
267 ...mapState("map", ["layers", "lineTool", "polygonTool", "cutTool"]), | 267 ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]), |
268 ...mapState("bottlenecks", [ | 268 ...mapState("bottlenecks", [ |
269 "bottlenecksList", | 269 "bottlenecksList", |
270 "surveys", | 270 "surveys", |
271 "surveysLoading" | 271 "surveysLoading" |
272 ]), | 272 ]), |
346 set(cut) { | 346 set(cut) { |
347 this.$store.commit("fairwayprofile/selectedCut", cut); | 347 this.$store.commit("fairwayprofile/selectedCut", cut); |
348 if (!cut) { | 348 if (!cut) { |
349 this.$store.commit("fairwayprofile/clearCurrentProfile"); | 349 this.$store.commit("fairwayprofile/clearCurrentProfile"); |
350 this.$store.commit("application/showSplitscreen", false); | 350 this.$store.commit("application/showSplitscreen", false); |
351 this.layers.CUTTOOL.getSource().clear(); | 351 this.openLayersMap |
352 .getLayer("CUTTOOL") | |
353 .getSource() | |
354 .clear(); | |
352 } | 355 } |
353 } | 356 } |
354 }, | 357 }, |
355 additionalSurveys() { | 358 additionalSurveys() { |
356 return this.surveys.filter(survey => survey !== this.selectedSurvey); | 359 return this.surveys.filter(survey => survey !== this.selectedSurvey); |
407 "X-Gemma-Auth": localStorage.getItem("token") | 410 "X-Gemma-Auth": localStorage.getItem("token") |
408 } | 411 } |
409 } | 412 } |
410 ) | 413 ) |
411 .then(() => { | 414 .then(() => { |
412 this.layers.DIFFERENCES.getSource().updateParams({ | 415 this.openLayersMap |
413 cql_filter: | 416 .getLayer("DIFFERENCES") |
414 "objnam='" + | 417 .getSource() |
415 this.selectedBottleneck + | 418 .updateParams({ |
416 "' AND " + | 419 cql_filter: |
417 "minuend='" + | 420 "objnam='" + |
418 this.selectedSurvey.date_info + | 421 this.selectedBottleneck + |
419 "' AND subtrahend='" + | 422 "' AND " + |
420 this.additionalSurvey.date_info + | 423 "minuend='" + |
421 "'" | 424 this.selectedSurvey.date_info + |
422 }); | 425 "' AND subtrahend='" + |
423 this.layers.BOTTLENECKISOLINE.setVisible(false); | 426 this.additionalSurvey.date_info + |
424 this.layers.DIFFERENCES.setVisible(true); | 427 "'" |
428 }); | |
429 this.openLayersMap.getLayer("BOTTLENECKISOLINE").setVisible(false); | |
430 this.openLayersMap.getLayer("DIFFERENCES").setVisible(true); | |
425 }) | 431 }) |
426 .catch(error => { | 432 .catch(error => { |
427 const { status, data } = error.response; | 433 const { status, data } = error.response; |
428 displayError({ | 434 displayError({ |
429 title: this.$gettext("Backend Error"), | 435 title: this.$gettext("Backend Error"), |
476 applyCoordinates(coordinates) { | 482 applyCoordinates(coordinates) { |
477 // allow only numbers | 483 // allow only numbers |
478 coordinates = coordinates.filter(c => Number(c) === c); | 484 coordinates = coordinates.filter(c => Number(c) === c); |
479 if (coordinates.length === 4) { | 485 if (coordinates.length === 4) { |
480 // draw line on map | 486 // draw line on map |
481 this.layers.CUTTOOL.getSource().clear(); | 487 this.openLayersMap |
488 .getLayer("CUTTOOL") | |
489 .getSource() | |
490 .clear(); | |
482 const cut = new Feature({ | 491 const cut = new Feature({ |
483 geometry: new LineString([ | 492 geometry: new LineString([ |
484 [coordinates[0], coordinates[1]], | 493 [coordinates[0], coordinates[1]], |
485 [coordinates[2], coordinates[3]] | 494 [coordinates[2], coordinates[3]] |
486 ]).transform("EPSG:4326", "EPSG:3857") | 495 ]).transform("EPSG:4326", "EPSG:3857") |
487 }); | 496 }); |
488 this.layers.CUTTOOL.getSource().addFeature(cut); | 497 this.openLayersMap |
498 .getLayer("CUTTOOL") | |
499 .getSource() | |
500 .addFeature(cut); | |
489 | 501 |
490 // draw diagram | 502 // draw diagram |
491 this.$store.dispatch("fairwayprofile/cut", cut); | 503 this.$store.dispatch("fairwayprofile/cut", cut); |
492 } else { | 504 } else { |
493 displayError({ | 505 displayError({ |