OpenLayers 3의 Z- 색인 : OL3의 레이어 순서

OpenLayers3에서 이전 버전과 마찬가지로 레이어의 Z- 색인을 변경하는 방법이 있습니까?

map.setLayerIndex(markers, 99); //set the marker layer to an arbitrarily high layer index

지도를 사용하는 동안 레이어 순서를 변경해야합니다. z-index를 정의하는 것과 같은 가능성은 도움이되지 않습니다.

var geoLayer = new ol.layer.Vector({
    source : new ol.source.GeoJSON({
        projection : 'EPSG:900913',
        url : './myGeoJson.json'
    }),
    style : function(feature, resolution) {
        var text = resolution < 5000 ? feature.get('name') : '';
        if (!styleCache[text]) {
            styleCache[text] = [new ol.style.Style({
                fill : new ol.style.Fill({
                    color : 'rgba(255, 255, 255, 0.1)'
                }),
                stroke : new ol.style.Stroke({
                    color : '#319FD3',
                    width : 1
                }),
                text : new ol.style.Text({
                    font : '12px Calibri,sans-serif',
                    text : text,
                    fill : new ol.style.Fill({
                        color : '#000'
                    }),
                    stroke : new ol.style.Stroke({
                        color : '#fff',
                        width : 3
                    })
                }),
                zIndex : 999
            })];
        }

    }
});

다음과 같은 것을 시도하십시오 :

map.getLayers().setAt(99, markers)

레이어 목록은에서 상속되는 객체에 ol.Collection있습니다. API 문서 를 참조하십시오 .

조심하십시오, 당신은 99와 같은 임의의 숫자를 사용할 수 없습니다 setAt: 첫 번째 arg는 레이어 배열의 위치에 대한 것이고 두 번째 arg는 이동하려는 레이어 요소 참조에 대한 것입니다. 레이어 수를 얻으려면map.getLayers().getArray().length

계층에 대한 JS 배열을 얻을 수 있지만 계층에 이벤트를 첨부 할 수 있으므로이 배열을 직접 조작하는 것이 가장 좋은 방법인지 잘 모르겠습니다. ol.Collection대신 메소드를 사용할 수 있습니다 .

예전처럼 쉽지는 않지만 컬렉션에 대한 몇 가지 도우미 메서드가 있습니다. 이를 통해 위에서 설명한 ThomasG77과 유사한 작업을 수행 할 수 있습니다.

[base_layer, 해안선, 히트 맵, 마커]와 같이 4 개의 레이어가있는 map이라는 맵이 있다고 가정합니다.

그런 다음 map.getLayers ()를 통해 컬렉션을 얻을 수 있고 map.getLayers (). getArray ()를 통해 레이어 배열을, 개별 레이어를 통해 레이어를 가져올 수 있습니다

var heatmap = map.getLayers().getArray()[2]

수집 방법을 통해 레이어 순서를 조작 할 수 있습니다. 다음과 같은 도우미 함수를 만드는 데 도움이 될 것입니다.

function moveLayerBefore(map, old_idx, new_idx){
  var layer = map.getLayers().removeAt(old_idx);
  map.getLayers().insertAt(new_idx, layer);
}

바라건대 여러분은 레이어를 식별하고 찾을 수있는 능력이 있기 때문에 layer.set ( "layer_id"44)와 같은 생성에 id를 설정 한 다음 layer.get ( "layer_id")를 통해 검색 할 수 있습니다. 그런 다음 레이어 배열을 통해 findLayer 헬퍼를 반복하고 레이어 인덱스를 반환 할 수 있습니다.

function findLayer(map, layer_id){
  var layer_idx = -1;
  $.each(map.getLayers().getArray(), function (k,v){
    var this_layer_id = v.get("layer_id")
    if(this_layer_id == layer_id){
      layer_idx = k;
    }
  });
  return layer_idx;
}   

이런 식으로 moveLayerBefore (map, findLayer (44), findLayer (22))와 같은 것을 가질 수 있습니다.

어쨌든 컬렉션에는 많은 방법이 있지만, 이것이 시작하는 데 도움이되기를 바랍니다. 그리고 그 코드에 버그가 있다면 미안합니다.

srussking 답변을 바탕으로 map이라는 기본 맵 객체를 가정하고 다음 코드를 작성했으며 전역 var입니다 .ID가 아닌 이름으로 레이어 찾기를 선호합니다.

여기 내 코드가 있습니다 :

function moveLayerBefore(old_idx, new_idx){
    if((old_idx === -1) || (new_idx === -1)){
        return false;
    }

    layer = map.getLayers().removeAt(old_idx);
    map.getLayers().insertAt(new_idx, layer);
}

function findLayer(layer_name){
    var layer_idx = -1;
    $.each(map.getLayers().getArray(), function (k,v){
        var this_layer_name = v.get('name');
        if(this_layer_name == layer_name){
            layer_idx = k;
        }
    });

    return layer_idx;
}

// set name1 before name2
moveLayerBefore(findLayer('name1'),findLayer('name2'));

setAt 또는 insertAt를 통해 콜렉션의 색인을 처리 할 필요가 없습니다. 가장 쉬운 방법은 API 에서와 같이 레이어에서 setZIndex 메소드를 사용하는 것입니다

geoLayer.setZIndex(999);

필자의 경우 ThomasG77의 대답은을 일으켰 AssertionError습니다. 위로 이동하려고하는 레이어가 이미 맵에 연결되어 있기 때문입니다 ( https://openlayers.org/en/v4.4.2/doc/errors/#58 ).

나를 위해 일한 솔루션 :

    let layers = map.getLayers();
    let markerTemp = layers.remove(refToMarkerLayer);
    layers.push(markerTemp);

remove 함수는 제거 된 레이어를 반환합니다. Oneliner도 잘 작동하지만 테스트하지는 않았습니다.