Mercurial > gemma
changeset 767:dedf252b3e01
feat: fairwayprofile partially with retrieved data from the server
An intersection is made.
Data is retrieved from the server.
Data is transformed to X/Y.
Min and Max alt is calculated.
Total length is calculated.
Height information is calculated.
Scale on the left axis is adjusted.
Missing:
* drawing of current ground profile.
* drawing of rectangle for ship
* labels for Axis
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 25 Sep 2018 17:39:00 +0200 |
parents | afc635ab9f5b |
children | 3219e7e34953 |
files | client/src/application/Main.vue client/src/application/lib/geo.js client/src/fairway/store.js client/src/map/Maplayer.vue |
diffstat | 4 files changed, 89 insertions(+), 36 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Tue Sep 25 16:35:38 2018 +0200 +++ b/client/src/application/Main.vue Tue Sep 25 17:39:00 2018 +0200 @@ -34,10 +34,6 @@ x: 0, y: 300 }, - yScaleLeft: { - lo: 191, - hi: 199 - }, yScaleRight: { lo: -6, hi: 1 @@ -52,7 +48,7 @@ }, computed: { ...mapGetters("application", ["isSplitscreen", "drawMode"]), - ...mapGetters("fairwayprofile", ["currentProfile"]), + ...mapGetters("fairwayprofile", ["currentProfile", "minAlt", "maxAlt"]), xAxis() { return [this.xScale.x, this.xScale.y]; }, @@ -64,24 +60,29 @@ }, margins() { return this.margin; + }, + yScaleLeft() { + return { + lo: this.minAlt, + hi: this.maxAlt + }; } }, created() { window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100); }, updated() { - if (!document.querySelector(".profile")) return; - const clientHeight = document.querySelector(".profile").clientHeight; - const clientWidth = document.querySelector(".profile").clientWidth; - if (!clientHeight || !clientWidth) return; - this.height = document.querySelector(".profile").clientHeight - 25; - this.width = document.querySelector(".profile").clientWidth - 100; + this.scaleFairwayProfile(); }, destroyed() { window.removeEventListener("resize", debounce(this.scaleFairwayProfile)); }, methods: { scaleFairwayProfile() { + if (!document.querySelector(".profile")) return; + const clientHeight = document.querySelector(".profile").clientHeight; + const clientWidth = document.querySelector(".profile").clientWidth; + if (!clientHeight || !clientWidth) return; this.height = document.querySelector(".profile").clientHeight - 25; this.width = document.querySelector(".profile").clientWidth - 100; }
--- a/client/src/application/lib/geo.js Tue Sep 25 16:35:38 2018 +0200 +++ b/client/src/application/lib/geo.js Tue Sep 25 17:39:00 2018 +0200 @@ -76,15 +76,15 @@ let segmentPoints = []; let lengthPolyLine = 0; let referencePoint = Point(startPoint); - let minAlt = referencePoint.alt; - let maxAlt = referencePoint.alt; + let minAlt = Math.abs(lineSegments[0][0][2]); + let maxAlt = Math.abs(lineSegments[0][0][2]); let currentPoint = null; for (let segment of lineSegments) { let points = []; for (let coordinateTriplet of segment) { currentPoint = Point(coordinateTriplet); lengthPolyLine += distanceBetween(referencePoint, currentPoint); - let y = currentPoint.alt; + let y = Math.abs(currentPoint.alt); points.push({ x: lengthPolyLine, y: y
--- a/client/src/fairway/store.js Tue Sep 25 16:35:38 2018 +0200 +++ b/client/src/fairway/store.js Tue Sep 25 17:39:00 2018 +0200 @@ -1,33 +1,74 @@ -// import { HTTP } from "../lib/http"; - -const sampleData = [ - { x: 0, y: 1.0 }, - { x: 10, y: 1.0 }, - { x: 25, y: -2.0 }, - { x: 50, y: -4.5 }, - { x: 75, y: -4.0 }, - { x: 100, y: -3.0 }, - { x: 125, y: -4.0 }, - { x: 150, y: -5.0 }, - { x: 175, y: -4.0 }, - { x: 200, y: -3.0 }, - { x: 225, y: -3.5 }, - { x: 250, y: -3.0 }, - { x: 290, y: 1 }, - { x: 300, y: 1 } -]; +import { HTTP } from "../application/lib/http"; +import { prepareProfile } from "../application/lib/geo"; const FairwayProfile = { namespaced: true, state: { - currentProfile: sampleData + totalLength: 0, + minAlt: 0, + maxAlt: 0, + currentProfile: [], + startPoint: null, + endPoint: null }, getters: { currentProfile: state => { return state.currentProfile; + }, + startPoint: state => { + return state.startPoint; + }, + endPoint: state => { + return state.endPoint; + }, + length: state => { + return state.totalLength; + }, + minAlt: state => { + return state.minAlt; + }, + maxAlt: state => { + return state.maxAlt; } }, - mutations: {} + mutations: { + profileLoaded: (state, response) => { + const { data } = response; + const coordinates = data.geometry.coordinates; + if (!coordinates) return; + const startPoint = state.startPoint; + const endPoint = state.endPoint; + const geoJSON = data; + const result = prepareProfile({ geoJSON, startPoint, endPoint }); + state.currentProfile = result.points; + state.minAlt = result.minAlt; + state.maxAlt = result.maxAlt; + state.totalLength = result.totalLength; + }, + setStartPoint: (state, start) => { + state.startPoint = start; + }, + setEndPoint: (state, end) => { + state.endPoint = end; + } + }, + + actions: { + loadProfile({ commit }, geoJSON) { + return new Promise((resolve, reject) => { + HTTP.post("/cross", geoJSON, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + commit("profileLoaded", response); + resolve(response); + }) + .catch(error => { + reject(error); + }); + }); + } + } }; export default FairwayProfile;
--- a/client/src/map/Maplayer.vue Tue Sep 25 16:35:38 2018 +0200 +++ b/client/src/map/Maplayer.vue Tue Sep 25 17:39:00 2018 +0200 @@ -33,6 +33,7 @@ } from "@turf/helpers"; //import { lineIntersect as turfLineIntersect } from "@turf/line-intersect"; import lineIntersect from "@turf/line-intersect"; +import { displayError } from "../application/lib/errors.js"; export default { name: "maplayer", @@ -100,13 +101,23 @@ // prepare to send the first line seqment to the server as GeoJSON inputLineString.transform("EPSG:3857", "EPSG:4326"); const [start, end] = inputLineString.getCoordinates(); + this.$store.commit("fairwayprofile/setStartPoint", start); + this.$store.commit("fairwayprofile/setEndPoint", end); const profileLine = new LineString([start, end]); const feature = this.findFeature(profileLine); const geoJSON = new GeoJSON({ geometryName: "geometry" }).writeFeature( feature ); - console.log("Feature: ", feature); - console.log("geoJSON", geoJSON); + this.$store + .dispatch("fairwayprofile/loadProfile", geoJSON) + .then() + .catch(error => { + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); // // FIXME: assuming that we have the fairway dimensions loaded // var vectorSource = this.getLayerByName(