Mercurial > gemma
view client/src/components/layers/Layerselect.vue @ 3501:c5c7cc24fe72
client: spuc12: implemented nash sutcliffe for forcast vs reality accuracy indicator
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 28 May 2019 11:28:38 +0200 |
parents | 1559566662f5 |
children | 224ee5a3acb1 |
line wrap: on
line source
<template> <div class="d-flex flex-column flex-start px-2 border-bottom" style="border-bottom-style: dashed !important;" > <div class="d-flex"> <input v-for="map in openLayersMaps" :key="map.getTarget()" class="mt-1 mr-1" type="checkbox" @change="toggle(map)" :checked="isVisible(map)" /> <LegendElement class="pointer" :layer="layer" @click.native="toggle()" /> <label class="pointer layername form-check-label ml-1" @click="toggle()"> {{ label }} </label> </div> <div> <div v-if="isVisible() && layer.get('id') === 'BOTTLENECKISOLINE'"> <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> </div> <div v-if="isVisible() && layer.get('id') === 'DIFFERENCES'"> <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" /> </div> </div> </div> </template> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * * Thomas Junk <thomas.junk@intevation.de> * * Bernhard Reiter <bernhard.reiter@intevation.de> */ import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; import { mapState, mapGetters } from "vuex"; export default { components: { LegendElement: () => import("./LegendElement") }, props: ["layerId"], computed: { ...mapState("map", [ "openLayersMaps", "isolinesLegendImgDataURL", "differencesLegendImgDataURL" ]), ...mapGetters("map", ["openLayersMap"]), layer() { return this.openLayersMap().getLayer(this.layerId); }, label() { return this.$gettext(this.layer.get("label")); } }, methods: { toggle(map) { if (map) { map .getLayer(this.layerId) .setVisible(!map.getLayer(this.layerId).getVisible()); if ( this.layerId === "GAUGES" || this.layerId === "STRETCHES" || this.layerId === "BOTTLENECKS" || this.layerId === "SECTIONS" ) { map.getLayer("DATAAVAILABILITY").changed(); } } else { this.openLayersMaps.forEach(m => { m.getLayer(this.layerId).setVisible( !m.getLayer(this.layerId).getVisible() ); }); } }, isVisible(map) { if (map) { return map.getLayer(this.layerId).getVisible(); } else { let isVisible = false; this.openLayersMaps.forEach(m => { if (m.getLayer(this.layerId).getVisible()) { isVisible = true; } }); return isVisible; } }, loadLegendImage(layer, storeTarget) { HTTP.get( `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=${layer}&legend_options=columns:4;fontAntiAliasing:true`, { headers: { Accept: "image/png", "X-Gemma-Auth": localStorage.getItem("token") }, responseType: "blob" } ) .then(response => { const reader = new FileReader(); reader.onload = event => { this.$store.commit("map/" + storeTarget, event.target.result); }; reader.readAsDataURL(response.data); }) .catch(error => { displayError({ title: this.$gettext("Backend Error"), message: `${error.response.status}: ${error.response.statusText}` }); }); } }, created() { if (this.layer.get("id") === "BOTTLENECKISOLINE") { this.loadLegendImage( "sounding_results_contour_lines_geoserver", "isolinesLegendImgDataURL" ); } if (this.layer.get("id") === "DIFFERENCES") { this.loadLegendImage( "sounding_differences", "differencesLegendImgDataURL" ); } } }; </script>