Merge pull request #9362 from KaiVolland/text-rendering

Use local font "Ubuntu Regular" for rendering tests

rendering/cases/layer-vector-decluttering/main.js

@@ -90,7 +90,7 @@ layer2.setStyle(function(feature) {
   return new Style({
     text: new Text({
       text: feature.get('text'),
-      font: '12px sans-serif'
+      font: '16px Ubuntu'
     })
   });
 });
@@ -119,7 +119,7 @@ layer3.setStyle(function(feature) {
     }),
     text: new Text({
       text: feature.get('text'),
-      font: '12px sans-serif',
+      font: '16px Ubuntu',
       textBaseline: 'bottom',
       offsetY: -5
     })
@@ -151,7 +151,8 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: '12px sans-serif'
+    font: '16px Ubuntu',
+    overflow: true
   })
 }));
 source4.addFeature(point);

rendering/cases/layer-vectorimage-decluttering/main.js

@@ -0,0 +1,79 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Point from '../../../src/ol/geom/Point.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import Text from '../../../src/ol/style/Text.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+  source: source,
+  style: function(feature) {
+    return new Style({
+      image: new CircleStyle({
+        radius: 15,
+        stroke: new Stroke({
+          color: 'blue'
+        })
+      }),
+      text: new Text({
+        text: feature.get('text'),
+        font: '16px Ubuntu'
+      })
+    });
+  }
+});
+
+const centerFeature = new Feature({
+  geometry: new Point(center),
+  text: 'center'
+});
+source.addFeature(centerFeature);
+source.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east'
+}));
+
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: '16px Ubuntu'
+  })
+}));
+source.addFeature(line);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    vectorLayer1
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().fit(source.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style-linestring-nice/main.js

@@ -23,6 +23,7 @@ feature1.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Hello world',
+    font: '10px Ubuntu',
     placement: 'line'
   })
 }));
@@ -35,11 +36,11 @@ feature2.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Scale 2',
+    font: 'normal 400 12px/1 Ubuntu',
     scale: 2,
     textBaseline: 'bottom',
     textAlign: 'right',
-    placement: 'line',
-    font: 'bold italic 0.8em serif'
+    placement: 'line'
   })
 }));
 vectorSource.addFeature(feature2);
@@ -50,10 +51,10 @@ const feature3 = new Feature({geometry: lineString3});
 feature3.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
+    font: 'italic bold 0.75em Ubuntu',
     text: 'Set properties'
   })
 }));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
 feature3.getStyle().getText().setTextAlign('left');
 feature3.getStyle().getText().setOffsetX(10);
 feature3.getStyle().getText().setOffsetY(-10);
@@ -71,6 +72,7 @@ feature4.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'negative offsetX',
+    font: 'normal 400 10px/1 Ubuntu',
     offsetX: -10,
     textAlign: 'start',
     textBaseline: 'top',
@@ -86,6 +88,7 @@ feature5.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Small text',
+    font: '10px Ubuntu',
     offsetY: 5,
     scale: 0.7,
     textAlign: 'end',
@@ -101,6 +104,7 @@ feature6.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'FILL AND STROKE',
+    font: '10px Ubuntu',
     placement: 'line',
     fill: new Fill({color: '#FFC0CB'}),
     stroke: new Stroke({

rendering/cases/text-style-linestring-ugly/main.js

@@ -20,6 +20,7 @@ feature1.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Hello world',
+    font: '10px Ubuntu',
     placement: 'line',
     overflow: true
   })
@@ -37,7 +38,7 @@ feature2.setStyle(new Style({
     textBaseline: 'bottom',
     textAlign: 'right',
     placement: 'line',
-    font: 'bold italic 0.8em serif',
+    font: 'italic bold 0.5em Ubuntu',
     overflow: true
   })
 }));
@@ -52,7 +53,6 @@ feature3.setStyle(new Style({
     text: 'Set properties'
   })
 }));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
 feature3.getStyle().getText().setTextAlign('left');
 feature3.getStyle().getText().setOffsetX(10);
 feature3.getStyle().getText().setOffsetY(-10);
@@ -72,6 +72,7 @@ feature4.setStyle(new Style({
   stroke: new Stroke({color: 'red'}),
   text: new Text({
     text: 'PLEASE OMIT ME IM UGLY',
+    font: '10px Ubuntu',
     offsetX: -10,
     textAlign: 'start',
     textBaseline: 'top',
@@ -88,6 +89,7 @@ feature5.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Small text',
+    font: '10px Ubuntu',
     offsetY: 5,
     scale: 0.7,
     rotation: 4,
@@ -106,6 +108,7 @@ feature6.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'FILL AND STROKE',
+    font: '10px Ubuntu',
     placement: 'line',
     overflow: true,
     fill: new Fill({color: '#FFC0CB'}),

rendering/cases/text-style-overlap/main.js

@@ -19,6 +19,7 @@ const vectorSource = new VectorSource();
 const pointStyle = new Style({
   text: new Text({
     text: 'Point Label',
+    font: 'Ubuntu',
     fill: new Fill({
       color: 'red'
     }),
@@ -31,6 +32,7 @@ const lineStyle = new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Line Label',
+    font: 'Ubuntu',
     fill: new Fill({
       color: 'red'
     }),

rendering/cases/text-style/main.js

@@ -20,7 +20,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     scale: 2,
     fill: new Fill({
       color: 'red'
@@ -39,7 +39,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'upside down',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     rotation: Math.PI,
     stroke: new Stroke({
       color: 'red',
@@ -55,6 +55,7 @@ feature = new Feature({
 });
 feature.setStyle(new Style({
   text: new Text({
+    font: 'Ubuntu',
     text: 'rotateWithView',
     rotateWithView: true,
     stroke: new Stroke({
@@ -71,7 +72,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'
@@ -91,7 +92,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'

rendering/default/index.html

@@ -16,6 +16,20 @@
       .ol-control {
         display: none;
       }
+      @font-face {
+        font-family: "Ubuntu";
+        src: url("/data/fonts/ubuntu-regular-webfont.eot");
+        src: url("/data/fonts/ubuntu-regular-webfont.woff") format("woff"),
+          url("/data/fonts/ubuntu-regular-webfont.svg#filename") format("svg");
+      }
+      @font-face {
+        font-family: "Ubuntu";
+        font-weight: bold;
+        font-style: italic;
+        src: url("/data/fonts/ubuntu-bold-italic-webfont.eot");
+        src: url("/data/fonts/ubuntu-bold-italic-webfont.woff") format("woff"),
+          url("/data/fonts/ubuntu-bold-italic-webfont.svg#filename") format("svg");
+      }
     </style>
   </head>
   <body>

rendering/test.js

@@ -313,6 +313,7 @@ if (require.main === module) {
   const options = yargs.
     option('fix', {
       describe: 'Accept all screenshots as accepted',
+      type: 'boolean',
       default: false
     }).
     option('host', {