Mercurial > gemma
changeset 804:21609ba97357
client: improve legendelements for layerselection
* Add a special hint to the layer data, so that we can detect
points and specify which resolution we want for the legend.
* Improve LineString to have a bend.
* Actually take styles of the layer into account.
* Do not act on TILE layers.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 15:00:52 +0200 |
parents | 30ff051e75e9 |
children | 12263aeb9c15 |
files | client/src/layers/LegendElement.vue client/src/map/store.js |
diffstat | 2 files changed, 55 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/layers/LegendElement.vue Thu Sep 27 14:00:50 2018 +0200 +++ b/client/src/layers/LegendElement.vue Thu Sep 27 15:00:52 2018 +0200 @@ -4,46 +4,78 @@ </template> <script> +import { mapGetters } from "vuex"; + import { Map, View } from "ol"; import Feature from "ol/Feature"; import { Vector as VectorLayer } from "ol/layer.js"; import { Vector as VectorSource } from "ol/source.js"; import LineString from "ol/geom/LineString.js"; +import Point from "ol/geom/Point"; export default { name: "legendelement", props: ["layername", "layerindex"], data: function() { - return { yo: 1 }; + return { + mapLayer: null + }; }, computed: { + ...mapGetters("mapstore", ["getLayerByName"]), id() { return "legendelement" + this.layerindex; } }, mounted() { - let feature = new Feature({ - geometry: new LineString([[-1, -1], [1, 1]]) - }); - var vector = new VectorLayer({ - source: new VectorSource({ - features: [feature], - wrapX: false - }) - }); + this.mapLayer = this.getLayerByName(this.layername); + if (this.mapLayer.data.getType() == "VECTOR") { + this.initMap(); + } else { + // TODO other tiles + } + }, + methods: { + initMap() { + let mapStyle = this.mapLayer.data.getStyle(); + + let feature = new Feature({ + geometry: new LineString([[-1, 0.5], [0, 0], [0.7, 0], [1.3, -0.7]]) + }); - let map = new Map({ - layers: [vector], - target: this.id, - controls: [], - view: new View({ - center: [0, 0], - zoom: 3, - projection: "EPSG:4326" - }) - }); + // special case if we need to call the style function with a special + // parameter or to detect a point layer + if (this.mapLayer["forLegendStyle"]) { + if (this.mapLayer.forLegendStyle.point) { + feature.setGeometry(new Point([0, 0])); + } + mapStyle = this.mapLayer.data.getStyleFunction()( + feature, + this.mapLayer.forLegendStyle.resolution + ); + } - console.log(map, this.id); + feature.set("level_of_service", ""); + var vector = new VectorLayer({ + source: new VectorSource({ + features: [feature], + wrapX: false + }), + style: mapStyle + }); + + new Map({ + layers: [vector], + target: this.id, + controls: [], + interactions: [], + view: new View({ + center: [0, 0], + zoom: 3, + projection: "EPSG:4326" + }) + }); + } } }; </script>
--- a/client/src/map/store.js Thu Sep 27 14:00:50 2018 +0200 +++ b/client/src/map/store.js Thu Sep 27 15:00:52 2018 +0200 @@ -106,6 +106,7 @@ }, { name: "Distance marks", + forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy @@ -115,6 +116,7 @@ }, { name: "Distance marks, Axis", + forLegendStyle: { point: true, resolution: 8 }, data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy