Mercurial > gemma

annotate client/src/map/store.js @ 733:e57955c1996f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve code structure * Change loading strategy for waterway axis to bbox mainly for consistency. Its size is small compared to other WFS features, so the speed gain is not big by changing to dynamic loading. * Use getLayerByName() instead of hard references. * Refactor section about loading layers to be shorter and to reference the name of each layer only once.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 24 Sep 2018 09:23:09 +0200
parents 22159077b564
children f2691e0d4970
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";
701
8149772c62d6 client: add bbox loading strategy to riverkilometre
Bernhard Reiter <bernhard@intevation.de>
parents: 700
diff changeset
8 import { bbox as bboxStrategy } from "ol/loadingstrategy";
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
9
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 const MapStore = {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
11 namespaced: true,
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
12 state: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
13 layers: [
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
14 {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
15 name: "Open Streetmap",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16 data: new TileLayer({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 source: new OSM()
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 }),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 isVisible: true
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 {
625
4acf60d1bbb4 clients: shorten ECDIS layer name.
Bernhard Reiter <bernhard@intevation.de>
parents: 620
diff changeset
22 name: "Inland ECDIS chart Danube",
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
23 data: new TileLayer({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
24 source: new TileWMS({
700
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
25 preload: 1,
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
26 url: "https://demo.d4d-portal.info/wms",
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 })
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 isVisible: true
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
32 {
716
22159077b564 client: add step to intersect with fairways
Bernhard Reiter <bernhard@intevation.de>
parents: 702
diff changeset
33 name: "Fairway Dimensions",
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
34 data: new VectorLayer({
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
35 source: new VectorSource(),
659
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
36 style: function(feature) {
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
37 return [
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
38 new Style({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
39 stroke: new Stroke({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
40 color: "rgba(0, 0, 255, 1.0)",
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
41 width: 2
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
42 })
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
43 }),
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
44 new Style({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
45 text: new Text({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
46 font: 'bold 12px "Open Sans", "sans-serif"',
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
47 placement: "line",
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
48 fill: new Fill({
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
49 color: "black"
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
50 }),
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
51 text: "LOS: " + feature.get("level_of_service").toString()
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
52 //, zIndex: 10
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 })
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
55 ];
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
56 }
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
57 }),
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
58 isVisible: true
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
59 },
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
60 {
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
61 name: "Waterway Area",
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
62 data: new VectorLayer({
702
aaf5dbfb9512 client: improve loading of WFS features
Bernhard Reiter <bernhard@intevation.de>
parents: 701
diff changeset
63 source: new VectorSource({
aaf5dbfb9512 client: improve loading of WFS features
Bernhard Reiter <bernhard@intevation.de>
parents: 701
diff changeset
64 strategy: bboxStrategy
aaf5dbfb9512 client: improve loading of WFS features
Bernhard Reiter <bernhard@intevation.de>
parents: 701
diff changeset
65 }),
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
66 style: new Style({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
67 stroke: new Stroke({
688
89b497d0ee0f client: change waterway area style to dark green
Bernhard Reiter <bernhard@intevation.de>
parents: 663
diff changeset
68 color: "rgba(0, 102, 0, 1)",
89b497d0ee0f client: change waterway area style to dark green
Bernhard Reiter <bernhard@intevation.de>
parents: 663
diff changeset
69 width: 2
628
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 }),
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
73 isVisible: true
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
74 },
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
75 {
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
76 name: "Waterway Axis",
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
77 data: new VectorLayer({
733
e57955c1996f client: improve code structure
Bernhard Reiter <bernhard@intevation.de>
parents: 716
diff changeset
78 source: new VectorSource({
e57955c1996f client: improve code structure
Bernhard Reiter <bernhard@intevation.de>
parents: 716
diff changeset
79 strategy: bboxStrategy
e57955c1996f client: improve code structure
Bernhard Reiter <bernhard@intevation.de>
parents: 716
diff changeset
80 }),
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
81 style: new Style({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
82 stroke: new Stroke({
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
83 color: "rgba(0, 0, 255, .5)",
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
84 lineDash: [5, 5],
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
85 width: 2
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
86 })
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
87 })
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
88 }),
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
89 isVisible: true
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
90 },
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
91 {
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
92 name: "Distance marks",
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
93 data: new VectorLayer({
702
aaf5dbfb9512 client: improve loading of WFS features
Bernhard Reiter <bernhard@intevation.de>
parents: 701
diff changeset
94 source: new VectorSource({
aaf5dbfb9512 client: improve loading of WFS features
Bernhard Reiter <bernhard@intevation.de>
parents: 701
diff changeset
95 strategy: bboxStrategy
aaf5dbfb9512 client: improve loading of WFS features
Bernhard Reiter <bernhard@intevation.de>
parents: 701
diff changeset
96 })
620
ef00684e021f client: add showing special buoys
Bernhard Reiter <bernhard@intevation.de>
parents: 618
diff changeset
97 }),
628
ef9c733cc6aa client: show more wfs layers
Bernhard Reiter <bernhard@intevation.de>
parents: 625
diff changeset
98 isVisible: false
659
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
99 },
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
100 {
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
101 name: "Distance marks, Axis",
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
102 data: new VectorLayer({
701
8149772c62d6 client: add bbox loading strategy to riverkilometre
Bernhard Reiter <bernhard@intevation.de>
parents: 700
diff changeset
103 source: new VectorSource({
8149772c62d6 client: add bbox loading strategy to riverkilometre
Bernhard Reiter <bernhard@intevation.de>
parents: 700
diff changeset
104 strategy: bboxStrategy
8149772c62d6 client: add bbox loading strategy to riverkilometre
Bernhard Reiter <bernhard@intevation.de>
parents: 700
diff changeset
105 }),
700
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
106 style: function(feature, resolution) {
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
107 if (resolution < 10) {
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
108 var s = new Style({
691
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
109 image: new CircleStyle({
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
110 radius: 5,
700
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
111 fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
112 stroke: new Stroke({ color: "blue", width: 1 })
691
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
113 })
700
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
114 });
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
115 if (resolution < 6) {
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
116 s.setText(
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
117 new Text({
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
118 offsetY: 12,
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
119 font: '10px "Open Sans", "sans-serif"',
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
120 fill: new Fill({
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
121 color: "black"
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
122 }),
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
123 text: (feature.get("hectometre") / 10).toString()
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
124 })
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
125 );
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
126 }
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
127 return s;
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
128 } else {
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
129 return [];
8c3c43595d39 client: make kilometre style resolution depending
Bernhard Reiter <bernhard@intevation.de>
parents: 691
diff changeset
130 }
691
d643ff60f607 Client: improve style of waterway axis.
Bernhard Reiter <bernhard@intevation.de>
parents: 688
diff changeset
131 }
659
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
132 }),
ef658c66cfca schema: disable sfcgal
Bernhard Reiter <bernhard@intevation.de>
parents: 628
diff changeset
133 isVisible: true
585
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
134 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
135 ]
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
136 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
137 getters: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
138 layers: state => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
139 return state.layers;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
140 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
141 },
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
142 mutations: {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
143 toggleVisibility: (state, layer) => {
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
144 state.layers[layer].isVisible = !state.layers[layer].isVisible;
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
145 state.layers[layer].data.setVisible(state.layers[layer].isVisible);
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
146 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
147 }
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
148 };
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
149
ef307bd6b5d8 refac: restructured client application
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
150 export default MapStore;