Mercurial > gemma

annotate client/src/components/Maplayer.vue @ 543:b111b765b6cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add hardwired WFS layer to map * As prototype add a getfeature WFS layer asking our own server for the fairways_dimensions. It has deactivate filter code.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 30 Aug 2018 17:07:35 +0200
parents 505656a9947f
children 89bc8111563a
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>
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
4 <div v-if="this.openLayersMap" class="card layerselection shadow">
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
5 <div class="card-body">
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
6 <div class="headline">
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
7 <h4 class="card-title">Layers</h4>
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
8 </div>
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
9 <hr>
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
10 <div class="d-flex flex-column">
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
11 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
12 </div>
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
13 </div>
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 </div>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 </div>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 </template>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 <style lang="scss">
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
19 @import "../assets/application.scss";
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
20
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 .mapdisplay {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 height: 100%;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 }
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
24
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 #map {
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
26 height: 96vh;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 }
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
28
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 .layerselection {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 position: absolute;
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
31 top: $topbarheight;
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
32 margin-top: $small-offset;
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
33 right: $small-offset;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 min-height: 20%;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 min-width: 10%;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
36 background-color: white;
542
505656a9947f refac: layout refactored
Thomas Junk <thomas.junk@intevation.de>
parents: 531
diff changeset
37 z-index: 10;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
38 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
39 </style>
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 <script>
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
42 import { HTTP } from "../lib/http";
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
43 import "ol/ol.css";
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 import { Map, View } from "ol";
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
45 // needed for vector filter example
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
46 // 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
47 import { WFS, GeoJSON } from "ol/format.js";
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
48 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
49 import VectorSource from "ol/source/Vector.js";
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
50 import { Stroke, Style } from "ol/style.js";
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
51 import OSM from "ol/source/OSM";
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
52 import TileWMS from "ol/source/TileWMS.js";
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
53 import Layerselect from "./Layerselect";
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
54
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 export default {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 name: "maplayer",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 props: ["lat", "long", "zoom"],
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 components: {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 Layerselect
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
60 },
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 data() {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 return {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 projection: "EPSG:3857",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 openLayersMap: null,
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 layers: [
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 name: "Open Streetmap",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 data: new TileLayer({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 source: new OSM()
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 }),
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 isVisible: true
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 },
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 name: "D4D",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 data: new TileLayer({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 source: new TileWMS({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 url: "https://demo.d4d-portal.info/wms",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 })
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 }),
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 isVisible: true
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
82 },
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
83 {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
84 name: "Fairways Dimensions",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
85 data: new VectorLayer({
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
86 source: new VectorSource(),
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
87 style: new Style({
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
88 stroke: new Stroke({
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
89 color: "rgba(0, 0, 255, 1.0)",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
90 width: 2
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
91 })
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 }),
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
94 isVisible: true
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
95 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
96 ]
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
97 };
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
98 },
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
99 computed: {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
100 layerData() {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
101 return this.layers.map(x => {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
102 return x.data;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
103 });
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
104 }
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 methods: {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
107 visibilityToggled(layer) {
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
108 this.layers[layer].isVisible = !this.layers[layer].isVisible;
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
109 this.layers[layer].data.setVisible(this.layers[layer].isVisible);
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
110 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
111 },
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
112 mounted() {
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
113 var that = this;
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
114 this.openLayersMap = new Map({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
115 layers: this.layerData,
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 target: "map",
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 view: new View({
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118 center: [this.long, this.lat],
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
119 zoom: this.zoom,
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
120 projection: this.projection
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
121 })
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
122 });
543
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
123
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
124 var featureRequest = new WFS().writeGetFeature({
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
125 // srsName: "urn:ogc:def:crs:EPSG::4326",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
126 srsName: "EPSG:3857",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
127 featureNS: "gemma",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
128 featurePrefix: "gemma",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
129 featureTypes: ["fairway_dimensions"],
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
130 outputFormat: "application/json"
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
131 // example for a filter
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
132 //filter: greaterThanFilter("level_of_service", 0)
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
133 });
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
134
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
135 HTTP.post(
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
136 "/internal/wfs",
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
137 new XMLSerializer().serializeToString(featureRequest),
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
138 {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
139 headers: {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
140 "X-Gemma-Auth": localStorage.getItem("token"),
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
141 "Content-type": "text/xml; charset=UTF-8"
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
142 }
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
143 }
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
144 ).then(function(response) {
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
145 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
146 var vectorSrc = that.layers[2].data.getSource();
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
147 vectorSrc.addFeatures(features);
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
148 // 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
149 // that.openLayersMap.getView().fit(vectorSrc.getExtent());
b111b765b6cd client: add hardwired WFS layer to map
Bernhard Reiter <bernhard@intevation.de>
parents: 542
diff changeset
150 });
531
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
151 }
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
152 };
9c036b32c852 refac: Layer selection componentized
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
153 </script>