Mercurial > gemma
view client/src/components/layers/LegendElement.vue @ 4983:9b1da062cbee
fairwaymarks legend icon added
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 05 Mar 2020 10:15:41 +0100 |
parents | a905438a7935 |
children | de86a96d55c3 |
line wrap: on
line source
<template> <div :id="id" class="legendelement"> <div v-if="layer.get('id') === 'FAIRWAYMARKS'"> <img v-if="!isVectorLayer" style="margin: 0 auto;display: flex;" src="@/assets/fm_legend.svg" :key="id" /> </div> <div v-else=""> <img v-if="!isVectorLayer" style="margin: 0 auto;display: flex;" :src="imgSrc" :key="id" /> </div> </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 { mapState } from "vuex"; import { Map, View } from "ol"; import Feature from "ol/Feature"; import { Vector as VectorLayer } from "ol/layer"; import { Vector as VectorSource } from "ol/source"; import Polygon from "ol/geom/Polygon"; import LineString from "ol/geom/LineString"; import Point from "ol/geom/Point"; import { HTTP } from "@/lib/http"; import { Stroke, Style, Fill } from "ol/style"; export default { props: ["layer"], data: function() { return { myMap: null, src: null, url: null }; }, computed: { ...mapState("map", ["layers", "ongoingRefresh"]), isVectorLayer() { return this.layer.getType() === "VECTOR"; }, imgSrc() { // if (this.layer.get("id") === "DISTANCEMARKSAXIS") { // return require("@/assets/distancemarks-axis.png"); // } return this.src; }, id() { return ( "legendelement-" + this.layer .get("label") .toLowerCase() .replace(/\s/g, "") ); }, mstyle() { if (this.layer && this.layer.getStyle) { return this.layer.getStyle(); } } }, watch: { ongoingRefresh() { if (this.ongoingRefresh) return; if ( this.layer.get("id") === "OPENSTREETMAP" || this.layer.get("id") === "INLANDECDIS" || this.layer.get("id") === "BOTTLENECKISOLINE" || this.layer.get("id") === "DIFFERENCES" ) { // TODO: Do something useful? return; } if (this.isVectorLayer) { this.recreateLayers(); } else { this.loadImageSrc(); } }, mstyle(newStyle, oldStyle) { // only recreate if there already was a style before if (oldStyle) { this.recreateLayers(); } } }, mounted() { if (this.layer.getType() == "VECTOR") { this.initMap(); } else { if ( this.layer.get("id") === "OPENSTREETMAP" || this.layer.get("id") === "INLANDECDIS" || this.layer.get("id") === "BOTTLENECKISOLINE" || this.layer.get("id") === "DIFFERENCES" ) { // TODO: Do something useful? return; } if (this.layer.get("id") !== "DISTANCEMARKSAXIS") { this.url = `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + this.layer.getSource().getParams().LAYERS + `&legend_options=columns:4;fontAntiAliasing:true`; } else { this.url = `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&SCALE=80000&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` + this.layer.getSource().getParams().LAYERS + `&legend_options=columns:1;fontAntiAliasing:true;forceLabels:off`; } this.loadImageSrc(); } }, methods: { loadImageSrc() { HTTP.get(this.url, { headers: { "X-Gemma-Auth": localStorage.getItem("token") }, responseType: "blob" }).then(response => { this.src = URL.createObjectURL(response.data); }); }, recreateLayers() { let vector = this.createVectorLayer(); this.myMap.removeLayer(this.myMap.getLayers().getArray()[0]); this.myMap.addLayer(vector); }, initMap() { let vector = this.createVectorLayer(); this.myMap = new Map({ layers: [vector], target: this.id, controls: [], interactions: [], view: new View({ enableRotation: false, center: [0, 0], zoom: 3, projection: "EPSG:4326" }) }); }, createVectorLayer() { let mapStyle = this.layer.getStyle(); let feature; // show bottleneck legend as polygon if (this.layer.get("id") === "BOTTLENECKS") { feature = new Feature({ geometry: new Polygon([ [[-1.7, -1.2], [-1.7, 0.5], [1.7, 1.2], [1.7, -0.5]] ]) }); if (typeof mapStyle === "function") { mapStyle = mapStyle(); } mapStyle = new Style({ stroke: new Stroke({ color: mapStyle.getStroke().getColor(), // reduce the stroke width for better layout in map legend. width: 2 }), fill: new Fill({ color: mapStyle.getFill().getColor() }) }); } else { feature = new Feature({ geometry: new LineString([[-1, -1], [0, 0], [1, 1]]) }); } // special case if we need to call the style function with a special // parameter or to detect a point layer let legendStyle = this.layer.get("forLegendStyle"); if (legendStyle) { if (legendStyle) { feature.setGeometry(new Point([0, 0])); } mapStyle = this.layer.getStyleFunction()( feature, legendStyle.resolution, true ); } // we could add extra properties here, if they are needed for // the styling function in the future. An idea is to extend the // this.layer["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; overflow: hidden; } </style>