Mercurial > gemma
changeset 1927:5a37ee321651
client: make isolines legend graphic internally availableo
* Add isolines legend graphic to vuex store. Rename it to reflect
it being a dataURL now.
* License header: for store/map.js add 2019 and author BER.
| author | Bernhard Reiter <bernhard@intevation.de> |
|---|---|
| date | Mon, 21 Jan 2019 10:56:14 +0100 |
| parents | 1220cfe96efd |
| children | 76ca071cb006 |
| files | client/src/components/layers/Layerselect.vue client/src/store/map.js |
| diffstat | 2 files changed, 15 insertions(+), 12 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/layers/Layerselect.vue Mon Jan 21 10:41:46 2019 +0100 +++ b/client/src/components/layers/Layerselect.vue Mon Jan 21 10:56:14 2019 +0100 @@ -17,7 +17,7 @@ }}</label> </div> <div v-if="isVisible && layername == 'Bottleneck isolines'"> - <img class="rounded my-1 d-block" :src="isolinesLegendImgUrl" /> + <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> </div> </div> </template> @@ -47,17 +47,16 @@ * * Bernhard Reiter <bernhard.reiter@intevation.de> */ import { HTTP } from "@/lib/http"; +import { mapState } from "vuex"; export default { props: ["layername", "layerindex", "isVisible"], name: "layerselect", - data() { - return { - isolinesLegendImgUrl: "" - }; - }, components: { LegendElement: () => import("./LegendElement.vue") }, + computed: { + ...mapState("map", ["isolinesLegendImgDataURL"]) + }, methods: { visibilityToggled() { this.$emit("visibilityToggled", this.layerindex); @@ -65,8 +64,7 @@ }, created() { // fetch legend image for bottleneck isolines - // directly read as dataURL so it is reusable later - // TODO: move to store + // directly read it as dataURL so it is reusable later if (this.layername == "Bottleneck isolines") { 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"; @@ -80,7 +78,7 @@ var that = this; const reader = new FileReader(); reader.onload = function() { - that.isolinesLegendImgUrl = this.result; + that.$store.commit("map/isolinesLegendImgDataURL", this.result); }; reader.readAsDataURL(response.data); });
--- a/client/src/store/map.js Mon Jan 21 10:41:46 2019 +0100 +++ b/client/src/store/map.js Mon Jan 21 10:56:14 2019 +0100 @@ -4,13 +4,14 @@ * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * - * Copyright (C) 2018 by via donau + * Copyright (C) 2018, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): - * Markus Kottländer <markus@intevation.de> - * Thomas Junk <thomas.junk@intevation.de> + * * Bernhard Reiter <bernhard.reiter@intevation.de> + * * Markus Kottländer <markus@intevation.de> + * * Thomas Junk <thomas.junk@intevation.de> */ //import { HTTP } from "../lib/http"; @@ -45,6 +46,7 @@ lineTool: null, // open layers interaction object (Draw) polygonTool: null, // open layers interaction object (Draw) cutTool: null, // open layers interaction object (Draw) + isolinesLegendImgDataURL: "", layers: [ { name: "Open Streetmap", @@ -393,6 +395,9 @@ center: fromLonLat(coordinates, view.getProjection()), duration: 700 }); + }, + isolinesLegendImgDataURL: (state, isolinesLegendImgDataURL) => { + state.isolinesLegendImgDataURL = isolinesLegendImgDataURL; } }, actions: {