Mercurial > gemma

comparison client/src/components/layers/LegendElement.vue @ 3029:81c2e561fe03

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use distance marks an axis via WMS. Added legend and featureinfo.
author Raimund Renkert <raimund.renkert@intevation.de>
date Fri, 12 Apr 2019 12:49:43 +0200
parents 1b8bb4f89227
children f99f0cbb843f
comparison
equal deleted inserted replaced
3028:188fb0133e50 3029:81c2e561fe03
22 import Feature from "ol/Feature"; 22 import Feature from "ol/Feature";
23 import { Vector as VectorLayer } from "ol/layer"; 23 import { Vector as VectorLayer } from "ol/layer";
24 import { Vector as VectorSource } from "ol/source"; 24 import { Vector as VectorSource } from "ol/source";
25 import LineString from "ol/geom/LineString"; 25 import LineString from "ol/geom/LineString";
26 import Point from "ol/geom/Point"; 26 import Point from "ol/geom/Point";
27 import { HTTP } from "@/lib/http";
27 28
28 export default { 29 export default {
29 props: ["layer"], 30 props: ["layer"],
30 data: function() { 31 data: function() {
31 return { 32 return {
62 }, 63 },
63 mounted() { 64 mounted() {
64 if (this.layer.getType() == "VECTOR") { 65 if (this.layer.getType() == "VECTOR") {
65 this.initMap(); 66 this.initMap();
66 } else { 67 } else {
67 // TODO other tiles 68 if (this.layer.get("id") === "OPENSTREETMAP" ||
69 this.layer.get("id") === "INLANDECDIS" ||
70 this.layer.get("id") === "BOTTLENECKISOLINE" ||
71 this.layer.get("id") === "DIFFERENCES"
72 ) {
73 // TODO: Do something useful?
74 return
75 }
76 let img = document.createElement("img")
77 img.setAttribute("style", "margin: 0 auto;display: flex;")
78 if (this.layer.get("id") === "DISTANCEMARKSAXIS") {
79 img.setAttribute("src", require("@/assets/distancemarks-axis.png"))
80 }
81 else {
82 // for simple WMS legends.
83 let 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`
84 HTTP.get(url, {
85 headers: {
86 "X-Gemma-Auth": localStorage.getItem("token")
87 },
88 responseType: "blob"
89 }).then(response => {
90 img.setAttribute("src", URL.createObjectURL(response.data));
91 });
92 }
93 this.$el.appendChild(img);
68 } 94 }
69 }, 95 },
70 methods: { 96 methods: {
71 initMap() { 97 initMap() {
72 let vector = this.createVectorLayer(); 98 let vector = this.createVectorLayer();