Mercurial > gemma
diff client/src/components/layers/LegendElement.vue @ 4273:9abb63b6b80a
Legend: make styles reloadable
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 28 Aug 2019 14:31:19 +0200 |
parents | dd8ec623b969 |
children | e4ff09ebc2c3 |
line wrap: on
line diff
--- a/client/src/components/layers/LegendElement.vue Wed Aug 28 11:42:44 2019 +0200 +++ b/client/src/components/layers/LegendElement.vue Wed Aug 28 14:31:19 2019 +0200 @@ -1,5 +1,12 @@ <template> - <div :id="id" class="legendelement"></div> + <div :id="id" class="legendelement"> + <img + v-if="!isVectorLayer" + style="margin: 0 auto;display: flex;" + :src="imgSrc" + :key="id" + /> + </div> </template> <script> @@ -30,11 +37,22 @@ props: ["layer"], data: function() { return { - myMap: null + myMap: null, + src: null, + url: null }; }, computed: { ...mapState("map", ["layers", "ongoingRefresh"]), + isVectorLayer() { + return this.layer.getType() === "VECTOR"; + }, + imgSrc() { + if (this.layer.get("id") === "DISTANCEMARKSAXIS") { + return require("@/assets/distancemarks-axis.png"); + } + return this.src; + }, id() { return ( "legendelement-" + @@ -53,8 +71,19 @@ watch: { ongoingRefresh() { if (this.ongoingRefresh) return; - if (this.layer.getType() == "VECTOR") { + if ( + this.layer.get("id") === "OPENSTREETMAP" || + this.layer.get("id") === "INLANDECDIS" || + this.layer.get("id") === "BOTTLENECKISOLINE" || + this.layer.get("id") === "DIFFERENCES" + ) { + // TODO: Do something useful? + return; + } + if (this.isVectorLayer) { this.recreateLayers(); + } else { + this.loadImageSrc(); } }, mstyle(newStyle, oldStyle) { @@ -77,29 +106,24 @@ // TODO: Do something useful? return; } - let img = document.createElement("img"); - img.setAttribute("style", "margin: 0 auto;display: flex;"); - if (this.layer.get("id") === "DISTANCEMARKSAXIS") { - img.setAttribute("src", require("@/assets/distancemarks-axis.png")); - } else { - // for simple WMS legends. - let url = - `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + - this.layer.getSource().getParams().LAYERS + - `&legend_options=columns:4;fontAntiAliasing:true`; - HTTP.get(url, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token") - }, - responseType: "blob" - }).then(response => { - img.setAttribute("src", URL.createObjectURL(response.data)); - }); - } - this.$el.appendChild(img); + this.url = + `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + + this.layer.getSource().getParams().LAYERS + + `&legend_options=columns:4;fontAntiAliasing:true`; + this.loadImageSrc(); } }, methods: { + loadImageSrc() { + HTTP.get(this.url, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") + }, + responseType: "blob" + }).then(response => { + this.src = URL.createObjectURL(response.data); + }); + }, recreateLayers() { let vector = this.createVectorLayer();