OpenLayers 3 레이어 가시성 설정

투명 레이어에 대한 환상적인 전환 효과를 활용하기 위해 Openlayers 2.12 맵을 Openlayers 3으로 업그레이드하려고합니다 (Something 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).

레이어 그룹 예제의 라이브 예제 .

Aragon, 당신의 대답은 올바른 방향으로 나를 가리 켰습니다. 아래는 배열에 레이어를 추가하고 제어하는 ​​마지막 부정한 코드입니다.

자바 스크립트 파일에서 나는지도를 초기화하고 다음과 같이 가시성을 토글하는 기능을 사용했습니다.

//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