Índice Z en OpenLayers 3: ordenamiento de capas en OL3

13

¿Existe un método para cambiar los índices Z de capas en OpenLayers3 como lo fue en la versión anterior?

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

Necesito cambiar el orden de las capas utilizando un mapa. Por lo tanto, la posibilidad de definir un índice z como este no ayuda

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

    }
});
    
pregunta Anuket 31.10.2014 - 07:55

5 respuestas

10

Prueba algo como:

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

La lista de capas está en un objeto heredado de un ol.Collection . Consulte el documento de API para ello.

Tenga cuidado, estoy bastante seguro de que no puede usar un número arbitrario como 99 en setAt : el primer argumento es para la posición en la matriz de capas y el segundo es para la referencia del elemento de capa que desea movimiento. Para obtener el número de capas, solo usa map.getLayers().getArray().length

Aunque vea que podemos obtener una matriz JS para capas, no estoy seguro de que manipular esta matriz directamente sea la mejor manera porque las capas pueden tener eventos adjuntos. Puedes usar los métodos ol.Collection en su lugar.

    
respondido por el ThomasG77 01.11.2014 - 03:21
7

No es tan fácil como solía ser, pero hay algunos métodos de ayuda para la colección. Eso debería permitirte hacer cosas similares a las que ThomasG77 describió anteriormente.

Suponiendo que tiene un mapa llamado map, con 4 capas, es decir, [base_layer, líneas costeras, mapa de calor, marcadores]

Luego puede obtener la colección a través de map.getLayers (), y la matriz de capas a través de map.getLayers (). getArray (), y capas individuales a través de

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

Puedes manipular el orden de las capas a través de los métodos de recolección. Probablemente ayude a crear algunas funciones de ayuda como:

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

Esperamos que tenga la capacidad de identificar sus capas y encontrarlas, establezco una identificación en la creación como layer.set ("layer_id" 44), que luego puede recuperarse a través de layer.get ("layer_id"). Luego, puede tener un bucle de ayuda findLayer a través de su matriz de capas y devolver el índice de capas.

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

De esta manera puedo tener algo como moveLayerBefore (map, findLayer (44), findLayer (22));

De todos modos, hay un montón de métodos en la colección, pero espero que esto te ayude a comenzar. Y perdón si hay errores en ese código, eso es todo compilado ... :)

    
respondido por el srussking 16.12.2014 - 19:16
5

basado en la respuesta de srussking, escribí el siguiente código, asumiendo que el objeto del mapa principal se llama map y es una var global, Preferí usar la capa de búsqueda por nombre y no por ID,

aquí está mi código:

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'));
    
respondido por el talsibony 30.04.2015 - 11:18
1

No es necesario manejar los índices en la colección a través de setAt o insertAt. La forma más fácil es usar el método setZIndex en la capa como en la API

geoLayer.setZIndex(999);
    
respondido por el emiliegue 03.03.2017 - 15:34
1

En mi caso, la respuesta de ThomasG77 causó un AssertionError , porque la capa que estaba a punto de mover a la parte superior ya estaba adjunta al mapa ( enlace ).

Solución que funcionó para mí:

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

(eliminar la función devuelve la capa eliminada). Oneliner también debería funcionar, pero no lo probé.

    
respondido por el r34 14.02.2018 - 11:19

Lea otras preguntas en las etiquetas