Mercurial > gemma

comparison client/src/components/layers/LegendElement.vue @ 4273:9abb63b6b80a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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);