Basic support for text symbolizers

This adds basic label rendering for points and polygons to the
canvas renderer, and a text symbolizer to the style package.

examples/style-rules.js

@@ -4,13 +4,17 @@ goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.control.defaults');
 goog.require('ol.filter.Filter');
+goog.require('ol.filter.Geometry');
+goog.require('ol.geom.GeometryType');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
 goog.require('ol.proj');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Line');
 goog.require('ol.style.Rule');
+goog.require('ol.style.Shape');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
 var style = new ol.style.Style({rules: [
@@ -42,6 +46,21 @@ var style = new ol.style.Style({rules: [
         opacity: 1
       })
     ]
+  }),
+  new ol.style.Rule({
+    filter: new ol.filter.Geometry(ol.geom.GeometryType.POINT),
+    symbolizers: [
+      new ol.style.Shape({
+        size: 40,
+        fillColor: '#013'
+      }),
+      new ol.style.Text({
+        color: '#bada55',
+        name: new ol.Expression('label'),
+        fontFamily: 'Calibri,sans-serif',
+        fontSize: 14
+      })
+    ]
   })
 ]});
 
@@ -114,6 +133,42 @@ vector.parseFeatures({
       'type': 'LineString',
       'coordinates': [[10000000, -10000000], [-10000000, -10000000]]
     }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'South'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [0, -6000000]
+    }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'West'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [-6000000, 0]
+    }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'North'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [0, 6000000]
+    }
+  }, {
+    'type': 'Feature',
+    'properties': {
+      'label': 'East'
+    },
+    'geometry': {
+      'type': 'Point',
+      'coordinates': [6000000, 0]
+    }
   }]
 }, new ol.parser.GeoJSON(), ol.proj.get('EPSG:3857'));
 

examples/vector-layer.html

@@ -37,7 +37,7 @@
 
         <div class="span4">
           <h4 id="title">Vector layer example</h4>
-          <p id="shortdesc">Example of a countries vector layer with country information on hover.</p>
+          <p id="shortdesc">Example of a countries vector layer with country information on hover and country labels at higher zoom levels.</p>
           <div id="docs">
             <p>See the <a href="vector-layer.js" target="_blank">vector-layer.js source</a> to see how this is done.</p>
           </div>

examples/vector-layer.js

@@ -1,6 +1,8 @@
+goog.require('ol.Expression');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
+goog.require('ol.filter.Filter');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
@@ -10,6 +12,7 @@ goog.require('ol.source.Vector');
 goog.require('ol.style.Polygon');
 goog.require('ol.style.Rule');
 goog.require('ol.style.Style');
+goog.require('ol.style.Text');
 
 
 var raster = new ol.layer.TileLayer({
@@ -27,6 +30,19 @@ var vector = new ol.layer.Vector({
           strokeColor: '#bada55'
         })
       ]
+    }),
+    new ol.style.Rule({
+      filter: new ol.filter.Filter(function() {
+        return map.getView().getResolution() < 5000;
+      }),
+      symbolizers: [
+        new ol.style.Text({
+          color: '#bada55',
+          name: new ol.Expression('name'),
+          fontFamily: 'Calibri,sans-serif',
+          fontSize: 12
+        })
+      ]
     })
   ]}),
   transformFeatureInfo: function(features) {