Mercurial > gemma
changeset 2568:c546e38008de
client: improved gauge layer icon
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 11 Mar 2019 12:05:38 +0100 |
parents | 1cac2e58ef7d |
children | 2d18b8d5b9db |
files | client/src/assets/marker-gauge.png client/src/store/map.js |
diffstat | 2 files changed, 28 insertions(+), 26 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/store/map.js Mon Mar 11 12:02:47 2019 +0100 +++ b/client/src/store/map.js Mon Mar 11 12:05:38 2019 +0100 @@ -20,15 +20,7 @@ import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; import OSM from "ol/source/OSM"; import Draw from "ol/interaction/Draw.js"; -import { - Icon, - Stroke, - Style, - Fill, - Text, - Circle, - RegularShape -} from "ol/style.js"; +import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style.js"; import VectorSource from "ol/source/Vector.js"; import Point from "ol/geom/Point.js"; import { bbox as bboxStrategy } from "ol/loadingstrategy"; @@ -425,25 +417,35 @@ source: new VectorSource({ strategy: bboxStrategy }), - style: function(feature) { - return new Style({ - image: new RegularShape({ - radius: 6, - fill: new Fill({ color: "rgba(255, 255, 0, 0.1)" }), - stroke: new Stroke({ color: "red", width: 1 }), - points: 3, - rotation: 0, - angle: 0 + style: function(feature, resolution, isLegend) { + return [ + new Style({ + image: new Icon({ + src: require("../assets/marker-gauge.png"), + anchor: [0.5, isLegend ? 0.5 : 1], + scale: isLegend ? 0.5 : 1 + }), + text: new Text({ + font: '10px "Open Sans", "sans-serif"', + offsetY: 8, + fill: new Fill({ + color: "white" + }), + text: feature.get("objname") + }) }), - text: new Text({ - font: '10px "Open Sans", "sans-serif"', - offsetY: 10, - fill: new Fill({ - color: "black" - }), - text: feature.get("objname") + new Style({ + text: new Text({ + font: '10px "Open Sans", "sans-serif"', + offsetY: 7, + offsetX: -1, + fill: new Fill({ + color: "black" + }), + text: feature.get("objname") + }) }) - }); + ]; }, maxResolution: 100, minResolution: 0