Mercurial > gemma
diff client/src/components/layers/LegendElement.vue @ 1558:0ded4c56978e
refac: component filestructure. remove admin/map hierarchy
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Dec 2018 09:22:20 +0100 |
parents | client/src/components/map/layers/LegendElement.vue@bb47531bdd22 |
children | 89c439721db2 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/layers/LegendElement.vue Wed Dec 12 09:22:20 2018 +0100 @@ -0,0 +1,124 @@ +<template> + <div :id="id" class="legendelement"></div> +</template> + +<script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + */ +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 { + myMap: null, + mapLayer: null + }; + }, + computed: { + ...mapGetters("map", ["getLayerByName"]), + id() { + return "legendelement" + this.layerindex; + }, + mstyle() { + if (this.mapLayer && this.mapLayer.data.getStyle) { + return this.mapLayer.data.getStyle(); + } + } + }, + watch: { + mstyle(newStyle, oldStyle) { + // only recreate if there already was a style before + if (oldStyle) { + let vector = this.createVectorLayer(); + + this.myMap.removeLayer(this.myMap.getLayers()[0]); + this.myMap.addLayer(vector); + } + } + }, + mounted() { + this.mapLayer = this.getLayerByName(this.layername); + if (this.mapLayer.data.getType() == "VECTOR") { + this.initMap(); + } else { + // TODO other tiles + } + }, + methods: { + initMap() { + let vector = this.createVectorLayer(); + + this.myMap = new Map({ + layers: [vector], + target: this.id, + controls: [], + interactions: [], + view: new View({ + center: [0, 0], + zoom: 3, + projection: "EPSG:4326" + }) + }); + }, + createVectorLayer() { + 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]]) + }); + + // 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 + ); + } + + // we could add extra properties here, if they are needed for + // the styling function in the future. An idea is to extend the + // this.mapLayer["forLegendStyle"] for it. + // FIXME, this is a special case for the Fairway Dimensions style + feature.set("level_of_service", ""); + return new VectorLayer({ + source: new VectorSource({ + features: [feature], + wrapX: false + }), + style: mapStyle + }); + } + } +}; +</script> + +<style lang="scss" scoped> +.legendelement { + max-height: 1.5rem; + width: 2rem; +} +</style>