Mercurial > gemma

annotate client/src/map/Maplayer.vue @ 623:7cada58cae2c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix: e2e for new UI adapted
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 11 Sep 2018 14:19:13 +0200
parents b17a4482d07d
children d4fa28bfa6ec
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 620
diff changeset
2 <div id="map" :class="mapStyle"></div>
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 </template>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 <style lang="scss">
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
6 @import "../application/assets/application.scss";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
8 .mapsplit {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
9 height: 50vh;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
12 .mapfull {
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 height: 100vh;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 .ol-zoom {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 display: flex;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 left: 15vw;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 margin-top: 2vh;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 z-index: 5;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 background-color: white;
621
b17a4482d07d feat: UI adaptation of 4 slots
Thomas Junk <thomas.junk@intevation.de>
parents: 620
diff changeset
22 box-shadow: $basic-shadow;
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 </style>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 <script>
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 import { HTTP } from "../application/lib/http";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 import "ol/ol.css";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 import { Map, View } from "ol";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 // needed for vector filter example
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 import { WFS, GeoJSON } from "ol/format.js";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 import { mapGetters } from "vuex";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 export default {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
36 name: "maplayer",
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
37 props: ["lat", "long", "zoom", "split"],
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 data() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 return {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 projection: "EPSG:3857",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 openLayersMap: null
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 computed: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 ...mapGetters("mapstore", ["layers"]),
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
46 mapStyle() {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
47 return {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
48 mapfull: !this.split,
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
49 mapsplit: this.split
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
50 };
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
51 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 layerData() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 return this.layers.map(x => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54 return x.data;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 methods: {},
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
59 watch: {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
60 split() {
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
61 const map = this.openLayersMap;
594
6987b5c926b8 fix: leveraging vue.nexttick instead of timeout
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
62 this.$nextTick(() => {
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
63 map.updateSize();
594
6987b5c926b8 fix: leveraging vue.nexttick instead of timeout
Thomas Junk <thomas.junk@intevation.de>
parents: 593
diff changeset
64 });
593
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
65 }
c4a4dc612191 feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 585
diff changeset
66 },
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 mounted() {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 var that = this;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 this.openLayersMap = new Map({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 layers: this.layerData,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 target: "map",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 view: new View({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 center: [this.long, this.lat],
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 zoom: this.zoom,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 projection: this.projection
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 })
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 var featureRequest = new WFS().writeGetFeature({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 // srsName: "urn:ogc:def:crs:EPSG::4326",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 srsName: "EPSG:3857",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
82 featureNS: "gemma",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
83 featurePrefix: "gemma",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
84 featureTypes: ["fairway_dimensions"],
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
85 outputFormat: "application/json"
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
86 // example for a filter
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
87 //filter: greaterThanFilter("level_of_service", 0)
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
88 });
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
89
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
90 HTTP.post(
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
91 "/internal/wfs",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
92 new XMLSerializer().serializeToString(featureRequest),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
93 {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
94 headers: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 "X-Gemma-Auth": localStorage.getItem("token"),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 "Content-type": "text/xml; charset=UTF-8"
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 ).then(function(response) {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 var vectorSrc = that.layers[2].data.getSource();
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 vectorSrc.addFeatures(features);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 // would scale to the extend of all resulting features
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 // that.openLayersMap.getView().fit(vectorSrc.getExtent());
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 });
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
106
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
107 // FIXME this is hardwired for now to try for an external point layer
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
108 var featureRequest2 = new WFS().writeGetFeature({
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
109 // srsName: "urn:ogc:def:crs:EPSG::4326",
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
110 // srsName: "EPSG:3857",
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
111 // featureNS: "gemma",
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
112 featurePrefix: "ws-wamos",
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
113 featureTypes: ["hydro_boyspp"],
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
114 outputFormat: "application/json"
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
115 });
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
116
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
117 HTTP.post(
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
118 "/external/d4d",
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
119 new XMLSerializer().serializeToString(featureRequest2),
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
120 {
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
121 headers: {
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
122 "X-Gemma-Auth": localStorage.getItem("token"),
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
123 "Content-type": "text/xml; charset=UTF-8"
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
124 }
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
125 }
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
126 ).then(function(response) {
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
127 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
128 var vectorSrc = that.layers[3].data.getSource();
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
129 vectorSrc.addFeatures(features);
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
130 // would scale to the extend of all resulting features
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
131 // that.openLayersMap.getView().fit(vectorSrc.getExtent());
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 594
diff changeset
132 });
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
133 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
134 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
135 </script>