Mercurial > gemma
changeset 957:93364f153da4
Backed out changeset c2b03f4755b6
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 16 Oct 2018 14:38:46 +0200 |
parents | c2b03f4755b6 |
children | 2818ad6c7d32 |
files | client/src/layers/Layers.vue client/src/map/Maplayer.vue client/src/map/mapstore.js |
diffstat | 3 files changed, 35 insertions(+), 279 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/layers/Layers.vue Tue Oct 16 13:55:14 2018 +0200 +++ b/client/src/layers/Layers.vue Tue Oct 16 14:38:46 2018 +0200 @@ -54,7 +54,7 @@ <script> import Layerselect from "./Layerselect"; -import { Mapstore } from "../map/mapstore.js"; +import { mapGetters } from "vuex"; export default { name: "layers", data() { @@ -66,9 +66,7 @@ Layerselect }, computed: { - layers() { - return Mapstore.layers; - }, + ...mapGetters("mapstore", ["layers"]), layerSelectStyle() { return { "ui-element": true, @@ -85,7 +83,7 @@ this.collapsed = !this.collapsed; }, visibilityToggled(layer) { - Mapstore.toggleVisibility(layer); + this.$store.commit("mapstore/toggleVisibility", layer); } } };
--- a/client/src/map/Maplayer.vue Tue Oct 16 13:55:14 2018 +0200 +++ b/client/src/map/Maplayer.vue Tue Oct 16 14:38:46 2018 +0200 @@ -25,6 +25,7 @@ <script> import { HTTP } from "../application/lib/http"; +import { mapGetters, mapState } from "vuex"; import "ol/ol.css"; import { Map, View } from "ol"; import Feature from "ol/Feature"; @@ -48,8 +49,6 @@ import lineIntersect from "@turf/line-intersect"; import { displayError } from "../application/lib/errors.js"; -import { Mapstore } from "./mapstore.js"; - const DEMODATA = 2.5; /* for the sake of debugging */ @@ -66,6 +65,8 @@ }; }, computed: { + ...mapGetters("mapstore", ["layers", "getLayerByName"]), + ...mapState("mapstore", ["openLayersMap", "selectedMorph"]), mapStyle() { return { mapfull: !this.split, @@ -73,7 +74,7 @@ }; }, layerData() { - const l = Mapstore.layers.map(x => { + const l = this.layers.map(x => { return x.data; }); return [...l, this.vectorLayer]; @@ -129,7 +130,7 @@ }); }, removeCurrentInteraction() { - Mapstore.openLayersMap.removeInteraction(this.interaction); + this.openLayersMap.removeInteraction(this.interaction); this.interaction = null; }, createInteraction() { @@ -141,7 +142,7 @@ }); draw.on("drawstart", event => { this.vectorSource.clear(); - Mapstore.setCurrentMeasurement(null); + this.$store.commit("mapstore/setCurrentMeasurement", null); event.feature.setId("drawn.1"); // unique id for new feature }); draw.on("drawend", this.drawEnd); @@ -149,16 +150,16 @@ }, drawEnd(event) { const length = getLength(event.feature.getGeometry()); - Mapstore.setCurrentMeasurement(length); + this.$store.commit("mapstore/setCurrentMeasurement", length); // also place the a rounded length in a property, so identify can show it event.feature.set("length", Math.round(length * 10) / 10); // if a survey has been selected, request a profile // TODO an improvement could be to check if the line intersects // with the bottleneck area's polygon before trying the server request - if (Mapstore.selectedMorph) { - console.log("requesting profile for", Mapstore.selectedMorph); - this.requestProfile(event, Mapstore.selectedMorph); + if (this.selectedMorph) { + console.log("requesting profile for", this.selectedMorph); + this.requestProfile(event, this.selectedMorph); } }, requestProfile(event, survey) { @@ -182,7 +183,7 @@ this.$store .dispatch("fairwayprofile/loadProfile", geoJSON) .then(() => { - var vectorSource = Mapstore.getLayerByName( + var vectorSource = this.getLayerByName( "Fairway Dimensions" ).data.getSource(); vectorSource.forEachFeatureIntersectingExtent( @@ -246,19 +247,19 @@ activateInteraction() { const interaction = this.createInteraction(this.drawMode); this.interaction = interaction; - Mapstore.openLayersMap.addInteraction(interaction); + this.openLayersMap.addInteraction(interaction); }, activateIdentifyMode() { - Mapstore.openLayersMap.on("singleclick", event => { + this.openLayersMap.on("singleclick", event => { // console.log("single click on map:", event); this.identify(event.coordinate, event.pixel); }); }, identify(coordinate, pixel) { - Mapstore.setIdentifiedFeatures([]); + this.$store.commit("mapstore/setIdentifiedFeatures", []); // checking our WFS layers - var features = Mapstore.openLayersMap.getFeaturesAtPixel(pixel); - Mapstore.setIdentifiedFeatures(features); + var features = this.openLayersMap.getFeaturesAtPixel(pixel); + this.$store.commit("mapstore/setIdentifiedFeatures", features); // DEBUG output and example how to remove the GeometryName /* @@ -273,7 +274,7 @@ */ // trying the GetFeatureInfo way for WMS - var wmsSource = Mapstore.getLayerByName( + var wmsSource = this.getLayerByName( "Inland ECDIS chart Danube" ).data.getSource(); var url = wmsSource.getGetFeatureInfoUrl( @@ -334,7 +335,7 @@ }, updateBottleneckFilter(bottleneck_id, datestr) { console.log("updating filter with", bottleneck_id, datestr); - var layer = Mapstore.getLayerByName("Bottleneck isolines"); + var layer = this.getLayerByName("Bottleneck isolines"); var wmsSrc = layer.data.getSource(); if (bottleneck_id != "does_not_exist") { @@ -360,20 +361,20 @@ // and change it, however this does not work well enough, as // another mechanism seems to update the size again before the rendering // for printing is done: - // console.log(Mapstore.openLayersMap.getViewport()); - // var canvas = Mapstore.openLayersMap.getViewport().getElementsByTagName("canvas")[0]; + // console.log(this.openLayersMap.getViewport()); + // var canvas = this.openLayersMap.getViewport().getElementsByTagName("canvas")[0]; // console.log(canvas); // canvas.width=1000; // canvas.height=1414; // // An experiment which also did not work: - // Mapstore.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4 + // this.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4 // // according to documentation // http://openlayers.org/en/latest/apidoc/module-ol_PluggableMap-PluggableMap.html#updateSize // "Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport." // but did not help - // Mapstore.openLayersMap.updateSize(); + // this.openLayersMap.updateSize(); }, onAfterPrint(/* evt */) { // could be used to undo changes that have been done for printing @@ -391,7 +392,7 @@ } }, split() { - const map = Mapstore.openLayersMap; + const map = this.openLayersMap; this.$nextTick(() => { map.updateSize(); }); @@ -420,7 +421,7 @@ projection: this.projection }) }); - Mapstore.setOpenLayersMap(map); + this.$store.commit("mapstore/setOpenLayersMap", map); // TODO make display of layers more dynamic, e.g. from a list @@ -447,18 +448,18 @@ } ).then(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); - var vectorSrc = Mapstore.getLayerByName( + var vectorSrc = this.getLayerByName( "Fairway Dimensions" ).data.getSource(); vectorSrc.addFeatures(features); // would scale to the extend of all resulting features - // Mapstore.openLayersMap.getView().fit(vectorSrc.getExtent()); + // this.openLayersMap.getView().fit(vectorSrc.getExtent()); }); // load following layers with bboxStrategy (using our request builder) var layer = null; - layer = Mapstore.getLayerByName("Waterway Area"); + layer = this.getLayerByName("Waterway Area"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -471,7 +472,7 @@ ) ); - layer = Mapstore.getLayerByName("Waterway Axis"); + layer = this.getLayerByName("Waterway Axis"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -484,7 +485,7 @@ ) ); - layer = Mapstore.getLayerByName("Distance marks"); + layer = this.getLayerByName("Distance marks"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -500,7 +501,7 @@ ); layer.data.setVisible(layer.isVisible); - layer = Mapstore.getLayerByName("Distance marks, Axis"); + layer = this.getLayerByName("Distance marks, Axis"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -514,7 +515,7 @@ ) ); - layer = Mapstore.getLayerByName("Waterway Area, named"); + layer = this.getLayerByName("Waterway Area, named"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -529,7 +530,7 @@ ); layer.data.setVisible(layer.isVisible); - layer = Mapstore.getLayerByName("Bottlenecks"); + layer = this.getLayerByName("Bottlenecks"); layer.data.getSource().setLoader( this.buildVectorLoader( {
--- a/client/src/map/mapstore.js Tue Oct 16 13:55:14 2018 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,243 +0,0 @@ -//import { HTTP } from "../lib/http"; - -import TileWMS from "ol/source/TileWMS.js"; -import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; -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"; -import { HTTP } from "../application/lib/http"; - -const Mapstore = { - state: { - openLayersMap: null, - layers: [ - { - name: "Open Streetmap", - data: new TileLayer({ - source: new OSM() - }), - isVisible: true - }, - { - 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 } - }) - }), - isVisible: true - }, - { - name: "Fairway Dimensions", - data: new VectorLayer({ - source: new VectorSource(), - style: function(feature) { - 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: " + feature.get("level_of_service").toString() - //, zIndex: 10 - }) - }) - ]; - } - }), - isVisible: true - }, - { - name: "Waterway Area, named", - data: new VectorLayer({ - source: new VectorSource({ - strategy: bboxStrategy - }), - style: new Style({ - stroke: new Stroke({ - color: "rgba(0, 132, 0, 1)", - width: 2 - }) - }) - }), - isVisible: false - }, - { - name: "Waterway Area", - data: new VectorLayer({ - source: new VectorSource({ - strategy: bboxStrategy - }), - style: new Style({ - stroke: new Stroke({ - color: "rgba(0, 102, 0, 1)", - width: 2 - }) - }) - }), - isVisible: true - }, - { - name: "Waterway Axis", - data: new VectorLayer({ - source: new VectorSource({ - strategy: bboxStrategy - }), - style: new Style({ - stroke: new Stroke({ - color: "rgba(0, 0, 255, .5)", - lineDash: [5, 5], - width: 2 - }) - }) - }), - isVisible: true - }, - { - name: "Distance marks", - forLegendStyle: { point: true, resolution: 8 }, - data: new VectorLayer({ - source: new VectorSource({ - strategy: bboxStrategy - }) - }), - isVisible: false - }, - { - name: "Bottlenecks", - data: new VectorLayer({ - source: new VectorSource({ - strategy: bboxStrategy - }), - style: new Style({ - stroke: new Stroke({ - color: "rgba(230, 230, 10, .8)", - width: 4 - }), - fill: new Fill({ - color: "rgba(230, 230, 10, .3)" - }) - }) - }), - isVisible: true - }, - { - name: "Bottleneck isolines", - data: new TileLayer({ - source: new TileWMS({ - preload: 0, - projection: "EPSG:3857", - url: window.location.origin + "/api/internal/wms", - params: { - LAYERS: "sounding_results_contour_lines_geoserver", - VERSION: "1.1.1", - TILED: true - }, - tileLoadFunction: function(tile, src) { - // console.log("calling for", tile, src); - HTTP.get(src, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token") - }, - responseType: "blob" - }).then(response => { - tile.getImage().src = URL.createObjectURL(response.data); - }); - } // TODO tile.setState(TileState.ERROR); - }) - }), - isVisible: false - }, - { - name: "Distance marks, Axis", - forLegendStyle: { point: true, resolution: 8 }, - data: new VectorLayer({ - 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 }) - }) - }); - 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 - } - ], - // note that some identified features may not have an id - // especially related to drawing in our own vector layer - identifiedFeatures: [], - currentMeasurement: null, - selectedMorph: null - }, - get layers() { - return this.state.layers; - }, - get openLayersMap() { - return this.state.openLayersMap; - }, - get identifiedFeatures() { - return this.openLayersMap.identifiedFeatures; - }, - get currentMeasurement() { - return this.state.currentMeasurement; - }, - get selectedMorph() { - return this.state.selectedMorph; - }, - getLayerByName(name) { - return this.state.layers.find(layer => layer.name === name); - }, - toggleVisibility(layer) { - this.state.layers[layer].isVisible = !this.state.layers[layer].isVisible; - this.state.layers[layer].data.setVisible( - this.state.layers[layer].isVisible - ); - }, - setIdentifiedFeatures(identifiedFeatures) { - this.state.identifiedFeatures = identifiedFeatures; - }, - setOpenLayersMap(map) { - this.state.openLayersMap = map; - }, - setCurrentMeasurement(measurement) { - this.state.currentMeasurement = measurement; - }, - setSelectedMorph(selectedMorph) { - this.state.selectedMorph = selectedMorph; - } -}; - -export { Mapstore };