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) {