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({