Définition de la visibilité d'OpenLayers 3 couches

J'essaie de mettre à niveau ma carte Openlayers 2.12 vers Openlayers 3 pour profiter des effets de transition fantastiques sur les couches transparentes (quelque chose d'OL2 et de Leaflet ne peuvent pas faire de manière attrayante). Cela et je ne veux pas prendre de retard sur la mise à niveau de mes sites lorsque OL3 sera officiellement publié. Dans mon site actuel (OL2.12), j'utilise des cases à cocher dans un simple menu HTML pour basculer la visibilité des couches. Je pousse chaque couche dans un tableau (j'espère avoir raison en pensant que OL3 génère maintenant automatiquement un tableau pour les couches appelées `` couches '') et chaque case à cocher appelle cette fonction (les cases à cocher reçoivent une valeur qui est représentative de leur numéro de tableau de couches ):

function layerswitch(evt){
    layers[evt.value].setVisibility(evt.checked);
}

Dans OL3, cela ne fonctionne plus, et je ne trouve aucun exemple ou documentation qui détaille comment définir la visibilité des couches.

vous pouvez trouver plus d'informations ici dans la section des propriétés.

visible     boolean | undefined     Visibility. Default is true (visible).

et exemple en direct dans l'exemple de groupe de calques .

Aragon, votre réponse m'a orienté dans la bonne direction. Ci-dessous se trouve mon dernier code impur pour ajouter des couches à un tableau puis les contrôler.

Dans un fichier javascript, j'ai initialisé la carte et utilisé une fonction pour basculer la visibilité comme suit:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

Dans le HTML, j'ai utilisé des cases à cocher simples (exemple de bascule poly1):

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

Vous trouverez ci-dessous un lien vers un module complémentaire d'OpenLayers 3, avec un commutateur de calque de style ol2.

https://github.com/walkermatt/ol3-layerswitcher