Mercurial > gemma
changeset 802:327aa4a18a1c
Fairway profile WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 13:36:43 +0200 |
parents | b6a1779ffb42 |
children | 30ff051e75e9 |
files | client/src/application/Main.vue client/src/application/Topbar.vue client/src/fairway/Fairwayprofile.vue client/src/fairway/store.js client/src/map/Maplayer.vue |
diffstat | 5 files changed, 41 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/application/Main.vue Thu Sep 27 13:18:50 2018 +0200 +++ b/client/src/application/Main.vue Thu Sep 27 13:36:43 2018 +0200 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <Maplayer :drawMode="drawMode" :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer> <div v-if="isSplitscreen" class="profile d-flex flex-row"> - <FairwayProfile :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> + <FairwayProfile :fairwayCoordinates="fairwayCoordinates" :waterLevels="waterLevels" :data="currentProfile" :height="height" :width="width" :xScale="xAxis" :yScaleLeft="yAxisLeft" :yScaleRight="yAxisRight" :margin="margins" :totalLength="totalLength"></FairwayProfile> </div> </div> </template> @@ -49,7 +49,8 @@ "minAlt", "maxAlt", "totalLength", - "waterLevels" + "waterLevels", + "fairwayCoordinates" ]), xAxis() { return [this.xScale.x, this.xScale.y];
--- a/client/src/application/Topbar.vue Thu Sep 27 13:18:50 2018 +0200 +++ b/client/src/application/Topbar.vue Thu Sep 27 13:36:43 2018 +0200 @@ -10,7 +10,7 @@ </span> </div> <div class="searchgroup"> - <input v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar"> + <input @keyup.enter="takeFirstSearchresult" v-if="!searchbarCollapsed" id="search" v-model="searchQuery" type="text" class="form-control ui-element search searchbar"> <ul v-if="!searchbarCollapsed && searchResults !== null " class="list-group"> <li v-for="entry of searchResults" :key="entry.name" class="list-group-item"> <a href="#" @click.prevent="moveToSearchResult(entry)">{{entry.name}}</a> @@ -151,6 +151,10 @@ } }, methods: { + takeFirstSearchresult() { + if (!this.searchResults || this.searchResults.length != 1) return; + this.moveToSearchResult(this.searchResults[0]); + }, triggerSearch: debounce(function() { this.doSearch(); }, 500),
--- a/client/src/fairway/Fairwayprofile.vue Thu Sep 27 13:18:50 2018 +0200 +++ b/client/src/fairway/Fairwayprofile.vue Thu Sep 27 13:36:43 2018 +0200 @@ -46,7 +46,8 @@ "yScaleRight", "margin", "totalLength", - "waterLevels" + "waterLevels", + "fairwayCoordinates" ], computed: { waterColor() { @@ -76,6 +77,9 @@ }, selectedWaterLevel() { this.drawDiagram(); + }, + fairwayCoordinates() { + this.drawDiagram(); } }, methods: { @@ -117,6 +121,17 @@ height, width }); + this.drawFairway({ + graph, + xScale, + yScaleLeft, + currentData, + height, + width + }); + }, + drawFairway() { + console.log(this.fairwayCoordinates); }, drawLabels({ graph, height }) { graph
--- a/client/src/fairway/store.js Thu Sep 27 13:18:50 2018 +0200 +++ b/client/src/fairway/store.js Thu Sep 27 13:36:43 2018 +0200 @@ -12,10 +12,14 @@ { year: "2016", level: 0, color: "#005DFF" }, { year: "2017", level: -0.5, color: "#639CFF" } ], + fairwayCoordinates: [], startPoint: null, endPoint: null }, getters: { + fairwayCoordinates: state => { + return state.fairwayCoordinates; + }, waterLevels: state => { return state.waterLevels; }, @@ -60,6 +64,9 @@ }, setEndPoint: (state, end) => { state.endPoint = end; + }, + setFairwayCoordinates: (state, coordinates) => { + state.fairwayCoordinates = coordinates; } },
--- a/client/src/map/Maplayer.vue Thu Sep 27 13:18:50 2018 +0200 +++ b/client/src/map/Maplayer.vue Thu Sep 27 13:36:43 2018 +0200 @@ -36,6 +36,8 @@ import lineIntersect from "@turf/line-intersect"; import { displayError } from "../application/lib/errors.js"; +const DEMODATA = 2.5; + export default { name: "maplayer", props: ["drawMode", "lat", "long", "zoom", "split"], @@ -119,12 +121,9 @@ this.$store .dispatch("fairwayprofile/loadProfile", geoJSON) .then(() => { - // FIXME: assuming that we have the fairway dimensions loaded var vectorSource = this.getLayerByName( "Fairway Dimensions" ).data.getSource(); - console.log(vectorSource); - var diagStack = []; vectorSource.forEachFeatureIntersectingExtent( // need to use EPSG:3857 which is the proj of vectorSource profileLine @@ -137,12 +136,10 @@ .getGeometry() .clone() .transform("EPSG:3857", "EPSG:4326"); - console.log("intersecting:", intersectingPolygon); this.addToFairwayRectangle( profileLine, intersectingPolygon, - 2.5, // FIXME use real fairway depth value for this feature - diagStack + DEMODATA ); } ); @@ -155,23 +152,13 @@ }); }); }, - addToFairwayRectangle(profileLine, fairwayGeometry, depth, diagStack) { + addToFairwayRectangle(profileLine, fairwayGeometry, depth) { // both geometries have to be in EPSG:4326 // uses turfjs distance() function - // pushes pairs of diagram points into diagStack - console.log( - "addToFairwayRectangle(", - profileLine, - fairwayGeometry, - depth, - diagStack, - ")" - ); + let fairwayCoordinates = []; var line = turfLineString(profileLine.getCoordinates()); var polygon = turfPolygon(fairwayGeometry.getCoordinates()); var intersects = lineIntersect(line, polygon); - console.log(intersects.features); - var l = intersects.features.length; if (l % 2 != 0) { console.log("Ignoring fairway because profile only intersects once."); @@ -182,14 +169,17 @@ let fEndPoint = intersects.features[i + 1].geometry.coordinates; let opts = { units: "kilometers" }; - diagStack.push([ + fairwayCoordinates.push([ distance(pStartPoint, fStartPoint, opts) * 1000, distance(pStartPoint, fEndPoint, opts) * 1000, depth ]); } } - console.log("Resulting diagStack:", diagStack); + this.$store.commit( + "fairwayprofile/setFairwayCoordinates", + fairwayCoordinates + ); }, activateInteraction() { const interaction = this.createInteraction(this.drawMode);