Mercurial > gemma
view client/src/map/store.js @ 836:0b994949a4a0
client: make Morphtool selection more robust
* Check if the selected features we are testing has an id before
operating on it.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 28 Sep 2018 10:17:11 +0200 |
parents | 90a601884ff2 |
children | ee6f127f573c |
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"; 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 } ], // 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;