Mercurial > gemma
changeset 956:c2b03f4755b6
initial draft
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Tue, 16 Oct 2018 13:55:14 +0200 |
| parents | 920fba3f593f |
| children | 93364f153da4 |
| files | client/src/layers/Layers.vue client/src/map/Maplayer.vue client/src/map/mapstore.js |
| diffstat | 3 files changed, 279 insertions(+), 35 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/layers/Layers.vue Tue Oct 16 11:13:06 2018 +0200 +++ b/client/src/layers/Layers.vue Tue Oct 16 13:55:14 2018 +0200 @@ -54,7 +54,7 @@ <script> import Layerselect from "./Layerselect"; -import { mapGetters } from "vuex"; +import { Mapstore } from "../map/mapstore.js"; export default { name: "layers", data() { @@ -66,7 +66,9 @@ Layerselect }, computed: { - ...mapGetters("mapstore", ["layers"]), + layers() { + return Mapstore.layers; + }, layerSelectStyle() { return { "ui-element": true, @@ -83,7 +85,7 @@ this.collapsed = !this.collapsed; }, visibilityToggled(layer) { - this.$store.commit("mapstore/toggleVisibility", layer); + Mapstore.toggleVisibility(layer); } } };
--- a/client/src/map/Maplayer.vue Tue Oct 16 11:13:06 2018 +0200 +++ b/client/src/map/Maplayer.vue Tue Oct 16 13:55:14 2018 +0200 @@ -25,7 +25,6 @@ <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"; @@ -49,6 +48,8 @@ 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 */ @@ -65,8 +66,6 @@ }; }, computed: { - ...mapGetters("mapstore", ["layers", "getLayerByName"]), - ...mapState("mapstore", ["openLayersMap", "selectedMorph"]), mapStyle() { return { mapfull: !this.split, @@ -74,7 +73,7 @@ }; }, layerData() { - const l = this.layers.map(x => { + const l = Mapstore.layers.map(x => { return x.data; }); return [...l, this.vectorLayer]; @@ -130,7 +129,7 @@ }); }, removeCurrentInteraction() { - this.openLayersMap.removeInteraction(this.interaction); + Mapstore.openLayersMap.removeInteraction(this.interaction); this.interaction = null; }, createInteraction() { @@ -142,7 +141,7 @@ }); draw.on("drawstart", event => { this.vectorSource.clear(); - this.$store.commit("mapstore/setCurrentMeasurement", null); + Mapstore.setCurrentMeasurement(null); event.feature.setId("drawn.1"); // unique id for new feature }); draw.on("drawend", this.drawEnd); @@ -150,16 +149,16 @@ }, drawEnd(event) { const length = getLength(event.feature.getGeometry()); - this.$store.commit("mapstore/setCurrentMeasurement", length); + 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 (this.selectedMorph) { - console.log("requesting profile for", this.selectedMorph); - this.requestProfile(event, this.selectedMorph); + if (Mapstore.selectedMorph) { + console.log("requesting profile for", Mapstore.selectedMorph); + this.requestProfile(event, Mapstore.selectedMorph); } }, requestProfile(event, survey) { @@ -183,7 +182,7 @@ this.$store .dispatch("fairwayprofile/loadProfile", geoJSON) .then(() => { - var vectorSource = this.getLayerByName( + var vectorSource = Mapstore.getLayerByName( "Fairway Dimensions" ).data.getSource(); vectorSource.forEachFeatureIntersectingExtent( @@ -247,19 +246,19 @@ activateInteraction() { const interaction = this.createInteraction(this.drawMode); this.interaction = interaction; - this.openLayersMap.addInteraction(interaction); + Mapstore.openLayersMap.addInteraction(interaction); }, activateIdentifyMode() { - this.openLayersMap.on("singleclick", event => { + Mapstore.openLayersMap.on("singleclick", event => { // console.log("single click on map:", event); this.identify(event.coordinate, event.pixel); }); }, identify(coordinate, pixel) { - this.$store.commit("mapstore/setIdentifiedFeatures", []); + Mapstore.setIdentifiedFeatures([]); // checking our WFS layers - var features = this.openLayersMap.getFeaturesAtPixel(pixel); - this.$store.commit("mapstore/setIdentifiedFeatures", features); + var features = Mapstore.openLayersMap.getFeaturesAtPixel(pixel); + Mapstore.setIdentifiedFeatures(features); // DEBUG output and example how to remove the GeometryName /* @@ -274,7 +273,7 @@ */ // trying the GetFeatureInfo way for WMS - var wmsSource = this.getLayerByName( + var wmsSource = Mapstore.getLayerByName( "Inland ECDIS chart Danube" ).data.getSource(); var url = wmsSource.getGetFeatureInfoUrl( @@ -335,7 +334,7 @@ }, updateBottleneckFilter(bottleneck_id, datestr) { console.log("updating filter with", bottleneck_id, datestr); - var layer = this.getLayerByName("Bottleneck isolines"); + var layer = Mapstore.getLayerByName("Bottleneck isolines"); var wmsSrc = layer.data.getSource(); if (bottleneck_id != "does_not_exist") { @@ -361,20 +360,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(this.openLayersMap.getViewport()); - // var canvas = this.openLayersMap.getViewport().getElementsByTagName("canvas")[0]; + // console.log(Mapstore.openLayersMap.getViewport()); + // var canvas = Mapstore.openLayersMap.getViewport().getElementsByTagName("canvas")[0]; // console.log(canvas); // canvas.width=1000; // canvas.height=1414; // // An experiment which also did not work: - // this.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4 + // Mapstore.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 - // this.openLayersMap.updateSize(); + // Mapstore.openLayersMap.updateSize(); }, onAfterPrint(/* evt */) { // could be used to undo changes that have been done for printing @@ -392,7 +391,7 @@ } }, split() { - const map = this.openLayersMap; + const map = Mapstore.openLayersMap; this.$nextTick(() => { map.updateSize(); }); @@ -421,7 +420,7 @@ projection: this.projection }) }); - this.$store.commit("mapstore/setOpenLayersMap", map); + Mapstore.setOpenLayersMap(map); // TODO make display of layers more dynamic, e.g. from a list @@ -448,18 +447,18 @@ } ).then(response => { var features = new GeoJSON().readFeatures(JSON.stringify(response.data)); - var vectorSrc = this.getLayerByName( + var vectorSrc = Mapstore.getLayerByName( "Fairway Dimensions" ).data.getSource(); vectorSrc.addFeatures(features); // would scale to the extend of all resulting features - // this.openLayersMap.getView().fit(vectorSrc.getExtent()); + // Mapstore.openLayersMap.getView().fit(vectorSrc.getExtent()); }); // load following layers with bboxStrategy (using our request builder) var layer = null; - layer = this.getLayerByName("Waterway Area"); + layer = Mapstore.getLayerByName("Waterway Area"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -472,7 +471,7 @@ ) ); - layer = this.getLayerByName("Waterway Axis"); + layer = Mapstore.getLayerByName("Waterway Axis"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -485,7 +484,7 @@ ) ); - layer = this.getLayerByName("Distance marks"); + layer = Mapstore.getLayerByName("Distance marks"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -501,7 +500,7 @@ ); layer.data.setVisible(layer.isVisible); - layer = this.getLayerByName("Distance marks, Axis"); + layer = Mapstore.getLayerByName("Distance marks, Axis"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -515,7 +514,7 @@ ) ); - layer = this.getLayerByName("Waterway Area, named"); + layer = Mapstore.getLayerByName("Waterway Area, named"); layer.data.getSource().setLoader( this.buildVectorLoader( { @@ -530,7 +529,7 @@ ); layer.data.setVisible(layer.isVisible); - layer = this.getLayerByName("Bottlenecks"); + layer = Mapstore.getLayerByName("Bottlenecks"); layer.data.getSource().setLoader( this.buildVectorLoader( {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/map/mapstore.js Tue Oct 16 13:55:14 2018 +0200 @@ -0,0 +1,243 @@ +//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 };