Mercurial > gemma
changeset 702:aaf5dbfb9512
client: improve loading of WFS features
* Change Waterway Area and Distance Marks (on the river banks)
to use the bbox loader. Which also causes them only to be loaded
when they are visible.
* Improve buildVectorLoader() to make use of the projection now.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 21 Sep 2018 00:20:57 +0200 |
parents | 8149772c62d6 |
children | e9c28c42c927 |
files | client/src/map/Maplayer.vue client/src/map/store.js |
diffstat | 2 files changed, 39 insertions(+), 42 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/map/Maplayer.vue Thu Sep 20 23:40:22 2018 +0200 +++ b/client/src/map/Maplayer.vue Fri Sep 21 00:20:57 2018 +0200 @@ -83,10 +83,9 @@ // load depending on the bbox // b) the VectorSource has to have option strategy: bbox for this featureRequestOptions["outputFormat"] = "application/json"; - var loader = function(extent) { - //var loader = function(extent, resolution, projection) { - //var proj = projection.getCode(); + var loader = function(extent, resolution, projection) { featureRequestOptions["bbox"] = extent; + featureRequestOptions["srsName"] = projection.getCode(); var featureRequest = new WFS().writeGetFeature(featureRequestOptions); // DEBUG console.log(featureRequest); HTTP.post( @@ -104,7 +103,12 @@ JSON.stringify(response.data) ); vectorSource.addFeatures(features); - console.log("loaded", features.length, "features"); + console.log( + "loaded", + features.length, + featureRequestOptions.featureTypes, + "features" + ); // DEBUG console.log("loaded ", features, "for", vectorSource); // eslint-disable-next-line }).catch(error => { @@ -170,26 +174,21 @@ }); // FIXME hardwired for now - var featureRequest3 = new WFS().writeGetFeature({ + var featureRequestOptions3 = { featurePrefix: "ws-wamos", featureTypes: ["ienc_wtware"], - outputFormat: "application/json" - }); + geometryName: "geom" + }; - 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); - }); + this.layers[3].data + .getSource() + .setLoader( + this.buildVectorLoader( + featureRequestOptions3, + "/external/d4d", + this.layers[3].data.getSource() + ) + ); // FIXME hardwired for now var featureRequest4 = new WFS().writeGetFeature({ @@ -214,30 +213,24 @@ }); // FIXME this is hardwired for now to try for an external point layer - var featureRequest5 = new WFS().writeGetFeature({ + var featureRequestOptions5 = { featurePrefix: "ws-wamos", featureTypes: ["ienc_dismar"], - outputFormat: "application/json", + geometryName: "geom", /* 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); - }); + this.layers[5].data + .getSource() + .setLoader( + this.buildVectorLoader( + featureRequestOptions5, + "/external/d4d", + this.layers[5].data.getSource() + ) + ); + this.layers[5].data.setVisible(this.layers[5].isVisible); // FIXME this is hardwired for now var featureRequestOptions6 = {
--- a/client/src/map/store.js Thu Sep 20 23:40:22 2018 +0200 +++ b/client/src/map/store.js Fri Sep 21 00:20:57 2018 +0200 @@ -60,7 +60,9 @@ { name: "Waterway Area", data: new VectorLayer({ - source: new VectorSource(), + source: new VectorSource({ + strategy: bboxStrategy + }), style: new Style({ stroke: new Stroke({ color: "rgba(0, 102, 0, 1)", @@ -87,7 +89,9 @@ { name: "Distance marks", data: new VectorLayer({ - source: new VectorSource() + source: new VectorSource({ + strategy: bboxStrategy + }) }), isVisible: false },