Mercurial > gemma
changeset 799:959892ffd72c
client: add new LegendElement to layerselection box
* Add a new component that contains a small map to draw legend elements.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 12:42:58 +0200 |
parents | 383fac3e5d1e |
children | 0689f4b7c99f |
files | client/src/layers/Layerselect.vue client/src/layers/LegendElement.vue |
diffstat | 2 files changed, 62 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/layers/Layerselect.vue Thu Sep 27 12:07:29 2018 +0200 +++ b/client/src/layers/Layerselect.vue Thu Sep 27 12:42:58 2018 +0200 @@ -1,7 +1,8 @@ <template> <div class="form-check d-flex flex-row flex-start selection"> <input class="form-check-input" @change="visibilityToggled" :id="layername" type="checkbox" :checked="isVisible"> - <label class="layername form-check-label" :for="layername">{{this.layername}}</label> + <LegendElement :layername="layername" :layerindex="layerindex"></LegendElement> + <label class="layername form-check-label">{{layername}}</label> </div> </template> @@ -16,9 +17,13 @@ <script> +import LegendElement from "./LegendElement.vue"; export default { props: ["layername", "layerindex", "isVisible"], name: "layerselect", + components: { + LegendElement + }, methods: { visibilityToggled() { this.$emit("visibilityToggled", this.layerindex);
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/layers/LegendElement.vue Thu Sep 27 12:42:58 2018 +0200 @@ -0,0 +1,56 @@ +<template> + <div :id="id" class="bg-light shadow-sm rounded legendelement"></div> + +</template> + +<script> +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"; + +export default { + name: "legendelement", + props: ["layername", "layerindex"], + data: function() { + return { yo: 1 }; + }, + computed: { + 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 + }) + }); + + let map = new Map({ + layers: [vector], + target: this.id, + controls: [], + view: new View({ + center: [0, 0], + zoom: 3, + projection: "EPSG:4326" + }) + }); + + console.log(map, this.id); + } +}; +</script> + +<style scoped> +.legendelement { + max-height: 1.5rem; + width: 2rem; +} +</style>