Mercurial > gemma

comparison client/src/map/Maplayer.vue @ 649:83081ba6c9c1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Linetool added In order to draw lines for allocating profiles, a basic implementation of line drawing was added.
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 13 Sep 2018 16:55:53 +0200
parents 855cca0142ec
children ef658c66cfca
comparison
equal deleted inserted replaced
647:620a65f11b33 649:83081ba6c9c1
7 height: 50vh; 7 height: 50vh;
8 } 8 }
9 9
10 .mapfull { 10 .mapfull {
11 height: 100vh; 11 height: 100vh;
12 }
13
14 .ol-zoom {
15 display: flex;
16 left: 16vw;
17 z-index: 5;
18 top: 1rem;
19 padding: 0.3rem;
20 background-color: white;
21 box-shadow: $basic-shadow;
22 }
23
24 .ol-attribution {
25 padding: 0.3rem;
26 background-color: white;
27 box-shadow: $basic-shadow;
28 margin-bottom: 1rem;
29 margin-right: 0.3rem;
30 } 12 }
31 </style> 13 </style>
32 14
33 <script> 15 <script>
34 import { HTTP } from "../application/lib/http"; 16 import { HTTP } from "../application/lib/http";
36 import { Map, View } from "ol"; 18 import { Map, View } from "ol";
37 // needed for vector filter example 19 // needed for vector filter example
38 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js"; 20 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
39 import { WFS, GeoJSON } from "ol/format.js"; 21 import { WFS, GeoJSON } from "ol/format.js";
40 import { mapGetters } from "vuex"; 22 import { mapGetters } from "vuex";
23 import Draw from "ol/interaction/Draw.js";
24 import { Vector as VectorSource } from "ol/source.js";
25 import { Vector as VectorLayer } from "ol/layer.js";
41 26
42 export default { 27 export default {
43 name: "maplayer", 28 name: "maplayer",
44 props: ["lat", "long", "zoom", "split"], 29 props: ["drawMode", "lat", "long", "zoom", "split"],
45 data() { 30 data() {
46 return { 31 return {
47 projection: "EPSG:3857", 32 projection: "EPSG:3857",
48 openLayersMap: null 33 openLayersMap: null,
34 interaction: null,
35 vectorLayer: null,
36 vectorSource: null
49 }; 37 };
50 }, 38 },
51 computed: { 39 computed: {
52 ...mapGetters("mapstore", ["layers"]), 40 ...mapGetters("mapstore", ["layers"]),
53 mapStyle() { 41 mapStyle() {
55 mapfull: !this.split, 43 mapfull: !this.split,
56 mapsplit: this.split 44 mapsplit: this.split
57 }; 45 };
58 }, 46 },
59 layerData() { 47 layerData() {
60 return this.layers.map(x => { 48 const l = this.layers.map(x => {
61 return x.data; 49 return x.data;
62 }); 50 });
51 return [...l, this.vectorLayer];
63 } 52 }
64 }, 53 },
65 methods: {}, 54 methods: {
55 createVectorSource() {
56 this.vectorSource = new VectorSource({ wrapX: false });
57 },
58 createVectorLayer() {
59 this.vectorLayer = new VectorLayer({
60 source: this.vectorSource
61 });
62 },
63 removeCurrentInteraction() {
64 this.openLayersMap.removeInteraction(this.interaction);
65 this.interaction = null;
66 },
67 createInteraction() {
68 return new Draw({
69 source: this.vectorSource,
70 type: this.drawMode
71 });
72 },
73 activateInteraction() {
74 const interaction = this.createInteraction(this.drawMode);
75 this.interaction = interaction;
76 this.openLayersMap.addInteraction(interaction);
77 }
78 },
66 watch: { 79 watch: {
80 drawMode() {
81 if (this.interaction) {
82 this.removeCurrentInteraction();
83 } else {
84 this.activateInteraction();
85 }
86 },
67 split() { 87 split() {
68 const map = this.openLayersMap; 88 const map = this.openLayersMap;
69 this.$nextTick(() => { 89 this.$nextTick(() => {
70 map.updateSize(); 90 map.updateSize();
71 }); 91 });
72 } 92 }
73 }, 93 },
74 mounted() { 94 mounted() {
75 var that = this; 95 this.createVectorSource();
96 this.createVectorLayer();
76 this.openLayersMap = new Map({ 97 this.openLayersMap = new Map({
77 layers: this.layerData, 98 layers: this.layerData,
78 target: "map", 99 target: "map",
100 controls: [],
79 view: new View({ 101 view: new View({
80 center: [this.long, this.lat], 102 center: [this.long, this.lat],
81 zoom: this.zoom, 103 zoom: this.zoom,
82 projection: this.projection 104 projection: this.projection
83 }) 105 })
101 headers: { 123 headers: {
102 "X-Gemma-Auth": localStorage.getItem("token"), 124 "X-Gemma-Auth": localStorage.getItem("token"),
103 "Content-type": "text/xml; charset=UTF-8" 125 "Content-type": "text/xml; charset=UTF-8"
104 } 126 }
105 } 127 }
106 ).then(function(response) { 128 ).then(response => {
107 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); 129 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
108 var vectorSrc = that.layers[2].data.getSource(); 130 var vectorSrc = this.layers[2].data.getSource();
109 vectorSrc.addFeatures(features); 131 vectorSrc.addFeatures(features);
110 // would scale to the extend of all resulting features 132 // would scale to the extend of all resulting features
111 // that.openLayersMap.getView().fit(vectorSrc.getExtent()); 133 // this.openLayersMap.getView().fit(vectorSrc.getExtent());
112 }); 134 });
113 135
114 // FIXME hardwired for now 136 // FIXME hardwired for now
115 var featureRequest3 = new WFS().writeGetFeature({ 137 var featureRequest3 = new WFS().writeGetFeature({
116 featurePrefix: "ws-wamos", 138 featurePrefix: "ws-wamos",
125 headers: { 147 headers: {
126 "X-Gemma-Auth": localStorage.getItem("token"), 148 "X-Gemma-Auth": localStorage.getItem("token"),
127 "Content-type": "text/xml; charset=UTF-8" 149 "Content-type": "text/xml; charset=UTF-8"
128 } 150 }
129 } 151 }
130 ).then(function(response) { 152 ).then(response => {
131 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); 153 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
132 var vectorSrc = that.layers[3].data.getSource(); 154 var vectorSrc = this.layers[3].data.getSource();
133 vectorSrc.addFeatures(features); 155 vectorSrc.addFeatures(features);
134 }); 156 });
135 157
136 // FIXME hardwired for now 158 // FIXME hardwired for now
137 var featureRequest4 = new WFS().writeGetFeature({ 159 var featureRequest4 = new WFS().writeGetFeature({
147 headers: { 169 headers: {
148 "X-Gemma-Auth": localStorage.getItem("token"), 170 "X-Gemma-Auth": localStorage.getItem("token"),
149 "Content-type": "text/xml; charset=UTF-8" 171 "Content-type": "text/xml; charset=UTF-8"
150 } 172 }
151 } 173 }
152 ).then(function(response) { 174 ).then(response => {
153 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); 175 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
154 var vectorSrc = that.layers[4].data.getSource(); 176 var vectorSrc = this.layers[4].data.getSource();
155 vectorSrc.addFeatures(features); 177 vectorSrc.addFeatures(features);
156 }); 178 });
157 179
158 // FIXME this is hardwired for now to try for an external point layer 180 // FIXME this is hardwired for now to try for an external point layer
159 var featureRequest5 = new WFS().writeGetFeature({ 181 var featureRequest5 = new WFS().writeGetFeature({
169 headers: { 191 headers: {
170 "X-Gemma-Auth": localStorage.getItem("token"), 192 "X-Gemma-Auth": localStorage.getItem("token"),
171 "Content-type": "text/xml; charset=UTF-8" 193 "Content-type": "text/xml; charset=UTF-8"
172 } 194 }
173 } 195 }
174 ).then(function(response) { 196 ).then(response => {
175 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); 197 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
176 var vectorSrc = that.layers[5].data.getSource(); 198 var vectorSrc = this.layers[5].data.getSource();
177 that.layers[5].data.setVisible(that.layers[5].isVisible); 199 this.layers[5].data.setVisible(this.layers[5].isVisible);
178 vectorSrc.addFeatures(features); 200 vectorSrc.addFeatures(features);
179 }); 201 });
180 } 202 }
181 }; 203 };
182 </script> 204 </script>