Mercurial > gemma
view client/src/components/layers/Layerselect.vue @ 5426:67ffa7517888 marking-single-beam
Added new group layer 'sounding_results'.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Fri, 09 Jul 2021 23:08:08 +0200 |
parents | 6b054b91d9b2 |
children | 453a33b0717d |
line wrap: on
line source
<template> <div class="d-flex flex-column flex-start px-2 border-bottom" style="border-bottom-style: dashed !important;" v-tooltip="{ content: rightclickLabel, delay: { show: 1000, hide: 100 }, placement: 'bottom', autohide: true }" > <div class="d-flex" @click.right.prevent="selectSingle"> <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.left="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", "ongoingRefresh", "singleLayerVisible" ]), ...mapGetters("map", ["openLayersMap"]), ...mapState("bottlenecks", ["selectedSurvey"]), layer() { return this.openLayersMap().getLayer(this.layerId); }, rightclickLabel() { if (this.singleLayerVisible) return this.$gettext("Right click to select previous layers"); return this.$gettext("Right click to select single layer"); }, label() { return this.$gettext(this.layer.get("label")); } }, watch: { ongoingRefresh() { if (this.ongoingRefresh) return; this.refreshLegend(); } }, methods: { selectSingle() { this.$store.commit("map/viewSingleLayer", this.layerId); }, refreshLegend() { if (this.layer.get("id") === "BOTTLENECKISOLINE") { this.loadLegendImage( "sounding_results_areas_geoserver", "isolinesLegendImgDataURL" ); } if (this.layer.get("id") === "DIFFERENCES") { this.loadLegendImage( "sounding_differences", "differencesLegendImgDataURL" ); } }, toggle(map) { if (map) { if ( (this.layerId === "BOTTLENECKISOLINE" || this.layerId === "DIFFERENCES") && !this.selectedSurvey ) { map .getLayer(this.layerId) .getSource() .updateParams({ cql_filter: `bottleneck_id='NO_BOTTLENECK_SELECTED'` }); } 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.3.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=${layer}&legend_options=columns:4;fontAntiAliasing:true&SCALE=4000`, { 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 => { let message = "Backend not reachable"; if (error.response) { const { status, data } = error.response; message = `${status}: ${data.message || data}`; } displayError({ title: this.$gettext("Backend Error"), message: message }); }); } }, created() { this.refreshLegend(); } }; </script>