Mercurial > gemma
comparison 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 |
comparison
equal
deleted
inserted
replaced
4272:dd8ec623b969 | 4273:9abb63b6b80a |
---|---|
1 <template> | 1 <template> |
2 <div :id="id" class="legendelement"></div> | 2 <div :id="id" class="legendelement"> |
3 <img | |
4 v-if="!isVectorLayer" | |
5 style="margin: 0 auto;display: flex;" | |
6 :src="imgSrc" | |
7 :key="id" | |
8 /> | |
9 </div> | |
3 </template> | 10 </template> |
4 | 11 |
5 <script> | 12 <script> |
6 /* This is Free Software under GNU Affero General Public License v >= 3.0 | 13 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
7 * without warranty, see README.md and license for details. | 14 * without warranty, see README.md and license for details. |
28 | 35 |
29 export default { | 36 export default { |
30 props: ["layer"], | 37 props: ["layer"], |
31 data: function() { | 38 data: function() { |
32 return { | 39 return { |
33 myMap: null | 40 myMap: null, |
41 src: null, | |
42 url: null | |
34 }; | 43 }; |
35 }, | 44 }, |
36 computed: { | 45 computed: { |
37 ...mapState("map", ["layers", "ongoingRefresh"]), | 46 ...mapState("map", ["layers", "ongoingRefresh"]), |
47 isVectorLayer() { | |
48 return this.layer.getType() === "VECTOR"; | |
49 }, | |
50 imgSrc() { | |
51 if (this.layer.get("id") === "DISTANCEMARKSAXIS") { | |
52 return require("@/assets/distancemarks-axis.png"); | |
53 } | |
54 return this.src; | |
55 }, | |
38 id() { | 56 id() { |
39 return ( | 57 return ( |
40 "legendelement-" + | 58 "legendelement-" + |
41 this.layer | 59 this.layer |
42 .get("label") | 60 .get("label") |
51 } | 69 } |
52 }, | 70 }, |
53 watch: { | 71 watch: { |
54 ongoingRefresh() { | 72 ongoingRefresh() { |
55 if (this.ongoingRefresh) return; | 73 if (this.ongoingRefresh) return; |
56 if (this.layer.getType() == "VECTOR") { | 74 if ( |
75 this.layer.get("id") === "OPENSTREETMAP" || | |
76 this.layer.get("id") === "INLANDECDIS" || | |
77 this.layer.get("id") === "BOTTLENECKISOLINE" || | |
78 this.layer.get("id") === "DIFFERENCES" | |
79 ) { | |
80 // TODO: Do something useful? | |
81 return; | |
82 } | |
83 if (this.isVectorLayer) { | |
57 this.recreateLayers(); | 84 this.recreateLayers(); |
85 } else { | |
86 this.loadImageSrc(); | |
58 } | 87 } |
59 }, | 88 }, |
60 mstyle(newStyle, oldStyle) { | 89 mstyle(newStyle, oldStyle) { |
61 // only recreate if there already was a style before | 90 // only recreate if there already was a style before |
62 if (oldStyle) { | 91 if (oldStyle) { |
75 this.layer.get("id") === "DIFFERENCES" | 104 this.layer.get("id") === "DIFFERENCES" |
76 ) { | 105 ) { |
77 // TODO: Do something useful? | 106 // TODO: Do something useful? |
78 return; | 107 return; |
79 } | 108 } |
80 let img = document.createElement("img"); | 109 this.url = |
81 img.setAttribute("style", "margin: 0 auto;display: flex;"); | 110 `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + |
82 if (this.layer.get("id") === "DISTANCEMARKSAXIS") { | 111 this.layer.getSource().getParams().LAYERS + |
83 img.setAttribute("src", require("@/assets/distancemarks-axis.png")); | 112 `&legend_options=columns:4;fontAntiAliasing:true`; |
84 } else { | 113 this.loadImageSrc(); |
85 // for simple WMS legends. | |
86 let url = | |
87 `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + | |
88 this.layer.getSource().getParams().LAYERS + | |
89 `&legend_options=columns:4;fontAntiAliasing:true`; | |
90 HTTP.get(url, { | |
91 headers: { | |
92 "X-Gemma-Auth": localStorage.getItem("token") | |
93 }, | |
94 responseType: "blob" | |
95 }).then(response => { | |
96 img.setAttribute("src", URL.createObjectURL(response.data)); | |
97 }); | |
98 } | |
99 this.$el.appendChild(img); | |
100 } | 114 } |
101 }, | 115 }, |
102 methods: { | 116 methods: { |
117 loadImageSrc() { | |
118 HTTP.get(this.url, { | |
119 headers: { | |
120 "X-Gemma-Auth": localStorage.getItem("token") | |
121 }, | |
122 responseType: "blob" | |
123 }).then(response => { | |
124 this.src = URL.createObjectURL(response.data); | |
125 }); | |
126 }, | |
103 recreateLayers() { | 127 recreateLayers() { |
104 let vector = this.createVectorLayer(); | 128 let vector = this.createVectorLayer(); |
105 | 129 |
106 this.myMap.removeLayer(this.myMap.getLayers()[0]); | 130 this.myMap.removeLayer(this.myMap.getLayers()[0]); |
107 this.myMap.addLayer(vector); | 131 this.myMap.addLayer(vector); |