Mercurial > gemma
changeset 704:fe0889460e97 octree
Merged default into octree branch.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Fri, 21 Sep 2018 09:50:46 +0200 |
parents | 18f6f2d89da1 (current diff) e9c28c42c927 (diff) |
children | 9db4ae29ded9 |
files | |
diffstat | 2 files changed, 112 insertions(+), 72 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/map/Maplayer.vue Thu Sep 20 21:08:37 2018 +0200 +++ b/client/src/map/Maplayer.vue Fri Sep 21 09:50:46 2018 +0200 @@ -73,6 +73,48 @@ const interaction = this.createInteraction(this.drawMode); this.interaction = interaction; this.openLayersMap.addInteraction(interaction); + }, + buildVectorLoader(featureRequestOptions, endpoint, vectorSource) { + // build a function to be used for VectorSource.setLoader() + // make use of WFS().writeGetFeature to build the request + // and use our HTTP library to actually do it + // NOTE: a) the geometryName has to be given in featureRequestOptions, + // because we want to load depending on the bbox + // b) the VectorSource has to have the option strategy: bbox + featureRequestOptions["outputFormat"] = "application/json"; + 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( + endpoint, + new XMLSerializer().serializeToString(featureRequest), + { + 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) + ); + vectorSource.addFeatures(features); + console.log( + "loaded", + features.length, + featureRequestOptions.featureTypes, + "features" + ); + // DEBUG console.log("loaded ", features, "for", vectorSource); + // eslint-disable-next-line + }).catch(error => { + vectorSource.removeLoadedExtent(extent); + }); + }; + return loader; } }, watch: { @@ -131,26 +173,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({ @@ -175,55 +212,42 @@ }); // 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 featureRequest6 = new WFS().writeGetFeature({ - srsName: "EPSG:3857", + var featureRequestOptions6 = { featureNS: "gemma", featurePrefix: "gemma", featureTypes: ["distance_marks_geoserver"], - outputFormat: "application/json" - }); + geometryName: "geom" + }; - 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); - }); + this.layers[6].data + .getSource() + .setLoader( + this.buildVectorLoader( + featureRequestOptions6, + "/internal/wfs", + this.layers[6].data.getSource() + ) + ); } }; </script>
--- a/client/src/map/store.js Thu Sep 20 21:08:37 2018 +0200 +++ b/client/src/map/store.js Fri Sep 21 09:50:46 2018 +0200 @@ -5,6 +5,7 @@ import OSM from "ol/source/OSM"; import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js"; import VectorSource from "ol/source/Vector.js"; +import { bbox as bboxStrategy } from "ol/loadingstrategy"; const MapStore = { namespaced: true, @@ -21,6 +22,7 @@ name: "Inland ECDIS chart Danube", data: new TileLayer({ source: new TileWMS({ + preload: 1, url: "https://demo.d4d-portal.info/wms", params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } }) @@ -58,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)", @@ -85,31 +89,43 @@ { name: "Distance marks", data: new VectorLayer({ - source: new VectorSource() + source: new VectorSource({ + strategy: bboxStrategy + }) }), isVisible: false }, { name: "Distance marks, Axis", data: new VectorLayer({ - source: new VectorSource(), - style: function(feature) { - return [ - new Style({ + source: new VectorSource({ + strategy: bboxStrategy + }), + style: function(feature, resolution) { + if (resolution < 10) { + var s = new Style({ image: new CircleStyle({ radius: 5, - fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}), - stroke: new Stroke({color: 'blue', width: 1}) - }), - text: new Text({ - font: '10px "Open Sans", "sans-serif"', - fill: new Fill({ - color: "black" - }), - text: (feature.get("hectometre")/10).toString() + fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }), + stroke: new Stroke({ color: "blue", width: 1 }) }) - }) - ]; + }); + if (resolution < 6) { + s.setText( + new Text({ + offsetY: 12, + font: '10px "Open Sans", "sans-serif"', + fill: new Fill({ + color: "black" + }), + text: (feature.get("hectometre") / 10).toString() + }) + ); + } + return s; + } else { + return []; + } } }), isVisible: true