Mercurial > gemma
view 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 |
line wrap: on
line source
<template> <div class="mapdisplay"> <div id="map"></div> <div v-if="this.openLayersMap" class="card layerselection shadow"> <div class="card-body"> <div class="headline"> <h4 class="card-title">Layers</h4> </div> <hr> <div class="d-flex flex-column"> <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> </div> </div> </div> </div> </template> <style lang="scss"> @import "../assets/application.scss"; .mapdisplay { height: 100%; } #map { height: 96vh; } .layerselection { position: absolute; top: $topbarheight; margin-top: $small-offset; right: $small-offset; min-height: 20%; min-width: 10%; background-color: white; z-index: 10; } </style> <script> import { HTTP } from "../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 { 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"; export default { name: "maplayer", props: ["lat", "long", "zoom"], components: { Layerselect }, data() { return { projection: "EPSG:3857", openLayersMap: null, layers: [ { name: "Open Streetmap", data: new TileLayer({ source: new OSM() }), isVisible: true }, { name: "D4D", data: new TileLayer({ source: new TileWMS({ url: "https://demo.d4d-portal.info/wms", params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } }) }), 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 } ] }; }, computed: { layerData() { return this.layers.map(x => { return x.data; }); } }, methods: { visibilityToggled(layer) { this.layers[layer].isVisible = !this.layers[layer].isVisible; this.layers[layer].data.setVisible(this.layers[layer].isVisible); } }, 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()); }); } }; </script>