Mercurial > gemma
changeset 3029:81c2e561fe03
Use distance marks an axis via WMS. Added legend and featureinfo.
author | Raimund Renkert <raimund.renkert@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 12:49:43 +0200 |
parents | 188fb0133e50 |
children | 3524bbc5067e |
files | client/src/assets/distancemarks-axis.png client/src/components/identify/Identify.vue client/src/components/layers/LegendElement.vue client/src/components/map/layers.js client/src/store/map.js |
diffstat | 5 files changed, 95 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/identify/Identify.vue Fri Apr 12 12:29:00 2019 +0200 +++ b/client/src/components/identify/Identify.vue Fri Apr 12 12:49:43 2019 +0200 @@ -164,7 +164,14 @@ }, featureId(feature) { // cut away everything from the last . to the end - return feature.getId().replace(/[.][^.]*$/, ""); + let id = ""; + if (feature.getId) { + id = feature.getId(); + } + if (feature.id) { + id = feature.id; + } + return id.replace(/[.][^.]*$/, ""); }, featureLabel(feature) { if (formatter.hasOwnProperty(this.featureId(feature))) {
--- a/client/src/components/layers/LegendElement.vue Fri Apr 12 12:29:00 2019 +0200 +++ b/client/src/components/layers/LegendElement.vue Fri Apr 12 12:49:43 2019 +0200 @@ -24,6 +24,7 @@ import { Vector as VectorSource } from "ol/source"; import LineString from "ol/geom/LineString"; import Point from "ol/geom/Point"; +import { HTTP } from "@/lib/http"; export default { props: ["layer"], @@ -64,7 +65,32 @@ if (this.layer.getType() == "VECTOR") { this.initMap(); } else { - // TODO other tiles + if (this.layer.get("id") === "OPENSTREETMAP" || + this.layer.get("id") === "INLANDECDIS" || + this.layer.get("id") === "BOTTLENECKISOLINE" || + this.layer.get("id") === "DIFFERENCES" + ) { + // TODO: Do something useful? + return + } + let img = document.createElement("img") + img.setAttribute("style", "margin: 0 auto;display: flex;") + if (this.layer.get("id") === "DISTANCEMARKSAXIS") { + img.setAttribute("src", require("@/assets/distancemarks-axis.png")) + } + else { + // for simple WMS legends. + let url = `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=`+this.layer.getSource().getParams().LAYERS + `&legend_options=columns:4;fontAntiAliasing:true` + HTTP.get(url, { + headers: { + "X-Gemma-Auth": localStorage.getItem("token") + }, + responseType: "blob" + }).then(response => { + img.setAttribute("src", URL.createObjectURL(response.data)); + }); + } + this.$el.appendChild(img); } }, methods: {
--- a/client/src/components/map/layers.js Fri Apr 12 12:29:00 2019 +0200 +++ b/client/src/components/map/layers.js Fri Apr 12 12:49:43 2019 +0200 @@ -1,8 +1,9 @@ import TileWMS from "ol/source/TileWMS"; -import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer"; +import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer } from "ol/layer"; import OSM from "ol/source/OSM"; import { Icon, Stroke, Style } from "ol/style"; import VectorSource from "ol/source/Vector"; +import { ImageWMS as ImageSource } from "ol/source"; import Point from "ol/geom/Point"; import { bbox as bboxStrategy } from "ol/loadingstrategy"; import { WFS, GeoJSON } from "ol/format"; @@ -354,26 +355,24 @@ source }); })(), - (function() { - const source = new VectorSource({ strategy: bboxStrategy }); - source.setLoader( - buildVectorLoader( - { - featureTypes: ["distance_marks_geoserver"], - geometryName: "geom" - }, - source - ) - ); - return new VectorLayer({ - id: "DISTANCEMARKSAXIS", - label: "Distance marks, Axis", - forLegendStyle: { point: true, resolution: 8 }, - visible: true, - style: styles.dma, - source - }); - })(), + new ImageLayer({ + id: "DISTANCEMARKSAXIS", + label: "Distance Marks, Axis", + source: new ImageSource({ + url: window.location.origin + "/api/internal/wms", + params: { LAYERS: "distance_marks_geoserver", 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 Fri Apr 12 12:29:00 2019 +0200 +++ b/client/src/store/map.js Fri Apr 12 12:49:43 2019 +0200 @@ -23,6 +23,9 @@ import { transformExtent } from "ol/proj"; import bbox from "@turf/bbox"; import app from "@/main"; +import { HTTP } from "@/lib/http"; +import Feature from "ol/Feature"; +import Point from "ol/geom/Point"; const moveMap = ({ view, extent, zoom, preventZoomOut }) => { const currentZoom = view.getZoom(); @@ -79,6 +82,10 @@ setIdentifiedFeatures: (state, identifiedFeatures) => { state.identifiedFeatures = identifiedFeatures; }, + addIdentifiedFeatures: (state, identifiedFeatures) => { + state.identifiedFeatures = state.identifiedFeatures.concat(identifiedFeatures); + console.log(state.identifiedFeatures); + }, setCurrentMeasurement: (state, measurement) => { state.currentMeasurement = measurement; }, @@ -332,10 +339,39 @@ */ // trying the GetFeatureInfo way for WMS - var wmsSource = state.openLayersMap + var dmaSource = state.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" } + ); + + 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); + }); + } + // trying the GetFeatureInfo way for WMS + var iecdisSource = state.openLayersMap .getLayer("INLANDECDIS") .getSource(); - var url = wmsSource.getGetFeatureInfoUrl( + var iecdisUrl = iecdisSource.getGetFeatureInfoUrl( event.coordinate, 100 /* resolution */, "EPSG:3857", @@ -343,9 +379,9 @@ { INFO_FORMAT: "text/plain" } ); - if (url) { + if (iecdisUrl) { // cannot directly query here because of SOP - console.log("GetFeatureInfo url:", url); + console.log("GetFeatureInfo url:", iecdisUrl); } } );