OpenLayers 3 – Setting Layer Visibility

openlayers

I'm trying to upgrade my Openlayers 2.12 map to Openlayers 3 to take advantage of the fantastic transition effects on transparent layers (Something OL2 and Leaflet can't do attractively). This and I don't want to lag behind upgrading my sites when OL3 is officially released.
In my current site (OL2.12) I use check boxes in a simple HTML menu to toggle layer visibility. I push each layer to an array (I hope I'm right in thinking OL3 now automatically generates an array for the layers called 'layers') and each checkbox calls this function (checkboxes are given a value that is representative of their layers array number):

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

In OL3 this no longer works, and I can't find any examples or documentation that details how to set layer visibility.

Best Answer

Aragon, your answer pointed me in the right direction. Below is my final unclean code for adding layers to an array and then controling them.

In a javascript file I initialized the map and used a function to toggle visibility as follows:

//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);
}

In the HTML I used simple checkboxes (example of poly1 toggle):

<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>
Related Question