Mercurial > gemma
comparison client/src/components/Maplayer.vue @ 543:b111b765b6cd
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 |
comparison
equal
deleted
inserted
replaced
542:505656a9947f | 543:b111b765b6cd |
---|---|
37 z-index: 10; | 37 z-index: 10; |
38 } | 38 } |
39 </style> | 39 </style> |
40 | 40 |
41 <script> | 41 <script> |
42 import { HTTP } from "../lib/http"; | |
42 import "ol/ol.css"; | 43 import "ol/ol.css"; |
43 import { Map, View } from "ol"; | 44 import { Map, View } from "ol"; |
44 import TileLayer from "ol/layer/Tile"; | 45 // needed for vector filter example |
46 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js"; | |
47 import { WFS, GeoJSON } from "ol/format.js"; | |
48 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; | |
49 import VectorSource from "ol/source/Vector.js"; | |
50 import { Stroke, Style } from "ol/style.js"; | |
45 import OSM from "ol/source/OSM"; | 51 import OSM from "ol/source/OSM"; |
46 import TileWMS from "ol/source/TileWMS.js"; | 52 import TileWMS from "ol/source/TileWMS.js"; |
47 import Layerselect from "./Layerselect"; | 53 import Layerselect from "./Layerselect"; |
48 | 54 |
49 export default { | 55 export default { |
71 url: "https://demo.d4d-portal.info/wms", | 77 url: "https://demo.d4d-portal.info/wms", |
72 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } | 78 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } |
73 }) | 79 }) |
74 }), | 80 }), |
75 isVisible: true | 81 isVisible: true |
82 }, | |
83 { | |
84 name: "Fairways Dimensions", | |
85 data: new VectorLayer({ | |
86 source: new VectorSource(), | |
87 style: new Style({ | |
88 stroke: new Stroke({ | |
89 color: "rgba(0, 0, 255, 1.0)", | |
90 width: 2 | |
91 }) | |
92 }) | |
93 }), | |
94 isVisible: true | |
76 } | 95 } |
77 ] | 96 ] |
78 }; | 97 }; |
79 }, | 98 }, |
80 computed: { | 99 computed: { |
89 this.layers[layer].isVisible = !this.layers[layer].isVisible; | 108 this.layers[layer].isVisible = !this.layers[layer].isVisible; |
90 this.layers[layer].data.setVisible(this.layers[layer].isVisible); | 109 this.layers[layer].data.setVisible(this.layers[layer].isVisible); |
91 } | 110 } |
92 }, | 111 }, |
93 mounted() { | 112 mounted() { |
113 var that = this; | |
94 this.openLayersMap = new Map({ | 114 this.openLayersMap = new Map({ |
95 layers: this.layerData, | 115 layers: this.layerData, |
96 target: "map", | 116 target: "map", |
97 view: new View({ | 117 view: new View({ |
98 center: [this.long, this.lat], | 118 center: [this.long, this.lat], |
99 zoom: this.zoom, | 119 zoom: this.zoom, |
100 projection: this.projection | 120 projection: this.projection |
101 }) | 121 }) |
102 }); | 122 }); |
123 | |
124 var featureRequest = new WFS().writeGetFeature({ | |
125 // srsName: "urn:ogc:def:crs:EPSG::4326", | |
126 srsName: "EPSG:3857", | |
127 featureNS: "gemma", | |
128 featurePrefix: "gemma", | |
129 featureTypes: ["fairway_dimensions"], | |
130 outputFormat: "application/json" | |
131 // example for a filter | |
132 //filter: greaterThanFilter("level_of_service", 0) | |
133 }); | |
134 | |
135 HTTP.post( | |
136 "/internal/wfs", | |
137 new XMLSerializer().serializeToString(featureRequest), | |
138 { | |
139 headers: { | |
140 "X-Gemma-Auth": localStorage.getItem("token"), | |
141 "Content-type": "text/xml; charset=UTF-8" | |
142 } | |
143 } | |
144 ).then(function(response) { | |
145 var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); | |
146 var vectorSrc = that.layers[2].data.getSource(); | |
147 vectorSrc.addFeatures(features); | |
148 // would scale to the extend of all resulting features | |
149 // that.openLayersMap.getView().fit(vectorSrc.getExtent()); | |
150 }); | |
103 } | 151 } |
104 }; | 152 }; |
105 </script> | 153 </script> |