设置OpenLayers 3层可见性

我正在尝试将我的Openlayers 2.12映射升级到Openlayers 3，以利用透明层上奇妙的过渡效果（有些OL2和Leaflet无法吸引人）。当OL3正式发布时，我也不想落后于升级我的网站。在当前站点（OL2.12）中，我使用简单HTML菜单中的复选框来切换图层可见性。我将每个图层推到一个数组（我希望我认为OL3现在会自动为称为“图层”的图层生成一个数组），并且每个复选框都调用此函数（为复选框提供了代表其图层数组编号的值）：

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

在OL3中，这不再起作用，并且我找不到任何详细说明如何设置图层可见性的示例或文档。

你可以找到更多的信息在这里下属性部分。

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

以及“ 图层组”示例中的实时示例。

阿拉贡，您的回答为我指明了正确的方向。下面是我最后的不干净代码，用于将层添加到数组中然后对其进行控制。

在一个javascript文件中，我初始化了地图，并使用一个函数来切换可见性，如下所示：

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

在HTML中，我使用了简单的复选框（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>

以下是带有ol2样式图层切换器的OpenLayers 3附加组件的链接。

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