Mercurial > gemma
view client/src/map/Maplayer.vue @ 667:c6aacd396918
client: improve waterway axis mark display
* .. by requesting data in EPSG:3857.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Tue, 18 Sep 2018 13:47:13 +0200 |
parents | db749c02127c |
children | f595b3455d75 |
line wrap: on
line source
<template> <div id="map" :class="mapStyle"></div> </template> <style lang="scss"> .mapsplit { height: 50vh; } .mapfull { height: 100vh; } </style> <script> import { HTTP } from "../application/lib/http"; import "ol/ol.css"; import { Map, View } from "ol"; import { bbox as bboxFilter } from "ol/format/filter.js"; import { WFS, GeoJSON } from "ol/format.js"; import { mapGetters } from "vuex"; import Draw from "ol/interaction/Draw.js"; import { Vector as VectorSource } from "ol/source.js"; import { Vector as VectorLayer } from "ol/layer.js"; export default { name: "maplayer", props: ["drawMode", "lat", "long", "zoom", "split"], data() { return { projection: "EPSG:3857", openLayersMap: null, interaction: null, vectorLayer: null, vectorSource: null }; }, computed: { ...mapGetters("mapstore", ["layers"]), mapStyle() { return { mapfull: !this.split, mapsplit: this.split }; }, layerData() { const l = this.layers.map(x => { return x.data; }); return [...l, this.vectorLayer]; } }, methods: { createVectorSource() { this.vectorSource = new VectorSource({ wrapX: false }); }, createVectorLayer() { this.vectorLayer = new VectorLayer({ source: this.vectorSource }); }, removeCurrentInteraction() { this.openLayersMap.removeInteraction(this.interaction); this.interaction = null; }, createInteraction() { return new Draw({ source: this.vectorSource, type: this.drawMode }); }, activateInteraction() { const interaction = this.createInteraction(this.drawMode); this.interaction = interaction; this.openLayersMap.addInteraction(interaction); } }, watch: { drawMode() { if (this.interaction) { this.removeCurrentInteraction(); } else { this.activateInteraction(); } }, split() { const map = this.openLayersMap; this.$nextTick(() => { map.updateSize(); }); } }, mounted() { this.createVectorSource(); this.createVectorLayer(); this.openLayersMap = new Map({ layers: this.layerData, target: "map", controls: [], 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" }); HTTP.post( "/internal/wfs", new XMLSerializer().serializeToString(featureRequest2), { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } } ).then(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); var vectorSrc = this.layers[2].data.getSource(); vectorSrc.addFeatures(features); // would scale to the extend of all resulting features // this.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(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); var vectorSrc = this.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(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); var vectorSrc = this.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", /* restrict loading approximately to extend of danube in Austria */ filter: bboxFilter("geom", [13.3, 48.0, 17.1, 48.6], "EPSG:4326") }); HTTP.post( "/external/d4d", new XMLSerializer().serializeToString(featureRequest5), { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } } ).then(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); var vectorSrc = this.layers[5].data.getSource(); this.layers[5].data.setVisible(this.layers[5].isVisible); vectorSrc.addFeatures(features); console.log("loaded ", features, "for", vectorSrc); }); // FIXME this is hardwired for now var featureRequest6 = new WFS().writeGetFeature({ srsName: "EPSG:3857", featureNS: "gemma", featurePrefix: "gemma", featureTypes: ["distance_marks"], outputFormat: "application/json" }); HTTP.post( "/internal/wfs", new XMLSerializer().serializeToString(featureRequest6), { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "text/xml; charset=UTF-8" } } ).then(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); var vectorSrc = this.layers[6].data.getSource(); vectorSrc.addFeatures(features); console.log("loaded ", features, "for", vectorSrc); }); } }; </script>