Mercurial > gemma

annotate client/src/components/Map.vue @ 526:22cca659e40b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add proof of concept for toggling layer visibility.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 27 Aug 2018 17:58:49 +0200
parents e5dab193207a
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
519
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 <template>
526
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
2 <div id="map">
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
3 <div v-if="this.olmap"
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
4 style="position: absolute; z-index: 1005; top: 90px ">
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
5 <input type="checkbox" v-model="vis1">
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
6 {{ listOfLayers[0].getVisible() }}<br>
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
7 <input type="checkbox" v-model="vis2">
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
8 {{ listOfLayers[1].getVisible() }}
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
9 </div>
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
10 </div>
519
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 </template>
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 <style lang="sass">
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 </style>
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 <script>
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 import "ol/ol.css";
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 import { Map, View } from "ol";
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 import TileLayer from "ol/layer/Tile";
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 import OSM from "ol/source/OSM";
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 import TileWMS from "ol/source/TileWMS.js";
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 export default {
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 name: "map",
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 props: ["lat", "long", "zoom"],
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 data() {
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 return {
526
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
29 projection: "EPSG:3857",
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
30 olmap: null // OpenLayers' map object
519
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 };
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 },
526
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
33 computed: {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
34 // FIXME this is a proof of concept, ugly.
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
35 listOfLayers: function() {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
36 return this.olmap.getLayers().getArray();
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
37 },
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
38 vis1: {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
39 get: function() {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
40 if (this.listOfLayers[0]) {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
41 return this.listOfLayers[0].getVisible();
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
42 }
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
43 },
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
44 set: function(newValue) {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
45 this.listOfLayers[0].setVisible(newValue);
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
46 }
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
47 },
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
48 vis2: {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
49 get: function() {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
50 if (this.listOfLayers[1]) {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
51 return this.listOfLayers[1].getVisible();
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
52 }
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
53 },
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
54 set: function(newValue) {
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
55 this.listOfLayers[1].setVisible(newValue);
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
56 }
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
57 }
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
58 },
519
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
59 mounted() {
526
22cca659e40b client: add proof of concept for toggling layer visibility.
Bernhard Reiter <bernhard@intevation.de>
parents: 520
diff changeset
60 this.olmap = new Map({
519
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
61 layers: [
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
62 new TileLayer({
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
63 source: new OSM()
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
64 }),
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
65 new TileLayer({
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
66 source: new TileWMS({
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
67 url: "https://demo.d4d-portal.info/wms",
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
68 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
69 })
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
70 })
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
71 ],
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
72 target: "map",
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
73 view: new View({
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
74 center: [this.long, this.lat],
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
75 zoom: this.zoom,
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
76 projection: this.projection
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
77 })
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
78 });
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
79 }
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
80 };
6a29ad5a36cf refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
81 </script>