comparison client/src/store/map.js @ 2526:6498267096ae

client: critical bottlenecks: use png instead of vectors for marker The positioning of text is not always precise. The exclamation mark in the warning sign for critical bottlenecks was not always perfectly centered. Using a png image is more reliable.
author Markus Kottlaender <markus@intevation.de>
date Wed, 06 Mar 2019 15:39:59 +0100
parents 8416cf343f17
children c546e38008de
comparison
equal deleted inserted replaced
2525:8416cf343f17 2526:6498267096ae
344 if ((feature.get("fa_critical") && resolution > 15) || isLegend) { 344 if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
345 let bnCenter = getCenter(feature.getGeometry().getExtent()); 345 let bnCenter = getCenter(feature.getGeometry().getExtent());
346 styles.push( 346 styles.push(
347 new Style({ 347 new Style({
348 geometry: new Point(bnCenter), 348 geometry: new Point(bnCenter),
349 image: new RegularShape({ 349 image: new Icon({
350 points: 3, 350 src: require("../assets/marker-bottleneck-critical.png"),
351 radius: isLegend ? 9 : 13, 351 anchor: [0.5, 0.5],
352 fill: new Fill({ color: "white" }), 352 scale: isLegend ? 0.5 : 1
353 stroke: new Stroke({
354 color: "rgba(255, 0, 0, 0.8)",
355 width: isLegend ? 2 : 3
356 })
357 }),
358 text: new Text({
359 font:
360 "bold " +
361 (isLegend ? 8 : 12) +
362 'px "Open Sans", "sans-serif"',
363 placement: "point",
364 fill: new Fill({ color: "black" }),
365 text: "!",
366 offsetY: isLegend ? 0 : 1,
367 offsetX: isLegend ? 1 : 0
368 }) 353 })
369 }) 354 })
370 ); 355 );
371 } 356 }
372 if (feature.get("fa_critical") && !isLegend) { 357 if (feature.get("fa_critical") && !isLegend) {