Mercurial > gemma
changeset 3044:c71373594719
client: map: prepared store to hold multiple map objects
This will be necessary to sync maps, toggle layers per map, etc. Therefore the methods to move the map
(moveToExtent, etc.) became actions instead of mutations.
line wrap: on
line diff
--- a/client/src/components/Bottlenecks.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/Bottlenecks.vue Sat Apr 13 16:02:06 2019 +0200 @@ -146,7 +146,7 @@ this.$store.commit("bottlenecks/selectedSurvey", survey); }) .then(() => { - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: bottleneck, zoom: 17, preventZoomOut: true @@ -163,7 +163,7 @@ this.$store.commit("bottlenecks/setFirstSurveySelected"); }) .then(() => { - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: bottleneck, zoom: 17, preventZoomOut: true
--- a/client/src/components/ImportStretches.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/ImportStretches.vue Sat Apr 13 16:02:06 2019 +0200 @@ -338,11 +338,8 @@ }, computed: { ...mapState("application", ["searchQuery"]), - ...mapState("map", [ - "openLayersMap", - "identifiedFeatures", - "currentMeasurement" - ]), + ...mapState("map", ["identifiedFeatures", "currentMeasurement"]), + ...mapGetters("map", ["openLayersMap"]), ...mapGetters("user", ["isSysAdmin"]), ...mapState("imports", ["stretches"]), defineStretchesLabel() { @@ -463,7 +460,7 @@ moveMapToStretch(stretch) { this.$store.commit("imports/selectedStretchId", stretch.id); this.openLayersMap.getLayer("STRETCHES").setVisible(true); - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: stretch, zoom: 17, preventZoomOut: true
--- a/client/src/components/Pdftool.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/Pdftool.vue Sat Apr 13 16:02:06 2019 +0200 @@ -93,7 +93,7 @@ * * Bernhard E. Reiter <bernhard@intevation.de> * * Fadi Abbud <fadi.abbud@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; import jsPDF from "jspdf"; import "@/lib/font-linbiolinum"; import { getPointResolution } from "ol/proj"; @@ -165,8 +165,9 @@ computed: { ...mapState("application", ["showPdfTool", "logoForPDF"]), ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]), - ...mapState("map", ["openLayersMap", "isolinesLegendImgDataURL"]), + ...mapState("map", ["isolinesLegendImgDataURL"]), ...mapState("user", ["user"]), + ...mapGetters("map", ["openLayersMap"]), generatePdfLable() { return this.$gettext("Generate PDF"); },
--- a/client/src/components/Search.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/Search.vue Sat Apr 13 16:02:06 2019 +0200 @@ -299,7 +299,7 @@ if (resultEntry.type === "rhm") zoom = 15; if (resultEntry.type === "city") zoom = 13; if (resultEntry.type === "gauge") zoom = 15; - this.$store.commit("map/moveMap", { + this.$store.dispatch("map/moveMap", { coordinates: resultEntry.geom.coordinates, zoom, preventZoomOut: true
--- a/client/src/components/Zoom.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/Zoom.vue Sat Apr 13 16:02:06 2019 +0200 @@ -55,13 +55,13 @@ * Markus Kottländer <markus@intevation.de> * Thomas Junk <thomas.junk@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; import { Vector as VectorLayer } from "ol/layer"; export default { name: "zoom", computed: { - ...mapState("map", ["openLayersMap"]), + ...mapGetters("map", ["openLayersMap"]), ...mapState("application", ["showSplitscreen"]), zoomLevel: { get() {
--- a/client/src/components/fairway/Profiles.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/fairway/Profiles.vue Sat Apr 13 16:02:06 2019 +0200 @@ -247,7 +247,7 @@ * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; import Feature from "ol/Feature"; import LineString from "ol/geom/LineString"; import { displayError, displayInfo } from "@/lib/errors"; @@ -264,7 +264,7 @@ }, computed: { ...mapState("application", ["showProfiles"]), - ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]), + ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), ...mapState("bottlenecks", [ "bottlenecksList", "surveys", @@ -278,6 +278,7 @@ "differencesLoading", "waterLevels" ]), + ...mapGetters("map", ["openLayersMap"]), orderedBottlenecks() { let groupedBottlenecks = {}, orderedGroups = {}; @@ -569,7 +570,7 @@ bn => bn.properties.name === this.selectedBottleneck ); if (!bottleneck) return; - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: bottleneck, zoom: 17, preventZoomOut: true
--- a/client/src/components/gauge/Gauges.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/gauge/Gauges.vue Sat Apr 13 16:02:06 2019 +0200 @@ -180,7 +180,7 @@ }, moveToGauge() { if (!this.selectedGauge) return; - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: this.selectedGauge, zoom: null, preventZoomOut: true @@ -205,7 +205,7 @@ this.$store.commit("gauges/waterlevels", []); }, expandCallback: () => { - this.$store.commit("map/moveMap", { + this.$store.dispatch("map/moveMap", { coordinates, zoom: null, preventZoomOut: true @@ -254,7 +254,7 @@ this.$store.commit("gauges/yearWaterlevels", []); }, expandCallback: () => { - this.$store.commit("map/moveMap", { + this.$store.dispatch("map/moveMap", { coordinates, zoom: null, preventZoomOut: true
--- a/client/src/components/identify/Identify.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/identify/Identify.vue Sat Apr 13 16:02:06 2019 +0200 @@ -147,7 +147,7 @@ }, methods: { zoomTo(feature) { - this.$store.commit("map/moveMap", { + this.$store.dispatch("map/moveMap", { coordinates: getCenter( feature .getGeometry()
--- a/client/src/components/importoverview/BottleneckDetail.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/importoverview/BottleneckDetail.vue Sat Apr 13 16:02:06 2019 +0200 @@ -87,7 +87,7 @@ import { WFS } from "ol/format"; import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter"; import { displayError } from "@/lib/errors"; -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { data() { @@ -101,7 +101,7 @@ }, computed: { ...mapState("imports", ["showLogs", "details"]), - ...mapState("map", ["openLayersMap"]) + ...mapGetters("map", ["openLayersMap"]) }, methods: { loadBottlenecks() { @@ -148,7 +148,7 @@ }, moveToBottleneck(index) { this.openLayersMap.getLayer("BOTTLENECKS").setVisible(true); - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: this.bottlenecks[index], zoom: 17, preventZoomOut: true
--- a/client/src/components/importoverview/SoundingResultDetail.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/importoverview/SoundingResultDetail.vue Sat Apr 13 16:02:06 2019 +0200 @@ -34,7 +34,7 @@ methods: { zoomTo() { const { lat, lon, bottleneck, date } = this.details.summary; - this.$store.commit("map/moveMap", { + this.$store.dispatch("map/moveMap", { coordinates: [lat, lon], zoom: 17, preventZoomOut: true
--- a/client/src/components/importoverview/StretchDetails.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/importoverview/StretchDetails.vue Sat Apr 13 16:02:06 2019 +0200 @@ -21,7 +21,7 @@ * Thomas Junk <thomas.junk@intevation.de> */ import { displayError } from "@/lib/errors"; -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { name: "stretchdetails", @@ -31,7 +31,7 @@ }, computed: { ...mapState("imports", ["showAdditional", "details"]), - ...mapState("map", ["openLayersMap"]) + ...mapGetters("map", ["openLayersMap"]) }, methods: { zoomToStretch() { @@ -42,7 +42,7 @@ .then(response => { if (response.data.features.length < 1) throw new Error("no feaures found for: " + name); - this.$store.commit("map/moveToExtent", { + this.$store.dispatch("map/moveToExtent", { feature: response.data.features[0], zoom: 17, preventZoomOut: true
--- a/client/src/components/layers/Layers.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/layers/Layers.vue Sat Apr 13 16:02:06 2019 +0200 @@ -48,14 +48,14 @@ * Thomas Junk <thomas.junk@intevation.de> * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { components: { Layerselect: () => import("./Layerselect") }, computed: { - ...mapState("map", ["openLayersMap"]), + ...mapGetters("map", ["openLayersMap"]), ...mapState("application", ["showLayers"]), layersLabel() { return this.$gettext("Layers");
--- a/client/src/components/map/Map.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/map/Map.vue Sat Apr 13 16:02:06 2019 +0200 @@ -61,7 +61,6 @@ ...mapState("map", [ "initialLoad", "extent", - "openLayersMap", "lineTool", "polygonTool", "cutTool" @@ -175,7 +174,7 @@ } }) .then(response => { - this.$store.commit("map/moveToBoundingBox", { + this.$store.dispatch("map/moveToBoundingBox", { boundingBox: [ response.data.extent.x1, response.data.extent.y1,
--- a/client/src/components/toolbar/Linetool.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/toolbar/Linetool.vue Sat Apr 13 16:02:06 2019 +0200 @@ -21,12 +21,13 @@ * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { name: "linetool", computed: { - ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]), + ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), + ...mapGetters("map", ["openLayersMap"]), label() { return this.$gettext("Measure Distance"); }
--- a/client/src/components/toolbar/Polygontool.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/toolbar/Polygontool.vue Sat Apr 13 16:02:06 2019 +0200 @@ -25,12 +25,13 @@ * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { name: "polygontool", computed: { - ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]), + ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), + ...mapGetters("map", ["openLayersMap"]), label() { return this.$gettext("Measure Area"); }
--- a/client/src/components/toolbar/Toolbar.vue Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/components/toolbar/Toolbar.vue Sat Apr 13 16:02:06 2019 +0200 @@ -116,7 +116,7 @@ * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ -import { mapState } from "vuex"; +import { mapState, mapGetters } from "vuex"; export default { name: "toolbar", @@ -131,8 +131,9 @@ Pdftool: () => import("./Pdftool") }, computed: { - ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]), - ...mapState("application", ["expandToolbar", "panes"]) + ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), + ...mapState("application", ["expandToolbar", "panes"]), + ...mapGetters("map", ["openLayersMap"]) }, mounted() { window.addEventListener("keydown", e => {
--- a/client/src/store/bottlenecks.js Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/store/bottlenecks.js Sat Apr 13 16:02:06 2019 +0200 @@ -60,7 +60,7 @@ } }, actions: { - setSelectedBottleneck({ state, commit, rootState }, name) { + setSelectedBottleneck({ state, commit, rootState, rootGetters }, name) { return new Promise((resolve, reject) => { if (name !== state.selectedBottleneck) { commit("selectedSurvey", null); @@ -74,7 +74,7 @@ commit("application/splitscreenLoading", false, { root: true }); }, 350); rootState.map.cutTool.setActive(false); - rootState.map.openLayersMap + rootGetters["map/openLayersMap"] .getLayer("CUTTOOL") .getSource() .clear();
--- a/client/src/store/fairway.js Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/store/fairway.js Sat Apr 13 16:02:06 2019 +0200 @@ -132,12 +132,12 @@ } }, actions: { - clearSelection({ commit, dispatch, rootState }) { + clearSelection({ commit, dispatch, rootState, rootGetters }) { dispatch("bottlenecks/setSelectedBottleneck", null, { root: true }); dispatch("map/enableIdentifyTool", null, { root: true }); commit("clearCurrentProfile"); rootState.map.cutTool.setActive(false); - rootState.map.openLayersMap + rootGetters["map/openLayersMap"] .getLayer("CUTTOOL") .getSource() .clear(); @@ -178,7 +178,7 @@ }); } }, - cut({ commit, dispatch, rootState }, cut) { + cut({ commit, dispatch, rootState, rootGetters }, cut) { return new Promise(resolve => { const length = getLength(cut.getGeometry()); commit( @@ -219,7 +219,7 @@ Promise.all(profileLoaders) .then(() => { rootState.map.cutTool.setActive(false); - const los3 = rootState.map.openLayersMap.getLayer( + const los3 = rootGetters["map/openLayersMap"].getLayer( "FAIRWAYDIMENSIONSLOS3" ); los3.getSource().forEachFeatureIntersectingExtent( @@ -241,7 +241,7 @@ } } ); - const los2 = rootState.map.openLayersMap.getLayer( + const los2 = rootGetters["map/openLayersMap"].getLayer( "FAIRWAYDIMENSIONSLOS2" ); los2.getSource().forEachFeatureIntersectingExtent( @@ -263,7 +263,7 @@ } } ); - const los1 = rootState.map.openLayersMap.getLayer( + const los1 = rootGetters["map/openLayersMap"].getLayer( "FAIRWAYDIMENSIONSLOS1" ); los1.getSource().forEachFeatureIntersectingExtent( @@ -311,7 +311,7 @@ bn.properties.name === rootState.bottlenecks.selectedBottleneck ); - commit( + dispatch( "map/moveToExtent", { feature: bottleneck,
--- a/client/src/store/map.js Sat Apr 13 15:28:48 2019 +0200 +++ b/client/src/store/map.js Sat Apr 13 16:02:06 2019 +0200 @@ -39,7 +39,7 @@ // initial state const init = () => { return { - openLayersMap: null, + openLayersMaps: [], initialLoad: true, extent: { lat: 6155376, @@ -62,6 +62,9 @@ namespaced: true, state: init(), getters: { + openLayersMap: state => { + return state.openLayersMaps.length ? state.openLayersMaps[0] : null; + }, filteredIdentifiedFeatures: state => { return state.identifiedFeatures.filter(f => f.getId()); } @@ -73,8 +76,8 @@ extent: (state, extent) => { state.extent = extent; }, - openLayersMap: (state, map) => { - state.openLayersMap = map; + addOpenLayersMap: (state, map) => { + state.openLayersMaps.push(map); }, identifyTool: (state, events) => { state.identifyTool = events; @@ -99,27 +102,6 @@ cutTool: (state, cutTool) => { state.cutTool = cutTool; }, - moveToBoundingBox: (state, { boundingBox, zoom, preventZoomOut }) => { - const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857"); - let view = state.openLayersMap.getView(); - moveMap({ view, extent, zoom, preventZoomOut }); - }, - moveToExtent: (state, { feature, zoom, preventZoomOut }) => { - const boundingBox = bbox(feature.geometry); - const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857"); - let view = state.openLayersMap.getView(); - moveMap({ view, extent, zoom, preventZoomOut }); - }, - moveMap: (state, { coordinates, zoom, preventZoomOut }) => { - let view = state.openLayersMap.getView(); - const currentZoom = view.getZoom(); - zoom = zoom || currentZoom; - view.animate({ - zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom, - center: fromLonLat(coordinates, view.getProjection()), - duration: 700 - }); - }, isolinesLegendImgDataURL: (state, isolinesLegendImgDataURL) => { state.isolinesLegendImgDataURL = isolinesLegendImgDataURL; }, @@ -216,22 +198,25 @@ commit("lineTool", lineTool); commit("polygonTool", polygonTool); commit("cutTool", cutTool); - commit("openLayersMap", map); + commit("addOpenLayersMap", map); }, disableIdentifyTool({ state }) { unByKey(state.identifyTool); state.identifyTool = null; }, - enableIdentifyTool({ state, rootState, commit, dispatch }) { + enableIdentifyTool({ state, rootState, getters, commit, dispatch }) { if (!state.identifyTool) { - state.identifyTool = state.openLayersMap.on( + state.identifyTool = getters.openLayersMap.on( ["singleclick", "dblclick"], event => { commit("setIdentifiedFeatures", []); // checking our WFS layers - var features = state.openLayersMap.getFeaturesAtPixel(event.pixel, { - hitTolerance: 7 - }); + var features = getters.openLayersMap.getFeaturesAtPixel( + event.pixel, + { + hitTolerance: 7 + } + ); if (features) { let identifiedFeatures = []; @@ -260,7 +245,7 @@ ).then(() => { this.commit("bottlenecks/setFirstSurveySelected"); }); - commit("moveMap", { + dispatch("moveMap", { coordinates: getCenter( feature .getGeometry() @@ -287,7 +272,7 @@ root: true } ); - commit("moveMap", { + dispatch("moveMap", { coordinates: getCenter( feature .getGeometry() @@ -309,7 +294,7 @@ commit("imports/selectedStretchId", feature.getId(), { root: true }); - commit("moveMap", { + dispatch("moveMap", { coordinates: getCenter( feature .getGeometry() @@ -340,7 +325,7 @@ */ // trying the GetFeatureInfo way for WMS - var dmaSource = state.openLayersMap + var dmaSource = getters.openLayersMap .getLayer("DISTANCEMARKSAXIS") .getSource(); var dmaUrl = dmaSource.getGetFeatureInfoUrl( @@ -369,7 +354,7 @@ }); } // trying the GetFeatureInfo way for WMS - var iecdisSource = state.openLayersMap + var iecdisSource = getters.openLayersMap .getLayer("INLANDECDIS") .getSource(); var iecdisUrl = iecdisSource.getGetFeatureInfoUrl( @@ -387,6 +372,27 @@ } ); } + }, + moveToBoundingBox({ getters }, { boundingBox, zoom, preventZoomOut }) { + const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857"); + let view = getters.openLayersMap.getView(); + moveMap({ view, extent, zoom, preventZoomOut }); + }, + moveToExtent({ getters }, { feature, zoom, preventZoomOut }) { + const boundingBox = bbox(feature.geometry); + const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857"); + let view = getters.openLayersMap.getView(); + moveMap({ view, extent, zoom, preventZoomOut }); + }, + moveMap({ getters }, { coordinates, zoom, preventZoomOut }) { + let view = getters.openLayersMap.getView(); + const currentZoom = view.getZoom(); + zoom = zoom || currentZoom; + view.animate({ + zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom, + center: fromLonLat(coordinates, view.getProjection()), + duration: 700 + }); } } };