Mercurial > gemma

comparison client/src/store/map.js @ 2568:c546e38008de

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improved gauge layer icon
author Markus Kottlaender <markus@intevation.de>
date Mon, 11 Mar 2019 12:05:38 +0100
parents 6498267096ae
children 1686ec185155
comparison
equal deleted inserted replaced
2567:1cac2e58ef7d 2568:c546e38008de
18 18
19 import TileWMS from "ol/source/TileWMS.js"; 19 import TileWMS from "ol/source/TileWMS.js";
20 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; 20 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
21 import OSM from "ol/source/OSM"; 21 import OSM from "ol/source/OSM";
22 import Draw from "ol/interaction/Draw.js"; 22 import Draw from "ol/interaction/Draw.js";
23 import { 23 import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style.js";
24 Icon,
25 Stroke,
26 Style,
27 Fill,
28 Text,
29 Circle,
30 RegularShape
31 } from "ol/style.js";
32 import VectorSource from "ol/source/Vector.js"; 24 import VectorSource from "ol/source/Vector.js";
33 import Point from "ol/geom/Point.js"; 25 import Point from "ol/geom/Point.js";
34 import { bbox as bboxStrategy } from "ol/loadingstrategy"; 26 import { bbox as bboxStrategy } from "ol/loadingstrategy";
35 import { HTTP } from "../lib/http"; 27 import { HTTP } from "../lib/http";
36 import { fromLonLat } from "ol/proj"; 28 import { fromLonLat } from "ol/proj";
423 forLegendStyle: { point: true, resolution: 8 }, 415 forLegendStyle: { point: true, resolution: 8 },
424 data: new VectorLayer({ 416 data: new VectorLayer({
425 source: new VectorSource({ 417 source: new VectorSource({
426 strategy: bboxStrategy 418 strategy: bboxStrategy
427 }), 419 }),
428 style: function(feature) { 420 style: function(feature, resolution, isLegend) {
429 return new Style({ 421 return [
430 image: new RegularShape({ 422 new Style({
431 radius: 6, 423 image: new Icon({
432 fill: new Fill({ color: "rgba(255, 255, 0, 0.1)" }), 424 src: require("../assets/marker-gauge.png"),
433 stroke: new Stroke({ color: "red", width: 1 }), 425 anchor: [0.5, isLegend ? 0.5 : 1],
434 points: 3, 426 scale: isLegend ? 0.5 : 1
435 rotation: 0, 427 }),
436 angle: 0 428 text: new Text({
429 font: '10px "Open Sans", "sans-serif"',
430 offsetY: 8,
431 fill: new Fill({
432 color: "white"
433 }),
434 text: feature.get("objname")
435 })
437 }), 436 }),
438 text: new Text({ 437 new Style({
439 font: '10px "Open Sans", "sans-serif"', 438 text: new Text({
440 offsetY: 10, 439 font: '10px "Open Sans", "sans-serif"',
441 fill: new Fill({ 440 offsetY: 7,
442 color: "black" 441 offsetX: -1,
443 }), 442 fill: new Fill({
444 text: feature.get("objname") 443 color: "black"
444 }),
445 text: feature.get("objname")
446 })
445 }) 447 })
446 }); 448 ];
447 }, 449 },
448 maxResolution: 100, 450 maxResolution: 100,
449 minResolution: 0 451 minResolution: 0
450 }), 452 }),
451 isVisible: true, 453 isVisible: true,