Mercurial > gemma

comparison client/src/components/Maplayer.vue @ 543:b111b765b6cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
542:505656a9947f 543:b111b765b6cd
37 z-index: 10; 37 z-index: 10;
38 } 38 }
39 </style> 39 </style>
40 40
41 <script> 41 <script>
42 import { HTTP } from "../lib/http";
42 import "ol/ol.css"; 43 import "ol/ol.css";
43 import { Map, View } from "ol"; 44 import { Map, View } from "ol";
44 import TileLayer from "ol/layer/Tile"; 45 // needed for vector filter example
46 // import { greaterThan as greaterThanFilter } from "ol/format/filter.js";
47 import { WFS, GeoJSON } from "ol/format.js";
48 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
49 import VectorSource from "ol/source/Vector.js";
50 import { Stroke, Style } from "ol/style.js";
45 import OSM from "ol/source/OSM"; 51 import OSM from "ol/source/OSM";
46 import TileWMS from "ol/source/TileWMS.js"; 52 import TileWMS from "ol/source/TileWMS.js";
47 import Layerselect from "./Layerselect"; 53 import Layerselect from "./Layerselect";
48 54
49 export default { 55 export default {
71 url: "https://demo.d4d-portal.info/wms", 77 url: "https://demo.d4d-portal.info/wms",
72 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } 78 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
73 }) 79 })
74 }), 80 }),
75 isVisible: true 81 isVisible: true
82 },
83 {
84 name: "Fairways Dimensions",
85 data: new VectorLayer({
86 source: new VectorSource(),
87 style: new Style({
88 stroke: new Stroke({
89 color: "rgba(0, 0, 255, 1.0)",
90 width: 2
91 })
92 })
93 }),
94 isVisible: true
76 } 95 }
77 ] 96 ]
78 }; 97 };
79 }, 98 },
80 computed: { 99 computed: {
89 this.layers[layer].isVisible = !this.layers[layer].isVisible; 108 this.layers[layer].isVisible = !this.layers[layer].isVisible;
90 this.layers[layer].data.setVisible(this.layers[layer].isVisible); 109 this.layers[layer].data.setVisible(this.layers[layer].isVisible);
91 } 110 }
92 }, 111 },
93 mounted() { 112 mounted() {
113 var that = this;
94 this.openLayersMap = new Map({ 114 this.openLayersMap = new Map({
95 layers: this.layerData, 115 layers: this.layerData,
96 target: "map", 116 target: "map",
97 view: new View({ 117 view: new View({
98 center: [this.long, this.lat], 118 center: [this.long, this.lat],
99 zoom: this.zoom, 119 zoom: this.zoom,
100 projection: this.projection 120 projection: this.projection
101 }) 121 })
102 }); 122 });
123
124 var featureRequest = new WFS().writeGetFeature({
125 // srsName: "urn:ogc:def:crs:EPSG::4326",
126 srsName: "EPSG:3857",
127 featureNS: "gemma",
128 featurePrefix: "gemma",
129 featureTypes: ["fairway_dimensions"],
130 outputFormat: "application/json"
131 // example for a filter
132 //filter: greaterThanFilter("level_of_service", 0)
133 });
134
135 HTTP.post(
136 "/internal/wfs",
137 new XMLSerializer().serializeToString(featureRequest),
138 {
139 headers: {
140 "X-Gemma-Auth": localStorage.getItem("token"),
141 "Content-type": "text/xml; charset=UTF-8"
142 }
143 }
144 ).then(function(response) {
145 var features = new GeoJSON().readFeatures(JSON.stringify(response.data));
146 var vectorSrc = that.layers[2].data.getSource();
147 vectorSrc.addFeatures(features);
148 // would scale to the extend of all resulting features
149 // that.openLayersMap.getView().fit(vectorSrc.getExtent());
150 });
103 } 151 }
104 }; 152 };
105 </script> 153 </script>