Mercurial > gemma
annotate client/src/map/Maplayer.vue @ 620:ef00684e021f
client: add showing special buoys
* Add hardwired a point layer with an external wfs configured
like in the standard readme showing the special/general buoys.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Tue, 11 Sep 2018 12:38:34 +0200 |
parents | 6987b5c926b8 |
children | b17a4482d07d |
rev | line source |
---|---|
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
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; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 } |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
23 </style> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
24 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 <script> |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 import { HTTP } from "../application/lib/http"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 import "ol/ol.css"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 import { Map, View } from "ol"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 // needed for vector filter example |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 import { WFS, GeoJSON } from "ol/format.js"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 import { mapGetters } from "vuex"; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
34 export default { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 name: "maplayer", |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
36 props: ["lat", "long", "zoom", "split"], |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 data() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 return { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 projection: "EPSG:3857", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 openLayersMap: null |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 }; |
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 computed: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
44 ...mapGetters("mapstore", ["layers"]), |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
45 mapStyle() { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
46 return { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
47 mapfull: !this.split, |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
48 mapsplit: this.split |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
49 }; |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
50 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
51 layerData() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
52 return this.layers.map(x => { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
53 return x.data; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
54 }); |
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 methods: {}, |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
58 watch: { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
59 split() { |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
60 const map = this.openLayersMap; |
594
6987b5c926b8
fix: leveraging vue.nexttick instead of timeout
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
61 this.$nextTick(() => { |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
62 map.updateSize(); |
594
6987b5c926b8
fix: leveraging vue.nexttick instead of timeout
Thomas Junk <thomas.junk@intevation.de>
parents:
593
diff
changeset
|
63 }); |
593
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
64 } |
c4a4dc612191
feat: Toggleable fairway profile
Thomas Junk <thomas.junk@intevation.de>
parents:
585
diff
changeset
|
65 }, |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
66 mounted() { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
67 var that = this; |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
68 this.openLayersMap = new Map({ |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
69 layers: this.layerData, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
70 target: "map", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
71 view: new View({ |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
72 center: [this.long, this.lat], |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
73 zoom: this.zoom, |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
74 projection: this.projection |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
75 }) |
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 var featureRequest = new WFS().writeGetFeature({ |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
79 // srsName: "urn:ogc:def:crs:EPSG::4326", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
80 srsName: "EPSG:3857", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
81 featureNS: "gemma", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
82 featurePrefix: "gemma", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
83 featureTypes: ["fairway_dimensions"], |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
84 outputFormat: "application/json" |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
85 // example for a filter |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
86 //filter: greaterThanFilter("level_of_service", 0) |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
87 }); |
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 HTTP.post( |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
90 "/internal/wfs", |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
91 new XMLSerializer().serializeToString(featureRequest), |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
92 { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
93 headers: { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
94 "X-Gemma-Auth": localStorage.getItem("token"), |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
95 "Content-type": "text/xml; charset=UTF-8" |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
96 } |
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 ).then(function(response) { |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
99 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
100 var vectorSrc = that.layers[2].data.getSource(); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
101 vectorSrc.addFeatures(features); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
102 // would scale to the extend of all resulting features |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
103 // that.openLayersMap.getView().fit(vectorSrc.getExtent()); |
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
104 }); |
620
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
105 |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
106 // 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
|
107 var featureRequest2 = new WFS().writeGetFeature({ |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
108 // srsName: "urn:ogc:def:crs:EPSG::4326", |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
109 // srsName: "EPSG:3857", |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
110 // featureNS: "gemma", |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
111 featurePrefix: "ws-wamos", |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
112 featureTypes: ["hydro_boyspp"], |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
113 outputFormat: "application/json" |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
114 }); |
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 HTTP.post( |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
117 "/external/d4d", |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
118 new XMLSerializer().serializeToString(featureRequest2), |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
119 { |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
120 headers: { |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
121 "X-Gemma-Auth": localStorage.getItem("token"), |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
122 "Content-type": "text/xml; charset=UTF-8" |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
123 } |
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 ).then(function(response) { |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
126 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
127 var vectorSrc = that.layers[3].data.getSource(); |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
128 vectorSrc.addFeatures(features); |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
129 // would scale to the extend of all resulting features |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
130 // that.openLayersMap.getView().fit(vectorSrc.getExtent()); |
ef00684e021f
client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents:
594
diff
changeset
|
131 }); |
585
ef307bd6b5d8
refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
132 } |
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 </script> |