Mercurial > gemma
comparison client/src/components/layers/LegendElement.vue @ 4346:827157bbc2a8
client: show bottleneck area as polygon in map legend
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Mon, 09 Sep 2019 11:51:34 +0200 |
parents | ee4c47c3e7b2 |
children | 81577c995161 |
comparison
equal
deleted
inserted
replaced
4345:69c54e2def2d | 4346:827157bbc2a8 |
---|---|
27 | 27 |
28 import { Map, View } from "ol"; | 28 import { Map, View } from "ol"; |
29 import Feature from "ol/Feature"; | 29 import Feature from "ol/Feature"; |
30 import { Vector as VectorLayer } from "ol/layer"; | 30 import { Vector as VectorLayer } from "ol/layer"; |
31 import { Vector as VectorSource } from "ol/source"; | 31 import { Vector as VectorSource } from "ol/source"; |
32 import Polygon from "ol/geom/Polygon"; | |
32 import LineString from "ol/geom/LineString"; | 33 import LineString from "ol/geom/LineString"; |
33 import Point from "ol/geom/Point"; | 34 import Point from "ol/geom/Point"; |
34 import { HTTP } from "@/lib/http"; | 35 import { HTTP } from "@/lib/http"; |
36 import { Stroke, Style, Fill } from "ol/style"; | |
35 | 37 |
36 export default { | 38 export default { |
37 props: ["layer"], | 39 props: ["layer"], |
38 data: function() { | 40 data: function() { |
39 return { | 41 return { |
134 }, | 136 }, |
135 recreateLayers() { | 137 recreateLayers() { |
136 let vector = this.createVectorLayer(); | 138 let vector = this.createVectorLayer(); |
137 | 139 |
138 this.myMap.removeLayer(this.myMap.getLayers()[0]); | 140 this.myMap.removeLayer(this.myMap.getLayers()[0]); |
141 | |
139 this.myMap.addLayer(vector); | 142 this.myMap.addLayer(vector); |
140 }, | 143 }, |
141 initMap() { | 144 initMap() { |
142 let vector = this.createVectorLayer(); | 145 let vector = this.createVectorLayer(); |
143 | 146 |
153 }) | 156 }) |
154 }); | 157 }); |
155 }, | 158 }, |
156 createVectorLayer() { | 159 createVectorLayer() { |
157 let mapStyle = this.layer.getStyle(); | 160 let mapStyle = this.layer.getStyle(); |
158 | 161 let feature; |
159 let feature = new Feature({ | 162 // show bottleneck legend as polygon |
160 geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) | 163 if (this.layer.get("id") === "BOTTLENECKS") { |
161 }); | 164 feature = new Feature({ |
162 | 165 geometry: new Polygon([ |
166 [[-1.7, -1.2], [-1.7, 0.5], [1.7, 1.2], [1.7, -0.5]] | |
167 ]) | |
168 }); | |
169 mapStyle = new Style({ | |
170 stroke: new Stroke({ | |
171 color: mapStyle.getStroke().getColor(), | |
172 // reduce the stroke width for better layout in map legend. | |
173 width: 2 | |
174 }), | |
175 fill: new Fill({ | |
176 color: mapStyle.getFill().getColor() | |
177 }) | |
178 }); | |
179 } else { | |
180 feature = new Feature({ | |
181 geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) | |
182 }); | |
183 } | |
163 // special case if we need to call the style function with a special | 184 // special case if we need to call the style function with a special |
164 // parameter or to detect a point layer | 185 // parameter or to detect a point layer |
165 let legendStyle = this.layer.get("forLegendStyle"); | 186 let legendStyle = this.layer.get("forLegendStyle"); |
166 if (legendStyle) { | 187 if (legendStyle) { |
167 if (legendStyle) { | 188 if (legendStyle) { |