Mercurial > gemma
view client/src/map/store.js @ 793:073394629ec6
client: add measurement and improve identify
* Only display features that have an Id in the identify box, because
during the drawmode, after the first click, there is an additional
feature that has no Id. Probably this is the point.
* Add setting an Id to the feature that is drawn, which makes it show
up in the identify box.
* Add code to add the length of the drawn line to the store and a rounded
value to the feature property. This creates a simple measurement tool,
if the feature box is shown.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 27 Sep 2018 10:02:39 +0200 |
parents | 1b82ae5e637e |
children | 21609ba97357 |
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", data: new VectorLayer({ source: new VectorSource({ strategy: bboxStrategy }) }), isVisible: false }, { name: "Distance marks, Axis", 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 } ], identifiedFeatures: [], currentMeasurement: 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; } } }; export default MapStore;