Mercurial > gemma
changeset 967:2025074ad835
refac: extracted layer configuration to layers
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 17 Oct 2018 15:51:48 +0200 |
parents | 6114c512508b |
children | a4fe07a21ba7 |
files | client/src/layers/layers.js client/src/map/store.js |
diffstat | 2 files changed, 197 insertions(+), 192 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/layers/layers.js Wed Oct 17 15:51:48 2018 +0200 @@ -0,0 +1,195 @@ +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 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 + } +]; + +export { layers };
--- a/client/src/map/store.js Wed Oct 17 15:47:38 2018 +0200 +++ b/client/src/map/store.js Wed Oct 17 15:51:48 2018 +0200 @@ -1,202 +1,12 @@ //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"; +import { layers } from "../layers/layers"; const MapStore = { namespaced: true, 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 - } - ], + layers: layers, // note that some identified features may not have an id // especially related to drawing in our own vector layer identifiedFeatures: [],