Mercurial > gemma
changeset 2125:ea5a0e771b71
Distinct fairway layers per LOS
There are now distinct layers for LOS1-3, which can be enabled/disabled in the legend.
LOS2 has no data yet but works.
Cross profiles show only LOS3 still.
issue 261
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Wed, 06 Feb 2019 11:47:02 +0100 |
| parents | af136b1a854e |
| children | d4a5e475f874 |
| files | client/src/components/Maplayer.vue client/src/store/fairway.js client/src/store/map.js |
| diffstat | 3 files changed, 93 insertions(+), 34 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Maplayer.vue Tue Feb 05 14:46:26 2019 +0100 +++ b/client/src/components/Maplayer.vue Wed Feb 06 11:47:02 2019 +0100 @@ -36,6 +36,7 @@ import "ol/ol.css"; import { Map, View } from "ol"; import { WFS, GeoJSON } from "ol/format.js"; +import { equalTo } from "ol/format/filter.js"; import { Stroke, Style, Fill } from "ol/style.js"; /* for the sake of debugging */ @@ -179,33 +180,37 @@ // TODO make display of layers more dynamic, e.g. from a list - // loading the full WFS layer, by not setting the loader function - // and without bboxStrategy - var featureRequest = new WFS().writeGetFeature({ - srsName: "EPSG:3857", - featureNS: "gemma", - featurePrefix: "gemma", - featureTypes: ["fairway_dimensions"], - outputFormat: "application/json" - }); + // load different fairway dimension layers (level of service) + ["1", "2", "3"].forEach(los => { + // loading the full WFS layer, by not setting the loader function + // and without bboxStrategy + var featureRequest = new WFS().writeGetFeature({ + srsName: "EPSG:3857", + featureNS: "gemma", + featurePrefix: "gemma", + featureTypes: ["fairway_dimensions"], + outputFormat: "application/json", + filter: equalTo("level_of_service", los) + }); - // NOTE: loading the full fairway_dimensions makes sure - // that all are available for the intersection with the profile - HTTP.post( - "/internal/wfs", - new XMLSerializer().serializeToString(featureRequest), - { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" + // NOTE: loading the full fairway_dimensions makes sure + // that all are available for the intersection with the profile + HTTP.post( + "/internal/wfs", + new XMLSerializer().serializeToString(featureRequest), + { + headers: { + "X-Gemma-Auth": localStorage.getItem("token"), + "Content-type": "text/xml; charset=UTF-8" + } } - } - ).then(response => { - this.getVSourceByName("Fairway Dimensions").addFeatures( - new GeoJSON().readFeatures(JSON.stringify(response.data)) - ); - // would scale to the extend of all resulting features - // this.openLayersMap.getView().fit(vectorSrc.getExtent()); + ).then(response => { + this.getVSourceByName("Fairway Dimensions LOS " + los).addFeatures( + new GeoJSON().readFeatures(JSON.stringify(response.data)) + ); + // would scale to the extend of all resulting features + // this.openLayersMap.getView().fit(vectorSrc.getExtent()); + }); }); // load following layers with bboxStrategy (using our request builder)
--- a/client/src/store/fairway.js Tue Feb 05 14:46:26 2019 +0100 +++ b/client/src/store/fairway.js Wed Feb 06 11:47:02 2019 +0100 @@ -201,7 +201,7 @@ .then(() => { rootState.map.cutTool.setActive(false); rootGetters["map/getVSourceByName"]( - "Fairway Dimensions" + "Fairway Dimensions LOS 3" ).forEachFeatureIntersectingExtent( // need to use EPSG:3857 which is the proj of vectorSource profileLine
--- a/client/src/store/map.js Tue Feb 05 14:46:26 2019 +0100 +++ b/client/src/store/map.js Wed Feb 06 11:47:02 2019 +0100 @@ -105,18 +105,14 @@ showInLegend: true }, { - name: "Fairway Dimensions", + name: "Fairway Dimensions LOS 1", data: new VectorLayer({ source: new VectorSource(), - style: function(feature) { - let strokeColor = - feature.get("level_of_service").toString() === "3" - ? "rgba(0, 0, 255, 1.0)" - : "rgba(0, 100, 150, 1.0)"; + style: function() { return [ new Style({ stroke: new Stroke({ - color: strokeColor, + color: "rgba(76, 76, 255, 1.0)", width: 2 }) }), @@ -127,7 +123,65 @@ fill: new Fill({ color: "black" }), - text: "LOS: " + feature.get("level_of_service").toString() + text: "LOS: 1" + //, zIndex: 10 + }) + }) + ]; + } + }), + isVisible: true, + showInLegend: true + }, + { + name: "Fairway Dimensions LOS 2", + data: new VectorLayer({ + source: new VectorSource(), + style: function() { + return [ + new Style({ + stroke: new Stroke({ + color: "rgba(38, 38, 127, 1.0)", + width: 2 + }) + }), + new Style({ + text: new Text({ + font: 'bold 12px "Open Sans", "sans-serif"', + placement: "line", + fill: new Fill({ + color: "black" + }), + text: "LOS: 2" + //, zIndex: 10 + }) + }) + ]; + } + }), + isVisible: true, + showInLegend: true + }, + { + name: "Fairway Dimensions LOS 3", + data: new VectorLayer({ + source: new VectorSource(), + style: function() { + return [ + new Style({ + stroke: new Stroke({ + color: "rgba(0, 0, 255, 1.0)", + width: 2 + }) + }), + new Style({ + text: new Text({ + font: 'bold 12px "Open Sans", "sans-serif"', + placement: "line", + fill: new Fill({ + color: "black" + }), + text: "LOS: 3" //, zIndex: 10 }) })