Mercurial > gemma
comparison client/src/map/store.js @ 700:8c3c43595d39
client: make kilometre style resolution depending
* Add style function that takes the resolution into account
for the distance_marks_geoserver that display the riverkilometre
on the waterway axis. Circle and Text are independently switched
off if the resolution is too large.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Thu, 20 Sep 2018 21:50:18 +0200 |
parents | d643ff60f607 |
children | 8149772c62d6 |
comparison
equal
deleted
inserted
replaced
698:3da0ab06d5a0 | 700:8c3c43595d39 |
---|---|
19 }, | 19 }, |
20 { | 20 { |
21 name: "Inland ECDIS chart Danube", | 21 name: "Inland ECDIS chart Danube", |
22 data: new TileLayer({ | 22 data: new TileLayer({ |
23 source: new TileWMS({ | 23 source: new TileWMS({ |
24 preload: 1, | |
24 url: "https://demo.d4d-portal.info/wms", | 25 url: "https://demo.d4d-portal.info/wms", |
25 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } | 26 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } |
26 }) | 27 }) |
27 }), | 28 }), |
28 isVisible: true | 29 isVisible: true |
91 }, | 92 }, |
92 { | 93 { |
93 name: "Distance marks, Axis", | 94 name: "Distance marks, Axis", |
94 data: new VectorLayer({ | 95 data: new VectorLayer({ |
95 source: new VectorSource(), | 96 source: new VectorSource(), |
96 style: function(feature) { | 97 style: function(feature, resolution) { |
97 return [ | 98 if (resolution < 10) { |
98 new Style({ | 99 var s = new Style({ |
99 image: new CircleStyle({ | 100 image: new CircleStyle({ |
100 radius: 5, | 101 radius: 5, |
101 fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}), | 102 fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }), |
102 stroke: new Stroke({color: 'blue', width: 1}) | 103 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 }) | 104 }) |
111 }) | 105 }); |
112 ]; | 106 if (resolution < 6) { |
107 s.setText( | |
108 new Text({ | |
109 offsetY: 12, | |
110 font: '10px "Open Sans", "sans-serif"', | |
111 fill: new Fill({ | |
112 color: "black" | |
113 }), | |
114 text: (feature.get("hectometre") / 10).toString() | |
115 }) | |
116 ); | |
117 } | |
118 return s; | |
119 } else { | |
120 return []; | |
121 } | |
113 } | 122 } |
114 }), | 123 }), |
115 isVisible: true | 124 isVisible: true |
116 } | 125 } |
117 ] | 126 ] |