Mercurial > gemma

annotate client/src/map/store.js @ 691:d643ff60f607

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
1 //import { HTTP } from "../lib/http";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
2
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
3 import TileWMS from "ol/source/TileWMS.js";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
4 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
5 import OSM from "ol/source/OSM";
691
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
6 import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
7 import VectorSource from "ol/source/Vector.js";
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
8
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9 const MapStore = {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 namespaced: true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 state: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 layers: [
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 name: "Open Streetmap",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 data: new TileLayer({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 source: new OSM()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 }),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 isVisible: true
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 {
625
4acf60d1bbb4 clients: shorten ECDIS layer name.
Bernhard Reiter <bernhard@intevation.de>
parents: 620
diff changeset
21 name: "Inland ECDIS chart Danube",
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 data: new TileLayer({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 source: new TileWMS({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 url: "https://demo.d4d-portal.info/wms",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
25 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 })
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 }),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 isVisible: true
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
30 {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 name: "Fairways Dimensions",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 data: new VectorLayer({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
33 source: new VectorSource(),
659
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
34 style: function(feature) {
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
35 return [
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
36 new Style({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
37 stroke: new Stroke({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
38 color: "rgba(0, 0, 255, 1.0)",
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
39 width: 2
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
40 })
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
41 }),
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
42 new Style({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
43 text: new Text({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
44 font: 'bold 12px "Open Sans", "sans-serif"',
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
45 placement: "line",
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
46 fill: new Fill({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
47 color: "black"
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
48 }),
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
49 text: "LOS: " + feature.get("level_of_service").toString()
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
50 //, zIndex: 10
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
51 })
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
52 })
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
53 ];
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
54 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
55 }),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
56 isVisible: true
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
57 },
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
58 {
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
59 name: "Waterway Area",
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
60 data: new VectorLayer({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
61 source: new VectorSource(),
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
62 style: new Style({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
63 stroke: new Stroke({
688
89b497d0ee0f client: change waterway area style to dark green
Bernhard Reiter <bernhard@intevation.de>
parents: 663
diff changeset
64 color: "rgba(0, 102, 0, 1)",
89b497d0ee0f client: change waterway area style to dark green
Bernhard Reiter <bernhard@intevation.de>
parents: 663
diff changeset
65 width: 2
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
66 })
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
67 })
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
68 }),
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
69 isVisible: true
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
70 },
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
71 {
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
72 name: "Waterway Axis",
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
73 data: new VectorLayer({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
74 source: new VectorSource(),
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
75 style: new Style({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
76 stroke: new Stroke({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
77 color: "rgba(0, 0, 255, .5)",
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
78 lineDash: [5, 5],
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
79 width: 2
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
80 })
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
81 })
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
82 }),
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
83 isVisible: true
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
84 },
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
85 {
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
86 name: "Distance marks",
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
87 data: new VectorLayer({
663
db749c02127c Client: slightly improve wfs loading for marks
Bernhard Reiter <bernhard@intevation.de>
parents: 659
diff changeset
88 source: new VectorSource()
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
89 }),
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
90 isVisible: false
659
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
91 },
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
92 {
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
93 name: "Distance marks, Axis",
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
94 data: new VectorLayer({
691
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
95 source: new VectorSource(),
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
96 style: function(feature) {
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
97 return [
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
98 new Style({
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
99 image: new CircleStyle({
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
100 radius: 5,
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
101 fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}),
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
102 stroke: new Stroke({color: 'blue', width: 1})
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
103 }),
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
104 text: new Text({
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
105 font: '10px "Open Sans", "sans-serif"',
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
106 fill: new Fill({
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
107 color: "black"
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
108 }),
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
109 text: (feature.get("hectometre")/10).toString()
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
110 })
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
111 })
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
112 ];
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
113 }
659
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
114 }),
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
115 isVisible: true
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
116 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
117 ]
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
118 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
119 getters: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
120 layers: state => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
121 return state.layers;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
122 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
123 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
124 mutations: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
125 toggleVisibility: (state, layer) => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
126 state.layers[layer].isVisible = !state.layers[layer].isVisible;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
127 state.layers[layer].data.setVisible(state.layers[layer].isVisible);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
128 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
129 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
130 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
131
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
132 export default MapStore;