Add Z-index to layers

This commit allows setting a z-index property on the layers and uses
it in the canvas, WEBGL and DOM map renderers for ordering the layers
before rendering.

Default z-index is 0 for managed layers and 1000 for unmanaged ones.
It allows always on bottom, always on top and more complex layer layouts.

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

@@ -66,6 +66,7 @@ describe('ol.layer.Layer', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: Infinity,
         minResolution: 0
       });
@@ -86,6 +87,7 @@ describe('ol.layer.Layer', function() {
         opacity: 0.5,
         saturation: 5,
         visible: false,
+        zIndex: 10,
         maxResolution: 500,
         minResolution: 0.25,
         foo: 42
@@ -111,6 +113,7 @@ describe('ol.layer.Layer', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 10,
         maxResolution: 500,
         minResolution: 0.25
       });
@@ -194,6 +197,7 @@ describe('ol.layer.Layer', function() {
       layer.setVisible(false);
       layer.setMaxResolution(500);
       layer.setMinResolution(0.25);
+      layer.setZIndex(10);
       expect(layer.getLayerState()).to.eql({
         layer: layer,
         brightness: -0.7,
@@ -205,6 +209,7 @@ describe('ol.layer.Layer', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 10,
         maxResolution: 500,
         minResolution: 0.25
       });
@@ -228,6 +233,7 @@ describe('ol.layer.Layer', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: Infinity,
         minResolution: 0
       });
@@ -249,6 +255,7 @@ describe('ol.layer.Layer', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: Infinity,
         minResolution: 0
       });

test/spec/ol/layer/layergroup.test.js

@@ -54,6 +54,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: Infinity,
         minResolution: 0
       });
@@ -160,6 +161,7 @@ describe('ol.layer.Group', function() {
         opacity: 0.5,
         saturation: 5,
         visible: false,
+        zIndex: 10,
         maxResolution: 500,
         minResolution: 0.25
       });
@@ -183,6 +185,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 10,
         maxResolution: 500,
         minResolution: 0.25
       });
@@ -235,6 +238,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: groupExtent,
+        zIndex: 0,
         maxResolution: 500,
         minResolution: 0.25
       });
@@ -266,6 +270,7 @@ describe('ol.layer.Group', function() {
       layerGroup.setOpacity(0.3);
       layerGroup.setSaturation(0.3);
       layerGroup.setVisible(false);
+      layerGroup.setZIndex(10);
       var groupExtent = [-100, 50, 100, 50];
       layerGroup.setExtent(groupExtent);
       layerGroup.setMaxResolution(500);
@@ -281,6 +286,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: groupExtent,
+        zIndex: 10,
         maxResolution: 500,
         minResolution: 0.25
       });
@@ -304,6 +310,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: Infinity,
         minResolution: 0
       });
@@ -325,6 +332,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: Infinity,
         minResolution: 0
       });
@@ -500,6 +508,7 @@ describe('ol.layer.Group', function() {
         managed: true,
         sourceState: ol.source.State.READY,
         extent: undefined,
+        zIndex: 0,
         maxResolution: 150,
         minResolution: 0.25
       });