Mercurial > gemma
annotate client/src/components/Map.vue @ 520:e5dab193207a
client: improve codestyle (minor), remove tailing spaces.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Mon, 27 Aug 2018 16:46:19 +0200 |
parents | 6a29ad5a36cf |
children | 22cca659e40b |
rev | line source |
---|---|
519
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
1 <template> |
520
e5dab193207a
client: improve codestyle (minor), remove tailing spaces.
Bernhard Reiter <bernhard@intevation.de>
parents:
519
diff
changeset
|
2 <div id="map"></div> |
519
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
3 </template> |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
4 |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
5 <style lang="sass"> |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
6 |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
7 </style> |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
8 |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
9 <script> |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
10 import "ol/ol.css"; |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
11 import { Map, View } from "ol"; |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
12 import TileLayer from "ol/layer/Tile"; |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
13 import OSM from "ol/source/OSM"; |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
14 import TileWMS from "ol/source/TileWMS.js"; |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
15 |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
16 export default { |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
17 name: "map", |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
18 props: ["lat", "long", "zoom"], |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
19 data() { |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
20 return { |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
21 projection: "EPSG:3857" |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
22 }; |
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 mounted() { |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
25 new Map({ |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
26 layers: [ |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
27 new TileLayer({ |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
28 source: new OSM() |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
29 }), |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
30 new TileLayer({ |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
31 source: new TileWMS({ |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
32 url: "https://demo.d4d-portal.info/wms", |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
33 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
|
34 }) |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
35 }) |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
36 ], |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
37 target: "map", |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
38 view: new View({ |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
39 center: [this.long, this.lat], |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
40 zoom: this.zoom, |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
41 projection: this.projection |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
42 }) |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
43 }); |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
44 } |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
45 }; |
6a29ad5a36cf
refac: Map component converted to vue component.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff
changeset
|
46 </script> |