Mercurial > gemma
view client/src/map/store.js @ 935:430d52c2f6ef
client: move layer isolines to be drawn at the top
* Move layer isolones to be drawn last (and thus being "on top")
so that the bottleneck (position) layer will not interfere that much
with the colours. It also allows to set a white background with high
opacity on the bottleneck polygon in order to get highly visible
isolines.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Mon, 08 Oct 2018 17:20:42 +0200 |
parents | f868570da418 |
children | fe923c8ef08f |
line wrap: on
line source
//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"; 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: "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 }, { 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: true } ], // note that some identified features may not have an id // especially related to drawing in our own vector layer identifiedFeatures: [], currentMeasurement: null, selectedMorph: null }, getters: { layers: state => { return state.layers; }, getLayerByName: state => name => { return state.layers.find(layer => layer.name === name); } }, mutations: { toggleVisibility: (state, layer) => { state.layers[layer].isVisible = !state.layers[layer].isVisible; state.layers[layer].data.setVisible(state.layers[layer].isVisible); }, setIdentifiedFeatures: (state, identifiedFeatures) => { state.identifiedFeatures = identifiedFeatures; }, setOpenLayersMap: (state, map) => { state.openLayersMap = map; }, setCurrentMeasurement: (state, measurement) => { state.currentMeasurement = measurement; }, setSelectedMorph: (state, selectedMorph) => { state.selectedMorph = selectedMorph; } } }; export default MapStore;