Mercurial > gemma
view client/src/map/Maplayer.vue @ 628:ef9c733cc6aa
client: show more wfs layers
* Add waterway axis, waterway area and distance marks as fully loaded
WFS layers. Distance marks are disabled by default, with code
that honors the isVisible attribute. Code is duplicated, and marked
with FIXMEs.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Tue, 11 Sep 2018 17:52:20 +0200 |
parents | d4fa28bfa6ec |
children | 8278b2fb0c33 |
line wrap: on
line source
<template> <div id="map" :class="mapStyle"></div> </template> <style lang="scss"> @import "../application/assets/application.scss"; .mapsplit { height: 50vh; } .mapfull { height: 100vh; } .ol-zoom { display: flex; left: 15vw; z-index: 5; top: 1rem; padding: 0.3rem; background-color: white; box-shadow: $basic-shadow; } .ol-attribution { padding: 0.3rem; background-color: white; box-shadow: $basic-shadow; margin-bottom: 1rem; margin-right: 0.3rem; } </style> <script> import { HTTP } from "../application/lib/http"; import "ol/ol.css"; import { Map, View } from "ol"; // needed for vector filter example // import { greaterThan as greaterThanFilter } from "ol/format/filter.js"; import { WFS, GeoJSON } from "ol/format.js"; import { mapGetters } from "vuex"; export default { name: "maplayer", props: ["lat", "long", "zoom", "split"], data() { return { projection: "EPSG:3857", openLayersMap: null }; }, computed: { ...mapGetters("mapstore", ["layers"]), mapStyle() { return { mapfull: !this.split, mapsplit: this.split }; }, layerData() { return this.layers.map(x => { return x.data; }); } }, methods: {}, watch: { split() { const map = this.openLayersMap; this.$nextTick(() => { map.updateSize(); }); } }, mounted() { var that = this; this.openLayersMap = new Map({ layers: this.layerData, target: "map", view: new View({ center: [this.long, this.lat], zoom: this.zoom, projection: this.projection }) }); var featureRequest2 = 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(featureRequest2), { 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()); }); // FIXME hardwired for now var featureRequest3 = new WFS().writeGetFeature({ featurePrefix: "ws-wamos", featureTypes: ["ienc_wtware"], outputFormat: "application/json" }); HTTP.post( "/external/d4d", new XMLSerializer().serializeToString(featureRequest3), { 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[3].data.getSource(); vectorSrc.addFeatures(features); }); // FIXME hardwired for now var featureRequest4 = new WFS().writeGetFeature({ featurePrefix: "ws-wamos", featureTypes: ["ienc_wtwaxs"], outputFormat: "application/json" }); HTTP.post( "/external/d4d", new XMLSerializer().serializeToString(featureRequest4), { 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[4].data.getSource(); vectorSrc.addFeatures(features); }); // FIXME this is hardwired for now to try for an external point layer var featureRequest5 = new WFS().writeGetFeature({ featurePrefix: "ws-wamos", featureTypes: ["ienc_dismar"], outputFormat: "application/json" }); HTTP.post( "/external/d4d", new XMLSerializer().serializeToString(featureRequest5), { 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[5].data.getSource(); that.layers[5].data.setVisible(that.layers[5].isVisible); vectorSrc.addFeatures(features); }); } }; </script>