Mercurial > gemma
changeset 3571:9e296d686f16
client: cross profiles: support gabs in fairway and improved display in diagram and legend
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Mon, 03 Jun 2019 13:59:41 +0200 |
| parents | 2ec49a2dca83 |
| children | c69c01045498 |
| files | client/src/components/fairway/Fairwayprofile.vue client/src/components/map/styles.js client/src/lib/geo.js client/src/store/fairwayprofile.js |
| diffstat | 4 files changed, 111 insertions(+), 46 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Mon Jun 03 12:22:26 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Mon Jun 03 13:59:41 2019 +0200 @@ -11,9 +11,51 @@ </div> <div class="legend"> <span - style="background-color: #1f4fff; width: 20px; height: 20px;" + :style=" + 'width: 16px; height: 16px; background-color: rgba(' + + this.getLayerStyle(1).fillColor.join(',') + + ',' + + this.getLayerStyle(1).fillOpacity + + '); border: dotted 2px rgba(' + + this.getLayerStyle(1).strokeColor.join(',') + + ',' + + this.getLayerStyle(1).strokeOpacity + + '); background-clip: padding-box; box-sizing: content-box;' + " ></span> - Fairway + Fairway (LOS 1) + </div> + <div class="legend"> + <span + :style=" + 'width: 16px; height: 16px; background-color: rgba(' + + this.getLayerStyle(2).fillColor.join(',') + + ',' + + this.getLayerStyle(2).fillOpacity + + '); border: dashed 2px rgba(' + + this.getLayerStyle(2).strokeColor.join(',') + + ',' + + this.getLayerStyle(2).strokeOpacity + + '); background-clip: padding-box; box-sizing: content-box;' + " + ></span> + Fairway (LOS 2) + </div> + <div class="legend"> + <span + :style=" + 'width: 16px; height: 16px; background-color: rgba(' + + this.getLayerStyle(3).fillColor.join(',') + + ',' + + this.getLayerStyle(3).fillOpacity + + '); border: solid 2px rgba(' + + this.getLayerStyle(3).strokeColor.join(',') + + ',' + + this.getLayerStyle(3).strokeOpacity + + '); background-clip: padding-box; box-sizing: content-box;' + " + ></span> + Fairway (LOS 3) </div> <div class="legend"> <span @@ -240,6 +282,20 @@ ); this.$store.dispatch("fairwayprofile/clearCurrentProfile"); }, + getLayerStyle(los) { + let style = this.openLayersMap() + .getLayer("FAIRWAYDIMENSIONSLOS" + los) + .getStyle()()[0]; + + // use spread operator to clone arrays + let fillColor = [...style.getFill().getColor()]; + let fillOpacity = fillColor.pop(); + let strokeColor = [...style.getStroke().getColor()]; + let strokeOpacity = strokeColor.pop(); + let strokeDash = style.getStroke().getLineDash(); + + return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash }; + }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { this.templateData = this.defaultTemplate; @@ -479,24 +535,33 @@ return; } for (let data of this.fairwayData) { - const [startPoint, endPoint, depth] = data.coordinates[0]; - let fairwayArea = d3 - .area() - .x(function(d) { - return xScale(d.x); - }) - .y0(yScaleRight(0)) - .y1(function(d) { - return yScaleRight(d.y); - }); - graph - .append("path") - .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) - .attr("fill", "#002AFF") - .attr("fill-opacity", 0.65) - .attr("stroke", "#002AFF") - .attr("stroke-width", 2) - .attr("d", fairwayArea); + data.coordinates.forEach(coordinates => { + const [startPoint, endPoint, depth] = coordinates; + let fairwayArea = d3 + .area() + .x(function(d) { + return xScale(d.x); + }) + .y0(yScaleRight(0)) + .y1(function(d) { + return yScaleRight(d.y); + }); + graph + .append("path") + .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) + .attr( + "fill", + `rgba(${this.getLayerStyle(data.los).fillColor.join(",")})` + ) + .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity) + .attr( + "stroke", + `rgba(${this.getLayerStyle(data.los).strokeColor.join(",")})` + ) + .attr("stroke-opacity", this.getLayerStyle(data.los).strokeOpacity) + .attr("stroke-dasharray", this.getLayerStyle(data.los).strokeDash) + .attr("d", fairwayArea); + }); } }, drawLabels({ graph, height }) {
--- a/client/src/components/map/styles.js Mon Jun 03 12:22:26 2019 +0200 +++ b/client/src/components/map/styles.js Mon Jun 03 13:59:41 2019 +0200 @@ -7,33 +7,33 @@ const styles = { blue1: new Style({ stroke: new Stroke({ - color: "rgba(0, 0, 255, 0.8)", + color: [0, 0, 255, 0.8], lineDash: [2, 4], lineCap: "round", width: 2 }), fill: new Fill({ - color: "rgba(240, 230, 0, 0.2)" + color: [240, 230, 0, 0.2] }) }), blue2: new Style({ stroke: new Stroke({ - color: "rgba(0, 0, 255, 0.9)", + color: [0, 0, 255, 0.9], lineDash: [3, 6], lineCap: "round", width: 2 }), fill: new Fill({ - color: "rgba(240, 230, 0, 0.1)" + color: [240, 230, 0, 0.1] }) }), blue3: new Style({ stroke: new Stroke({ - color: "rgba(0, 0, 255, 1.0)", + color: [0, 0, 255, 1.0], width: 2 }), fill: new Fill({ - color: "rgba(255, 255, 255, 0.4)" + color: [255, 255, 255, 0.4] }) }), yellow1: new Style({
--- a/client/src/lib/geo.js Mon Jun 03 12:22:26 2019 +0200 +++ b/client/src/lib/geo.js Mon Jun 03 13:59:41 2019 +0200 @@ -191,7 +191,8 @@ var polygon = turfPolygon(fairwayGeometry.getCoordinates()); var intersects = lineIntersect(line, polygon); - var startPoint, endPoint; + let opts = { units: "meters" }; + let pStartPoint = profileLine.getCoordinates()[0]; if (intersects.features.length == 2) { let line1 = lineSlice( @@ -199,34 +200,33 @@ intersects.features[1].geometry, line ); - startPoint = line1.geometry.coordinates[0]; - endPoint = line1.geometry.coordinates[1]; + fairwayCoordinates.push([ + distance(pStartPoint, line1.geometry.coordinates[0], opts), + distance(pStartPoint, line1.geometry.coordinates[1], opts), + depth + ]); } else if ( booleanContains(polygon, turfPoint(line.geometry.coordinates[0])) && booleanContains(polygon, turfPoint(line.geometry.coordinates[1])) ) { - startPoint = line.geometry.coordinates[0]; - endPoint = line.geometry.coordinates[1]; + fairwayCoordinates.push([ + distance(pStartPoint, line.geometry.coordinates[0], opts), + distance(pStartPoint, line.geometry.coordinates[1], opts), + depth + ]); } else if (lineSplit(line, polygon).features.length > 0) { let split = lineSplit(line, polygon); for (let feature of split.features) { if (booleanContains(polygon, feature)) { - startPoint = feature.geometry.coordinates[0]; - endPoint = feature.geometry.coordinates[1]; + fairwayCoordinates.push([ + distance(pStartPoint, feature.geometry.coordinates[0], opts), + distance(pStartPoint, feature.geometry.coordinates[1], opts), + depth + ]); } } - } else { - return []; } - let opts = { units: "meters" }; - let pStartPoint = profileLine.getCoordinates()[0]; - fairwayCoordinates.push([ - distance(pStartPoint, startPoint, opts), - distance(pStartPoint, endPoint, opts), - depth - ]); - return fairwayCoordinates; };
--- a/client/src/store/fairwayprofile.js Mon Jun 03 12:22:26 2019 +0200 +++ b/client/src/store/fairwayprofile.js Mon Jun 03 13:59:41 2019 +0200 @@ -218,7 +218,7 @@ ); let fairwayData = { coordinates: fairwayCoordinates, - style: los3.getStyle() + los: 3 }; if (fairwayCoordinates.length > 0) { commit("addFairwayData", fairwayData); @@ -240,7 +240,7 @@ ); let fairwayData = { coordinates: fairwayCoordinates, - style: los2.getStyle() + los: 2 }; if (fairwayCoordinates.length > 0) { commit("addFairwayData", fairwayData); @@ -262,7 +262,7 @@ ); let fairwayData = { coordinates: fairwayCoordinates, - style: los1.getStyle() + los: 1 }; if (fairwayCoordinates.length > 0) { commit("addFairwayData", fairwayData);