Mercurial > gemma
view client/src/map/Maplayer.vue @ 620:ef00684e021f
client: add showing special buoys
* Add hardwired a point layer with an external wfs configured
like in the standard readme showing the special/general buoys.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Tue, 11 Sep 2018 12:38:34 +0200 |
parents | 6987b5c926b8 |
children | b17a4482d07d |
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; margin-top: 2vh; z-index: 5; background-color: white; } </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 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()); }); // FIXME this is hardwired for now to try for an external point layer var featureRequest2 = new WFS().writeGetFeature({ // srsName: "urn:ogc:def:crs:EPSG::4326", // srsName: "EPSG:3857", // featureNS: "gemma", featurePrefix: "ws-wamos", featureTypes: ["hydro_boyspp"], outputFormat: "application/json" }); HTTP.post( "/external/d4d", 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[3].data.getSource(); vectorSrc.addFeatures(features); // would scale to the extend of all resulting features // that.openLayersMap.getView().fit(vectorSrc.getExtent()); }); } }; </script>