Mercurial > gemma
changeset 3051:051a3f446ac2
client: made identify tool work with multiple maps
| author | Markus Kottlaender <markus@intevation.de> |
|---|---|
| date | Tue, 16 Apr 2019 08:20:37 +0200 |
| parents | c739b81b8f41 |
| children | 01210542e028 |
| files | client/src/components/map/Map.vue client/src/components/toolbar/Toolbar.vue client/src/store/fairway.js client/src/store/map.js |
| diffstat | 4 files changed, 195 insertions(+), 223 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/Map.vue Mon Apr 15 16:58:36 2019 +0200 +++ b/client/src/components/map/Map.vue Tue Apr 16 08:20:37 2019 +0200 @@ -224,8 +224,7 @@ console.log(error); }); - this.$store.dispatch("map/disableIdentifyTool"); - this.$store.dispatch("map/enableIdentifyTool"); + this.$store.dispatch("map/initIdentifyTool", this.map); } }; </script>
--- a/client/src/components/toolbar/Toolbar.vue Mon Apr 15 16:58:36 2019 +0200 +++ b/client/src/components/toolbar/Toolbar.vue Tue Apr 16 08:20:37 2019 +0200 @@ -143,7 +143,7 @@ this.polygonTool.setActive(false); this.cutTool.setActive(false); this.$store.commit("map/setCurrentMeasurement", null); - this.$store.dispatch("map/enableIdentifyTool"); + this.$store.commit("map/identifyToolEnabled", true); this.openLayersMap .getLayer("DRAWTOOL") .getSource()
--- a/client/src/store/fairway.js Mon Apr 15 16:58:36 2019 +0200 +++ b/client/src/store/fairway.js Tue Apr 16 08:20:37 2019 +0200 @@ -134,7 +134,7 @@ actions: { clearSelection({ commit, dispatch, rootState, rootGetters }) { dispatch("bottlenecks/setSelectedBottleneck", null, { root: true }); - dispatch("map/enableIdentifyTool", null, { root: true }); + commit("map/identifyToolEnabled", true, { root: true }); commit("clearCurrentProfile"); rootState.map.cutTool.setActive(false); rootGetters["map/openLayersMap"]
--- a/client/src/store/map.js Mon Apr 15 16:58:36 2019 +0200 +++ b/client/src/store/map.js Tue Apr 16 08:20:37 2019 +0200 @@ -18,7 +18,6 @@ import { Stroke, Style, Fill, Circle } from "ol/style"; import { fromLonLat } from "ol/proj"; import { getLength, getArea } from "ol/sphere"; -import { unByKey } from "ol/Observable"; import { getCenter } from "ol/extent"; import { transformExtent } from "ol/proj"; import bbox from "@turf/bbox"; @@ -46,7 +45,7 @@ lon: 1819178, zoom: 11 }, - identifyTool: null, // event binding (singleclick, dblclick) + identifyToolEnabled: true, // event binding (singleclick, dblclick) identifiedFeatures: [], // map features identified by clicking on the map currentMeasurement: null, // distance or area from line-/polygon-/cutTool lineTool: null, // open layers interaction object (Draw) @@ -79,8 +78,8 @@ addOpenLayersMap: (state, map) => { state.openLayersMaps.push(map); }, - identifyTool: (state, events) => { - state.identifyTool = events; + identifyToolEnabled: (state, enabled) => { + state.identifyToolEnabled = enabled; }, setIdentifiedFeatures: (state, identifiedFeatures) => { state.identifiedFeatures = identifiedFeatures; @@ -178,7 +177,7 @@ }); cutTool.setActive(false); cutTool.on("drawstart", () => { - dispatch("disableIdentifyTool"); + commit("identifyToolEnabled", false); cutVectorSrc.clear(); }); cutTool.on("drawend", event => { @@ -187,7 +186,7 @@ // This setTimeout is an ugly workaround. If we would enable the // identifyTool here immediately then the click event from ending the // cut will trigger it. We don't want that. - setTimeout(() => dispatch("enableIdentifyTool"), 1000) + setTimeout(() => commit("identifyToolEnabled", true), 1000) ); }); @@ -200,235 +199,209 @@ commit("cutTool", cutTool); commit("addOpenLayersMap", map); }, - disableIdentifyTool({ state }) { - unByKey(state.identifyTool); - state.identifyTool = null; - }, - enableIdentifyTool({ state, rootState, getters, commit, dispatch }) { - if (!state.identifyTool) { - state.identifyTool = getters.openLayersMap.on( - ["singleclick", "dblclick"], - event => { - commit("setIdentifiedFeatures", []); - // checking our WFS layers - var features = getters.openLayersMap.getFeaturesAtPixel( - event.pixel, - { - hitTolerance: 7 - } - ); - if (features) { - let identifiedFeatures = []; + initIdentifyTool({ state, rootState, commit, dispatch }, map) { + map.on(["singleclick", "dblclick"], event => { + if (!state.identifyToolEnabled) return; + commit("setIdentifiedFeatures", []); + // checking our WFS layers + var features = map.getFeaturesAtPixel(event.pixel, { hitTolerance: 7 }); + if (features) { + let identifiedFeatures = []; - for (let feature of features) { - let id = feature.getId(); - // avoid identifying the same feature twice - if ( - identifiedFeatures.findIndex( - f => f.getId() === feature.getId() - ) === -1 - ) { - identifiedFeatures.push(feature); - } + for (let feature of features) { + let id = feature.getId(); + // avoid identifying the same feature twice + if ( + identifiedFeatures.findIndex( + f => f.getId() === feature.getId() + ) === -1 + ) { + identifiedFeatures.push(feature); + } - // get selected bottleneck - // RegExp.prototype.test() works with number, str and undefined - if (/^bottlenecks/.test(id)) { - if ( - rootState.bottlenecks.selectedBottleneck != - feature.get("objnam") - ) { - dispatch( - "bottlenecks/setSelectedBottleneck", - feature.get("objnam"), - { root: true } - ).then(() => { - this.commit("bottlenecks/setFirstSurveySelected"); - }); - dispatch("moveMap", { - coordinates: getCenter( - feature - .getGeometry() - .clone() - .transform("EPSG:3857", "EPSG:4326") - .getExtent() - ), - zoom: 17, - preventZoomOut: true - }); - } - } + // get selected bottleneck + // RegExp.prototype.test() works with number, str and undefined + if (/^bottlenecks/.test(id)) { + if ( + rootState.bottlenecks.selectedBottleneck != + feature.get("objnam") + ) { + dispatch( + "bottlenecks/setSelectedBottleneck", + feature.get("objnam"), + { root: true } + ).then(() => { + this.commit("bottlenecks/setFirstSurveySelected"); + }); + dispatch("moveMap", { + coordinates: getCenter( + feature + .getGeometry() + .clone() + .transform("EPSG:3857", "EPSG:4326") + .getExtent() + ), + zoom: 17, + preventZoomOut: true + }); + } + } - // get selected gauge - if (/^gauges/.test(id)) { - if ( - rootState.gauges.selectedGaugeISRS !== - feature.get("isrs_code") - ) { - dispatch( - "gauges/selectedGaugeISRS", - feature.get("isrs_code"), - { - root: true - } - ); - dispatch("moveMap", { - coordinates: getCenter( - feature - .getGeometry() - .clone() - .transform("EPSG:3857", "EPSG:4326") - .getExtent() - ), - zoom: null, - preventZoomOut: true - }); - } - } - - // get selected stretch - if (/^stretches/.test(id)) { - if (rootState.imports.selectedStretchId === feature.getId()) { - commit("imports/selectedStretchId", null, { root: true }); - } else { - commit("imports/selectedStretchId", feature.getId(), { - root: true - }); - dispatch("moveMap", { - coordinates: getCenter( - feature - .getGeometry() - .clone() - .transform("EPSG:3857", "EPSG:4326") - .getExtent() - ), - zoom: null, - preventZoomOut: true - }); - } - } + // get selected gauge + if (/^gauges/.test(id)) { + if ( + rootState.gauges.selectedGaugeISRS !== feature.get("isrs_code") + ) { + dispatch("gauges/selectedGaugeISRS", feature.get("isrs_code"), { + root: true + }); + dispatch("moveMap", { + coordinates: getCenter( + feature + .getGeometry() + .clone() + .transform("EPSG:3857", "EPSG:4326") + .getExtent() + ), + zoom: null, + preventZoomOut: true + }); } - - commit("setIdentifiedFeatures", identifiedFeatures); } - // DEBUG output and example how to remove the GeometryName - /* - for (let feature of features) { - console.log("Identified:", feature.getId()); - for (let key of feature.getKeys()) { - if (key != feature.getGeometryName()) { - console.log(key, feature.get(key)); - } + // get selected stretch + if (/^stretches/.test(id)) { + if (rootState.imports.selectedStretchId === feature.getId()) { + commit("imports/selectedStretchId", null, { root: true }); + } else { + commit("imports/selectedStretchId", feature.getId(), { + root: true + }); + dispatch("moveMap", { + coordinates: getCenter( + feature + .getGeometry() + .clone() + .transform("EPSG:3857", "EPSG:4326") + .getExtent() + ), + zoom: null, + preventZoomOut: true + }); + } + } + } + + commit("setIdentifiedFeatures", identifiedFeatures); + } + + // DEBUG output and example how to remove the GeometryName + /* + for (let feature of features) { + console.log("Identified:", feature.getId()); + for (let key of feature.getKeys()) { + if (key != feature.getGeometryName()) { + console.log(key, feature.get(key)); } } - */ + } + */ - var waterwayAxisSource = getters.openLayersMap - .getLayer("WATERWAYAXIS") - .getSource(); - var waxisUrl = waterwayAxisSource.getGetFeatureInfoUrl( - event.coordinate, - 100 /* resolution */, - "EPSG:3857", - // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d - { INFO_FORMAT: "application/json" } - ); + var waterwayAxisSource = map.getLayer("WATERWAYAXIS").getSource(); + var waxisUrl = waterwayAxisSource.getGetFeatureInfoUrl( + event.coordinate, + 100 /* resolution */, + "EPSG:3857", + // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d + { INFO_FORMAT: "application/json" } + ); - if (waxisUrl) { - // cannot directly query here because of SOP - HTTP.get(waxisUrl, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token") - } - }).then(response => { - let features = response.data.features.map(f => { - let feat = new Feature({ - geometry: new Point(f.geometry.coordinates) - }); - feat.setId(f.id); - feat.setProperties(f.properties); - return feat; - }); - commit("addIdentifiedFeatures", features); + if (waxisUrl) { + // cannot directly query here because of SOP + HTTP.get(waxisUrl, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") + } + }).then(response => { + let features = response.data.features.map(f => { + let feat = new Feature({ + geometry: new Point(f.geometry.coordinates) }); - } - var waterwayAreaSource = getters.openLayersMap - .getLayer("WATERWAYAREA") - .getSource(); - var wareaUrl = waterwayAreaSource.getGetFeatureInfoUrl( - event.coordinate, - 100 /* resolution */, - "EPSG:3857", - // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d - { INFO_FORMAT: "application/json" } - ); + feat.setId(f.id); + feat.setProperties(f.properties); + return feat; + }); + commit("addIdentifiedFeatures", features); + }); + } + var waterwayAreaSource = map.getLayer("WATERWAYAREA").getSource(); + var wareaUrl = waterwayAreaSource.getGetFeatureInfoUrl( + event.coordinate, + 100 /* resolution */, + "EPSG:3857", + // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d + { INFO_FORMAT: "application/json" } + ); - if (wareaUrl) { - // cannot directly query here because of SOP - HTTP.get(wareaUrl, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token") - } - }).then(response => { - let features = response.data.features.map(f => { - let feat = new Feature({ - geometry: new Point(f.geometry.coordinates) - }); - feat.setId(f.id); - feat.setProperties(f.properties); - return feat; - }); - commit("addIdentifiedFeatures", features); + if (wareaUrl) { + // cannot directly query here because of SOP + HTTP.get(wareaUrl, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") + } + }).then(response => { + let features = response.data.features.map(f => { + let feat = new Feature({ + geometry: new Point(f.geometry.coordinates) }); - } - var dmaSource = getters.openLayersMap - .getLayer("DISTANCEMARKSAXIS") - .getSource(); - var dmaUrl = dmaSource.getGetFeatureInfoUrl( - event.coordinate, - 100 /* resolution */, - "EPSG:3857", - // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d - { INFO_FORMAT: "application/json" } - ); + feat.setId(f.id); + feat.setProperties(f.properties); + return feat; + }); + commit("addIdentifiedFeatures", features); + }); + } + var dmaSource = map.getLayer("DISTANCEMARKSAXIS").getSource(); + var dmaUrl = dmaSource.getGetFeatureInfoUrl( + event.coordinate, + 100 /* resolution */, + "EPSG:3857", + // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d + { INFO_FORMAT: "application/json" } + ); - if (dmaUrl) { - HTTP.get(dmaUrl, { - headers: { - "X-Gemma-Auth": localStorage.getItem("token") - } - }).then(response => { - let features = response.data.features.map(f => { - let feat = new Feature({ - geometry: new Point(f.geometry.coordinates) - }); - feat.setId(f.id); - feat.setProperties(f.properties); - return feat; - }); - commit("addIdentifiedFeatures", features); - }); + if (dmaUrl) { + HTTP.get(dmaUrl, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") } - // trying the GetFeatureInfo way for WMS - var iecdisSource = getters.openLayersMap - .getLayer("INLANDECDIS") - .getSource(); - var iecdisUrl = iecdisSource.getGetFeatureInfoUrl( - event.coordinate, - 100 /* resolution */, - "EPSG:3857", - // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d - { INFO_FORMAT: "text/plain" } - ); + }).then(response => { + let features = response.data.features.map(f => { + let feat = new Feature({ + geometry: new Point(f.geometry.coordinates) + }); + feat.setId(f.id); + feat.setProperties(f.properties); + return feat; + }); + commit("addIdentifiedFeatures", features); + }); + } + // trying the GetFeatureInfo way for WMS + var iecdisSource = map.getLayer("INLANDECDIS").getSource(); + var iecdisUrl = iecdisSource.getGetFeatureInfoUrl( + event.coordinate, + 100 /* resolution */, + "EPSG:3857", + // { INFO_FORMAT: "application/vnd.ogc.gml" } // not allowed by d4d + { INFO_FORMAT: "text/plain" } + ); - if (iecdisUrl) { - // cannot directly query here because of SOP - console.log("GetFeatureInfo url:", iecdisUrl); - } - } - ); - } + if (iecdisUrl) { + // cannot directly query here because of SOP + console.log("GetFeatureInfo url:", iecdisUrl); + } + }); }, moveToBoundingBox({ getters }, { boundingBox, zoom, preventZoomOut }) { const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");