Merge pull request #1091 from ahocevar/render-zindex

Sort symbolizer groups by zIndex

examples/style-rules.js

@@ -22,7 +22,8 @@ var style = new ol.style.Style({rules: [
       new ol.style.Stroke({
         color: ol.expr.parse('color'),
         width: 4,
-        opacity: 1
+        opacity: 1,
+        zIndex: 1
       })
     ]
   }),

src/ol/layer/vectorlayer.js

@@ -320,6 +320,7 @@ ol.layer.Vector.prototype.groupFeaturesBySymbolizerLiteral =
       }
     }
   }
+  featuresBySymbolizer.sort(this.sortByZIndex_);
   return featuresBySymbolizer;
 };
 
@@ -454,6 +455,18 @@ ol.layer.Vector.prototype.setTemporary = function(temp) {
 };
 
 
+/**
+ * Sort function for `groupFeaturesBySymbolizerLiteral`.
+ * @private
+ * @param {Array} a 1st item for the sort comparison.
+ * @param {Array} b 2nd item for the sort comparison.
+ * @return {number} Comparison result.
+ */
+ol.layer.Vector.prototype.sortByZIndex_ = function(a, b) {
+  return a[1].zIndex - b[1].zIndex;
+};
+
+
 /**
  * @param {Array.<ol.Feature>} features Features.
  * @return {string} Feature info.

test/spec/ol/layer/vectorlayer.test.js

@@ -115,6 +115,34 @@ describe('ol.layer.Vector', function() {
 
     });
 
+    it('sorts groups by zIndex', function() {
+      var symbolizer = new ol.style.Stroke({
+        width: 3,
+        color: '#BADA55',
+        opacity: 1,
+        zIndex: 1
+      });
+      var anotherSymbolizer = new ol.style.Stroke({
+        width: 3,
+        color: '#BADA55',
+        opacity: 1
+      });
+      var featureWithSymbolizers = new ol.Feature({
+        g: new ol.geom.LineString([[-10, -10], [-10, 10]])
+      });
+      featureWithSymbolizers.setSymbolizers([symbolizer]);
+      var anotherFeatureWithSymbolizers = new ol.Feature({
+        g: new ol.geom.LineString([[-10, 10], [-10, -10]])
+      });
+      anotherFeatureWithSymbolizers.setSymbolizers([anotherSymbolizer]);
+      features = [featureWithSymbolizers, anotherFeatureWithSymbolizers];
+
+      var groups = layer.groupFeaturesBySymbolizerLiteral(features, 1);
+      expect(groups).to.have.length(2);
+      expect(groups[0][1].zIndex).to.be(0);
+      expect(groups[1][1].zIndex).to.be(1);
+    });
+
     goog.dispose(layer);
 
   });