Mercurial > gemma
changeset 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 | 3da0ab06d5a0 |
children | 8149772c62d6 |
files | client/src/map/store.js |
diffstat | 1 files changed, 23 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/map/store.js Thu Sep 20 16:14:38 2018 +0200 +++ b/client/src/map/store.js Thu Sep 20 21:50:18 2018 +0200 @@ -21,6 +21,7 @@ name: "Inland ECDIS chart Danube", data: new TileLayer({ source: new TileWMS({ + preload: 1, url: "https://demo.d4d-portal.info/wms", params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } }) @@ -93,23 +94,31 @@ name: "Distance marks, Axis", data: new VectorLayer({ source: new VectorSource(), - style: function(feature) { - return [ - new Style({ + style: function(feature, resolution) { + if (resolution < 10) { + var s = new Style({ image: new CircleStyle({ radius: 5, - fill: new Fill({color: 'rgba(255, 0, 0, 0.1)'}), - stroke: new Stroke({color: 'blue', width: 1}) - }), - text: new Text({ - font: '10px "Open Sans", "sans-serif"', - fill: new Fill({ - color: "black" - }), - text: (feature.get("hectometre")/10).toString() + fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }), + stroke: new Stroke({ color: "blue", width: 1 }) }) - }) - ]; + }); + if (resolution < 6) { + s.setText( + new Text({ + offsetY: 12, + font: '10px "Open Sans", "sans-serif"', + fill: new Fill({ + color: "black" + }), + text: (feature.get("hectometre") / 10).toString() + }) + ); + } + return s; + } else { + return []; + } } }), isVisible: true