Mercurial > gemma
diff client/src/components/layers/Layerselect.vue @ 2932:173ce013a021
layers: difference layer now contains legend
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 04 Apr 2019 12:47:56 +0200 |
parents | c1f2b9148cc8 |
children | 1ac58e024942 |
line wrap: on
line diff
--- a/client/src/components/layers/Layerselect.vue Thu Apr 04 12:25:35 2019 +0200 +++ b/client/src/components/layers/Layerselect.vue Thu Apr 04 12:47:56 2019 +0200 @@ -21,6 +21,9 @@ <div v-if="isVisible && isBottleneckIsolineLayer"> <img class="rounded my-1 d-block" :src="isolinesLegendImgDataURL" /> </div> + <div v-if="isVisible && isBottleneckDifferences"> + <img class="rounded my-1 d-block" :src="differencesLegendImgDataURL" /> + </div> </div> </template> @@ -59,9 +62,15 @@ LegendElement: () => import("./LegendElement.vue") }, computed: { - ...mapState("map", ["isolinesLegendImgDataURL"]), + ...mapState("map", [ + "isolinesLegendImgDataURL", + "differencesLegendImgDataURL" + ]), isBottleneckIsolineLayer() { return this.layername == LAYERS.BOTTLENECKISOLINE; + }, + isBottleneckDifferences() { + return this.layername == LAYERS.DIFFERENCES; } }, methods: { @@ -90,6 +99,24 @@ 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>