Mercurial > gemma
changeset 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 | 9b2218a6c6ae |
files | client/src/components/Maplayer.vue |
diffstat | 1 files changed, 49 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue Thu Aug 30 14:39:24 2018 +0200 +++ b/client/src/components/Maplayer.vue Thu Aug 30 17:07:35 2018 +0200 @@ -39,9 +39,15 @@ </style> <script> +import { HTTP } from "../lib/http"; import "ol/ol.css"; import { Map, View } from "ol"; -import TileLayer from "ol/layer/Tile"; +// needed for vector filter example +// import { greaterThan as greaterThanFilter } from "ol/format/filter.js"; +import { WFS, GeoJSON } from "ol/format.js"; +import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; +import VectorSource from "ol/source/Vector.js"; +import { Stroke, Style } from "ol/style.js"; import OSM from "ol/source/OSM"; import TileWMS from "ol/source/TileWMS.js"; import Layerselect from "./Layerselect"; @@ -73,6 +79,19 @@ }) }), isVisible: true + }, + { + name: "Fairways Dimensions", + data: new VectorLayer({ + source: new VectorSource(), + style: new Style({ + stroke: new Stroke({ + color: "rgba(0, 0, 255, 1.0)", + width: 2 + }) + }) + }), + isVisible: true } ] }; @@ -91,6 +110,7 @@ } }, mounted() { + var that = this; this.openLayersMap = new Map({ layers: this.layerData, target: "map", @@ -100,6 +120,34 @@ projection: this.projection }) }); + + var featureRequest = new WFS().writeGetFeature({ + // srsName: "urn:ogc:def:crs:EPSG::4326", + srsName: "EPSG:3857", + featureNS: "gemma", + featurePrefix: "gemma", + featureTypes: ["fairway_dimensions"], + outputFormat: "application/json" + // example for a filter + //filter: greaterThanFilter("level_of_service", 0) + }); + + HTTP.post( + "/internal/wfs", + new XMLSerializer().serializeToString(featureRequest), + { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } + } + ).then(function(response) { + var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); + var vectorSrc = that.layers[2].data.getSource(); + vectorSrc.addFeatures(features); + // would scale to the extend of all resulting features + // that.openLayersMap.getView().fit(vectorSrc.getExtent()); + }); } }; </script>