Mercurial > gemma
comparison client/src/map/store.js @ 691:d643ff60f607
Client: improve style of waterway axis.
* Add label and circle style to waterway axis via WFS.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 20 Sep 2018 14:33:34 +0200 |
parents | 89b497d0ee0f |
children | 8c3c43595d39 |
comparison
equal
deleted
inserted
replaced
690:f595b3455d75 | 691:d643ff60f607 |
---|---|
1 //import { HTTP } from "../lib/http"; | 1 //import { HTTP } from "../lib/http"; |
2 | 2 |
3 import TileWMS from "ol/source/TileWMS.js"; | 3 import TileWMS from "ol/source/TileWMS.js"; |
4 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; | 4 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; |
5 import OSM from "ol/source/OSM"; | 5 import OSM from "ol/source/OSM"; |
6 import { Stroke, Style, Fill, Text } from "ol/style.js"; | 6 import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js"; |
7 import VectorSource from "ol/source/Vector.js"; | 7 import VectorSource from "ol/source/Vector.js"; |
8 | 8 |
9 const MapStore = { | 9 const MapStore = { |
10 namespaced: true, | 10 namespaced: true, |
11 state: { | 11 state: { |
90 isVisible: false | 90 isVisible: false |
91 }, | 91 }, |
92 { | 92 { |
93 name: "Distance marks, Axis", | 93 name: "Distance marks, Axis", |
94 data: new VectorLayer({ | 94 data: new VectorLayer({ |
95 source: new VectorSource() | 95 source: new VectorSource(), |
96 style: function(feature) { | |
97 return [ | |
98 new Style({ | |
99 image: new CircleStyle({ | |
100 radius: 5, | |
101 fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}), | |
102 stroke: new Stroke({color: 'blue', width: 1}) | |
103 }), | |
104 text: new Text({ | |
105 font: '10px "Open Sans", "sans-serif"', | |
106 fill: new Fill({ | |
107 color: "black" | |
108 }), | |
109 text: (feature.get("hectometre")/10).toString() | |
110 }) | |
111 }) | |
112 ]; | |
113 } | |
96 }), | 114 }), |
97 isVisible: true | 115 isVisible: true |
98 } | 116 } |
99 ] | 117 ] |
100 }, | 118 }, |