Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/components/layers/LegendElement.vue Fri Sep 06 18:09:48 2019 +0200 +++ b/client/src/components/layers/LegendElement.vue Mon Sep 09 11:51:34 2019 +0200 @@ -29,9 +29,11 @@ import Feature from "ol/Feature"; import { Vector as VectorLayer } from "ol/layer"; import { Vector as VectorSource } from "ol/source"; +import Polygon from "ol/geom/Polygon"; import LineString from "ol/geom/LineString"; import Point from "ol/geom/Point"; import { HTTP } from "@/lib/http"; +import { Stroke, Style, Fill } from "ol/style"; export default { props: ["layer"], @@ -136,6 +138,7 @@ let vector = this.createVectorLayer(); this.myMap.removeLayer(this.myMap.getLayers()[0]); + this.myMap.addLayer(vector); }, initMap() { @@ -155,11 +158,29 @@ }, createVectorLayer() { let mapStyle = this.layer.getStyle(); - - let feature = new Feature({ - geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) - }); - + let feature; + // show bottleneck legend as polygon + if (this.layer.get("id") === "BOTTLENECKS") { + feature = new Feature({ + geometry: new Polygon([ + [[-1.7, -1.2], [-1.7, 0.5], [1.7, 1.2], [1.7, -0.5]] + ]) + }); + mapStyle = new Style({ + stroke: new Stroke({ + color: mapStyle.getStroke().getColor(), + // reduce the stroke width for better layout in map legend. + width: 2 + }), + fill: new Fill({ + color: mapStyle.getFill().getColor() + }) + }); + } else { + feature = new Feature({ + geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) + }); + } // special case if we need to call the style function with a special // parameter or to detect a point layer let legendStyle = this.layer.get("forLegendStyle");