Mercurial > gemma
view client/src/layers/LegendElement.vue @ 904:e4b72a199258
New default bottleneck colors
Mainly to make the stroke color one actually selectable in the ui.
In addition the pink does better match the collors used on the ECDIS layer.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Tue, 02 Oct 2018 13:34:59 +0200 |
parents | 27282bfd1ba7 |
children | ca628dce90dd |
line wrap: on
line source
<template> <div :id="id" class="bg-light shadow-sm rounded legendelement"></div> </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 { myMap: null, mapLayer: null }; }, computed: { ...mapGetters("mapstore", ["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>