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 ]