Merge pull request #912 from tschaub/seperate-fill-stroke

Separate fill and stroke symbolizers.  Allow styles with no rules (and also support "else" symbolizers).

examples/getfeatureinfo.js

@@ -6,8 +6,7 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
 goog.require('ol.source.TiledWMS');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
-goog.require('ol.style.Rule');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
@@ -23,15 +22,14 @@ var vector = new ol.layer.Vector({
     parser: new ol.parser.GeoJSON(),
     url: 'data/countries.geojson'
   }),
-  style: new ol.style.Style({rules: [
-    new ol.style.Rule({
-      symbolizers: [
-        new ol.style.Polygon({
-          strokeColor: '#bada55'
-        })
-      ]
-    })
-  ]}),
+  style: new ol.style.Style({
+    symbolizers: [
+      new ol.style.Stroke({
+        color: '#33cc66',
+        width: 2
+      })
+    ]
+  }),
   transformFeatureInfo: function(features) {
     return features.length > 0 ?
         features[0].getFeatureId() + ': ' + features[0].get('name') : ' ';

examples/gml.js

@@ -6,8 +6,8 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.ogc.GML_v3');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
-goog.require('ol.style.Rule');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 var raster = new ol.layer.TileLayer({
@@ -19,15 +19,17 @@ var vector = new ol.layer.Vector({
     parser: new ol.parser.ogc.GML_v3(),
     url: 'data/gml/topp-states-wfs.xml'
   }),
-  style: new ol.style.Style({rules: [
-    new ol.style.Rule({
-      symbolizers: [
-        new ol.style.Polygon({
-          strokeColor: '#bada55'
-        })
-      ]
-    })
-  ]})
+  style: new ol.style.Style({
+    symbolizers: [
+      new ol.style.Fill({
+        color: '#ffffff',
+        opacity: 0.25
+      }),
+      new ol.style.Stroke({
+        color: '#6666ff'
+      })
+    ]
+  })
 });
 
 var map = new ol.Map({
@@ -35,7 +37,7 @@ var map = new ol.Map({
   renderer: ol.RendererHint.CANVAS,
   target: 'map',
   view: new ol.View2D({
-    center: [-10997171.194994785, 5206335.565590534],
+    center: [-10997171, 4658434],
     zoom: 4
   })
 });

examples/kml-timezones.js

@@ -7,8 +7,8 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.KML');
 goog.require('ol.source.Stamen');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
-goog.require('ol.style.Rule');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
@@ -40,17 +40,17 @@ ol.expr.register('getOpacity', function() {
   return 0.75 * (1 - delta / 12);
 });
 
-var style = new ol.style.Style({rules: [
-  new ol.style.Rule({
-    symbolizers: [
-      new ol.style.Polygon({
-        strokeColor: '#ffffff',
-        fillColor: '#ffff33',
-        fillOpacity: ol.expr.parse('getOpacity()')
-      })
-    ]
-  })
-]});
+var style = new ol.style.Style({
+  symbolizers: [
+    new ol.style.Fill({
+      color: '#ffff33',
+      opacity: ol.expr.parse('getOpacity()')
+    }),
+    new ol.style.Stroke({
+      color: '#ffffff'
+    })
+  ]
+});
 
 var vector = new ol.layer.Vector({
   source: new ol.source.Vector({

examples/style-rules.js

@@ -7,9 +7,10 @@ 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.Fill');
 goog.require('ol.style.Rule');
 goog.require('ol.style.Shape');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
@@ -18,25 +19,25 @@ var style = new ol.style.Style({rules: [
   new ol.style.Rule({
     filter: 'where == "outer"',
     symbolizers: [
-      new ol.style.Line({
-        strokeColor: ol.expr.parse('color'),
-        strokeWidth: 4,
-        strokeOpacity: 1
+      new ol.style.Stroke({
+        color: ol.expr.parse('color'),
+        width: 4,
+        opacity: 1
       })
     ]
   }),
   new ol.style.Rule({
     filter: 'where == "inner"',
     symbolizers: [
-      new ol.style.Line({
-        strokeColor: '#013',
-        strokeWidth: 4,
-        strokeOpacity: 1
+      new ol.style.Stroke({
+        color: '#013',
+        width: 4,
+        opacity: 1
       }),
-      new ol.style.Line({
-        strokeColor: ol.expr.parse('color'),
-        strokeWidth: 2,
-        strokeOpacity: 1
+      new ol.style.Stroke({
+        color: ol.expr.parse('color'),
+        width: 2,
+        opacity: 1
       })
     ]
   }),
@@ -45,7 +46,7 @@ var style = new ol.style.Style({rules: [
     symbolizers: [
       new ol.style.Shape({
         size: 40,
-        fillColor: '#013'
+        fill: new ol.style.Fill({color: '#013'})
       }),
       new ol.style.Text({
         color: '#bada55',

examples/topojson.js

@@ -6,8 +6,8 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.TopoJSON');
 goog.require('ol.source.TileJSON');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
-goog.require('ol.style.Rule');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
@@ -22,19 +22,19 @@ var vector = new ol.layer.Vector({
     url: 'data/topojson/world-110m.json',
     parser: new ol.parser.TopoJSON()
   }),
-  style: new ol.style.Style({rules: [
-    new ol.style.Rule({
-      symbolizers: [
-        new ol.style.Polygon({
-          fillColor: '#BADA55',
-          fillOpacity: 0.5,
-          strokeColor: '#FFF',
-          strokeOpacity: 1,
-          strokeWidth: 1.5
-        })
-      ]
-    })
-  ]})
+  style: new ol.style.Style({
+    symbolizers: [
+      new ol.style.Fill({
+        color: '#BADA55',
+        opacity: 0.5
+      }),
+      new ol.style.Stroke({
+        color: '#FFF',
+        opacity: 1,
+        width: 1.5
+      })
+    ]
+  })
 });
 
 var map = new ol.Map({

examples/vector-layer.js

@@ -7,8 +7,9 @@ goog.require('ol.layer.Vector');
 goog.require('ol.parser.GeoJSON');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.Vector');
-goog.require('ol.style.Polygon');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Rule');
+goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
@@ -30,11 +31,13 @@ var vector = new ol.layer.Vector({
   style: new ol.style.Style({rules: [
     new ol.style.Rule({
       symbolizers: [
-        new ol.style.Polygon({
-          strokeColor: '#319FD3',
-          strokeOpacity: 1,
-          fillColor: '#ffffff',
-          fillOpacity: 0.6
+        new ol.style.Fill({
+          color: '#ffffff',
+          opacity: 0.6
+        }),
+        new ol.style.Stroke({
+          color: '#319FD3',
+          opacity: 1
         })
       ]
     }),