Mercurial > gemma
diff client/src/map/store.js @ 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 | a22f66acfd96 |
children | 3da707172772 |
line wrap: on
line diff
--- 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: [],