Mercurial > gemma

annotate client/src/components/Maplayer.vue @ 581:fb5d9d5ff320

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: UI redesign
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 06 Sep 2018 17:42:28 +0200
parents 03c15abb8372
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
2 <div class="mapdisplay">
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 <div id="map"></div>
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
4 <!-- <div class="profile d-flex flex-row">
573
03c15abb8372 fix: Minor adjustments to waterlevel scale
Thomas Junk <thomas.junk@intevation.de>
parents: 572
diff changeset
5 <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></Fairwayprofile>
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
6 </div> -->
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 </div>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8 </template>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 <style lang="scss">
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
11 @import "../assets/application.scss";
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
12
570
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
13 .profile {
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
14 background-color: white;
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
15 height: 50vh-$topbarheight;
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
16 }
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
17
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 .mapdisplay {
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
19 height: 100vh;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 }
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
21
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 #map {
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
23 height: 100vh;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 }
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
25
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
26 .ol-zoom {
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
27 display: flex;
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
28 left: 15vw;
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
29 margin-top: 2vh;
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
30 z-index: 5;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 background-color: white;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 </style>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 <script>
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
36 import { HTTP } from "../lib/http";
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
37 import "ol/ol.css";
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 import { Map, View } from "ol";
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
39 // needed for vector filter example
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
40 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
41 import { WFS, GeoJSON } from "ol/format.js";
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
42 import { mapGetters } from "vuex";
570
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
43 import Fairwayprofile from "./Fairwayprofile";
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 export default {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 name: "maplayer",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 props: ["lat", "long", "zoom"],
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 components: {
570
7575cf0e15ff feat: Add coordinate system for fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents: 551
diff changeset
49 Fairwayprofile
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 },
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 data() {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 return {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 projection: "EPSG:3857",
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
54 openLayersMap: null
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 };
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 },
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 computed: {
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
58 ...mapGetters("mapstore", ["layers"]),
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 layerData() {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 return this.layers.map(x => {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 return x.data;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 });
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 },
581
fb5d9d5ff320 refac: UI redesign
Thomas Junk <thomas.junk@intevation.de>
parents: 573
diff changeset
65 methods: {},
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 mounted() {
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
67 var that = this;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 this.openLayersMap = new Map({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 layers: this.layerData,
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 target: "map",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 view: new View({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 center: [this.long, this.lat],
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 zoom: this.zoom,
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 projection: this.projection
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 })
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 });
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
77
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
78 var featureRequest = new WFS().writeGetFeature({
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
79 // srsName: "urn:ogc:def:crs:EPSG::4326",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
80 srsName: "EPSG:3857",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
81 featureNS: "gemma",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
82 featurePrefix: "gemma",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
83 featureTypes: ["fairway_dimensions"],
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
84 outputFormat: "application/json"
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
85 // example for a filter
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
86 //filter: greaterThanFilter("level_of_service", 0)
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
87 });
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
88
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
89 HTTP.post(
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
90 "/internal/wfs",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
91 new XMLSerializer().serializeToString(featureRequest),
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
92 {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
93 headers: {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
94 "X-Gemma-Auth": localStorage.getItem("token"),
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
95 "Content-type": "text/xml; charset=UTF-8"
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
96 }
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
97 }
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
98 ).then(function(response) {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
99 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
100 var vectorSrc = that.layers[2].data.getSource();
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
101 vectorSrc.addFeatures(features);
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
102 // would scale to the extend of all resulting features
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
103 // that.openLayersMap.getView().fit(vectorSrc.getExtent());
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
104 });
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
105 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
106 };
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 </script>