Mercurial > gemma
view client/src/components/layers/Layerselect.vue @ 2957:b74ebeb2bdc8
client: layers: improved structure of layer configuration
The object is now less cluttered, access to the layers is more direct, no need for helper methods
anymore.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 08 Apr 2019 15:32:53 +0200 |
parents | 3c1b9a6ee04e |
children | 41cdff9b7f4a |
line wrap: on
line source
<template> <div> <div class="form-check d-flex flex-start"> <input class="form-check-input" type="checkbox" @change="visibilityToggled" :checked="layer.getVisible()" /> <LegendElement :layer="layer"></LegendElement> <label class="pointer layername form-check-label ml-2" @click="visibilityToggled" > {{ label }} </label> </div> <div v-if="layer.getVisible() && isBottleneckIsolineLayer"> <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> </div> <div v-if="layer.getVisible() && isBottleneckDifferences"> <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" /> </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 { mapState } from "vuex"; export default { props: ["layer"], components: { LegendElement: () => import("./LegendElement.vue") }, computed: { ...mapState("map", [ "layers", "isolinesLegendImgDataURL", "differencesLegendImgDataURL" ]), isBottleneckIsolineLayer() { return this.layer == this.layers.BOTTLENECKISOLINE; }, isBottleneckDifferences() { return this.layer == this.layers.DIFFERENCES; }, label() { return this.$gettext(this.layer.get("label")); } }, methods: { visibilityToggled() { this.layer.setVisible(!this.layer.getVisible()); } }, created() { // fetch legend image for bottleneck isolines // directly read it as dataURL so it is reusable later if (this.isBottleneckIsolineLayer) { const src = "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_results_contour_lines_geoserver&legend_options=columns:4;fontAntiAliasing:true"; HTTP.get(src, { headers: { Accept: "image/png", "X-Gemma-Auth": localStorage.getItem("token") }, responseType: "blob" }).then(response => { var that = this; const reader = new FileReader(); reader.onload = function() { that.$store.commit("map/isolinesLegendImgDataURL", this.result); }; reader.readAsDataURL(response.data); }); } if (this.isBottleneckDifferences) { const src = "/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=sounding_differences&legend_options=columns:4;fontAntiAliasing:true"; HTTP.get(src, { headers: { Accept: "image/png", "X-Gemma-Auth": localStorage.getItem("token") }, responseType: "blob" }).then(response => { var that = this; const reader = new FileReader(); reader.onload = function() { that.$store.commit("map/differencesLegendImgDataURL", this.result); }; reader.readAsDataURL(response.data); }); } } }; </script>