Mercurial > gemma
changeset 3047:e0b77d7463e7
Changed Waterway axis and area layer to WMS.
| author | Raimund Renkert <raimund.renkert@intevation.de> |
|---|---|
| date | Mon, 15 Apr 2019 15:15:16 +0200 |
| parents | c764c73f44b4 |
| children | b8b95292d45f |
| files | client/src/components/map/layers.js client/src/store/map.js |
| diffstat | 2 files changed, 96 insertions(+), 54 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/layers.js Mon Apr 15 13:47:12 2019 +0200 +++ b/client/src/components/map/layers.js Mon Apr 15 15:15:16 2019 +0200 @@ -84,30 +84,26 @@ params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } }) }), - (function() { - const source = new VectorSource({ strategy: bboxStrategy }); - source.setLoader( - buildVectorLoader( - { - featureTypes: ["waterway_area"], - geometryName: "area" - }, - source - ) - ); - return new VectorLayer({ - id: "WATERWAYAREA", - label: "Waterway Area", - visible: true, - style: new Style({ - stroke: new Stroke({ - color: "rgba(0, 102, 0, 1)", - width: 2 - }) - }), - source - }); - })(), + new ImageLayer({ + id: "WATERWAYAREA", + label: "Waterway Area", + maxResolution: 100, + minResolution: 0, + source: new ImageSource({ + url: window.location.origin + "/api/internal/wms", + params: { LAYERS: "waterway_area", VERSION: "1.1.1", TILED: true }, + imageLoadFunction: function(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); + }) + }), (function() { const source = new VectorSource({ strategy: bboxStrategy }); source.setLoader( @@ -199,35 +195,24 @@ source }); })(), - (function() { - const source = new VectorSource({ strategy: bboxStrategy }); - source.setLoader( - buildVectorLoader( - { - featureTypes: ["waterway_axis"], - geometryName: "wtwaxs" - }, - source - ) - ); - return new VectorLayer({ - id: "WATERWAYAXIS", - label: "Waterway Axis", - visible: true, - style: new Style({ - stroke: new Stroke({ - color: "rgba(0, 0, 255, .5)", - lineDash: [5, 5], - width: 2 - }) - }), - // TODO: Set layer in layertree active/inactive depending on - // resolution. - maxResolution: 5, - minResolution: 0, - source - }); - })(), + new ImageLayer({ + id: "WATERWAYAXIS", + label: "Waterway Axis", + source: new ImageSource({ + url: window.location.origin + "/api/internal/wms", + params: { LAYERS: "waterway_axis", VERSION: "1.1.1", TILED: true }, + imageLoadFunction: function(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); + }) + }), (function() { const source = new VectorSource({ strategy: bboxStrategy }); source.setLoader(
--- a/client/src/store/map.js Mon Apr 15 13:47:12 2019 +0200 +++ b/client/src/store/map.js Mon Apr 15 15:15:16 2019 +0200 @@ -324,7 +324,64 @@ } */ - // trying the GetFeatureInfo way for WMS + 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" } + ); + + 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); + }); + } + 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" } + ); + + 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); + }); + } var dmaSource = getters.openLayersMap .getLayer("DISTANCEMARKSAXIS") .getSource();