Mercurial > gemma
changeset 1099:1f4799bab8a6
deleted layers/layers.js and moved content to map store
This file contained the layer configuration which is only used in the map store (store/map.js) as the layers property.
Therefore I don't see a reason to have a separate file for this.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 02 Nov 2018 08:10:58 +0100 |
parents | b0aec3b1e426 |
children | 2f8596a0d254 |
files | client/src/store/map.js |
diffstat | 1 files changed, 192 insertions(+), 2 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/store/map.js Thu Nov 01 10:19:55 2018 +0100 +++ b/client/src/store/map.js Fri Nov 02 08:10:58 2018 +0100 @@ -15,13 +15,203 @@ //import { HTTP } from "../lib/http"; -import { layers } from "../layers/layers"; +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 MapStore = { namespaced: true, state: { openLayersMap: null, - layers: layers + 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 + } + ] }, getters: { layers: state => {