Only create custom style for text we actually render

examples/street-labels.js

@@ -28,7 +28,6 @@ var style = new ol.style.Style({
   renderer: function(coords, context) {
     var feature = context.feature;
     var text = feature.get('name');
-    if (text) {
     // Only create label when geometry has a long and straight segment
     var path = labelSegment(coords, Math.PI / 8, measureText(text));
     if (path) {
@@ -43,7 +42,6 @@ var style = new ol.style.Style({
       labelEngine.ingestLabel(bounds, feature.getId(), 1, letters, text, false);
     }
   }
-  }
 });
 
 var rasterLayer = new ol.layer.Tile({
@@ -70,7 +68,7 @@ fetch('https://overpass-api.de/api/interpreter', {
 var vectorLayer = new ol.layer.Vector({
   source: source,
   style: function(feature) {
-    if (feature.getGeometry().getType() == 'LineString') {
+    if (feature.getGeometry().getType() == 'LineString' && feature.get('text')) {
       return style;
     }
   }

examples/vector-label-decluttering.js

@@ -4,7 +4,6 @@ goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.extent');
 goog.require('ol.format.GeoJSON');
-goog.require('ol.geom.Point');
 goog.require('ol.layer.Vector');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Fill');
@@ -58,9 +57,13 @@ function sortByWidth(a, b) {
   return ol.extent.getWidth(b.getExtent()) - ol.extent.getWidth(a.getExtent());
 }
 
-var resolution; // This is set by the map's precompose listener
+var labelStyle = new ol.style.Style({
-var styles = [
+  renderer: function(coords, state) {
-  new ol.style.Style({
+    var text = state.feature.get('name');
+    createLabel(textCache[text], text, coords);
+  }
+});
+var countryStyle = new ol.style.Style({
   fill: new ol.style.Fill({
     color: 'rgba(255, 255, 255, 0.6)'
   }),
@@ -68,16 +71,29 @@ var styles = [
     color: '#319FD3',
     width: 1
   })
+});
+var styleWithLabel = [countryStyle, labelStyle];
+var styleWithoutLabel = [countryStyle];
+
+var pixelRatio; // This is set by the map's precompose listener
+var vectorLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    url: 'data/geojson/countries.geojson',
+    format: new ol.format.GeoJSON()
   }),
-  new ol.style.Style({
+  style: function(feature, resolution) {
-    renderer: function(coords, state) {
+    var text = feature.get('name');
-      var pixelRatio = state.pixelRatio;
-      var text = state.feature.get('name');
-      var canvas = textCache[text];
-      if (!canvas) {
-        // Draw the label to its own canvas and cache it.
     var width = textMeasureContext.measureText(text).width;
-        canvas = textCache[text] = document.createElement('CANVAS');
+    var geometry = feature.getGeometry();
+    if (geometry.getType() == 'MultiPolygon') {
+      geometry = geometry.getPolygons().sort(sortByWidth)[0];
+    }
+    var extentWidth = ol.extent.getWidth(geometry.getExtent());
+    if (extentWidth / resolution > width) {
+      // Only consider label when it fits its geometry's extent
+      if (!(text in textCache)) {
+        // Draw the label to its own canvas and cache it.
+        var canvas = textCache[text] = document.createElement('CANVAS');
         canvas.width = width * pixelRatio;
         canvas.height = height * pixelRatio;
         var context = canvas.getContext('2d');
@@ -86,38 +102,15 @@ var styles = [
         context.strokeText(text, 0, 0);
         context.fillText(text, 0, 0);
       }
-      // The 3rd value of the coordinate is the measure of the extent width
+      labelStyle.setGeometry(geometry.getInteriorPoint());
-      var extentWidth = state.geometry.getCoordinates()[2] / resolution * pixelRatio;
+      return styleWithLabel;
-      if (extentWidth > canvas.width) {
+    } else {
-        // Only consider labels not wider than their country's bounding box
+      return styleWithoutLabel;
-        createLabel(canvas, text, coord);
     }
-    },
-    // Geometry function to determine label positions
-    geometry: function(feature) {
-      var geometry = feature.getGeometry();
-      if (geometry.getType() == 'MultiPolygon') {
-        var geometries = geometry.getPolygons();
-        geometry = geometries.sort(sortByWidth)[0];
   }
-      var coordinates = geometry.getInteriorPoint().getCoordinates();
-      var extentWidth = ol.extent.getWidth(geometry.getExtent());
-      // We are using the extentWidth as measure value of the geometry
-      coordinates.push(extentWidth);
-      return new ol.geom.Point(coordinates, 'XYM');
-    }
-  })
-];
-
-var vectorLayer = new ol.layer.Vector({
-  source: new ol.source.Vector({
-    url: 'data/geojson/countries.geojson',
-    format: new ol.format.GeoJSON()
-  }),
-  style: styles
 });
 vectorLayer.on('precompose', function(e) {
-  resolution = e.frameState.viewState.resolution;
+  pixelRatio = e.frameState.pixelRatio;
   labelEngine.destroy();
 });
 vectorLayer.on('postcompose', function(e) {