Mercurial > gemma
view client/src/layers/LegendElement.vue @ 1207:70116d392387
close bottleneck list: made searchbar collapse only if it was collapsed before
opening the bottleneck list will expand the searchbar, closing the bottleneck list
was always collapsing the searchbar too. Now it stays open if it was open beforeopening the bottleneck list
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 13:02:48 +0100 |
parents | 595654ad3f66 |
children | 104d41ea7c15 |
line wrap: on
line source
<template> <div :id="id" class="bg-light shadow-sm rounded 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 scoped> .legendelement { max-height: 1.5rem; width: 2rem; } </style>