2012-10-11 85 views
20

¿Cómo puedo forzar que se agregue una nueva capa al mapa en Leaflet para que sea la primera sobre el mapa base?Orden de capa en leaflet.js

No pude encontrar un método para cambiar fácilmente el orden de las capas, que es una característica GIS muy básica. ¿Me estoy perdiendo de algo?

Respuesta

13

mapa un folleto consta de una colección de "Panes", cuyo orden de visualización es controlado utilizando z-index. Cada panel contiene una colección de capas. El orden de visualización del panel predeterminado es tiles-> shadows-> overlays-> markers-> popups. Como Etienne describió, puede controlar el orden de visualización de Rutas dentro del panel de superposiciones llamando al bringToFront() o bringToBack(). L.FeatureGroup también tiene estos métodos para que pueda cambiar el orden de los grupos de superposiciones a la vez si es necesario.

Si desea cambiar el orden de visualización de un panel completo, simplemente cambie el índice z del panel mediante CSS.

Si desea agregar un nuevo panel de Mapa ... bueno, todavía no estoy seguro de cómo hacerlo.

http://leafletjs.com/reference.html#map-panes

http://leafletjs.com/reference.html#featuregroup

7

Según la API de prospecto, puede usar bringToFront o bringToBack en cualquier capa para llevar esa capa a la parte superior o inferior de todas las capas de ruta.

Etienne

+2

Folleto también ha añadido recientemente el método setZIndex que se puede utilizar en TileLayer gestionar manualmente los azulejos capas orden con CSS –

5

Para un poco más de detalle, Bobby Südekum puestos juntos a fantastic demo que muestra la manipulación del panel z-index. Lo uso como punto de partida todo el tiempo.

Aquí está el código de la llave:

var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane); 
var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map); 
topPane.appendChild(topLayer.getContainer()); 
topLayer.setZIndex(7); 
+2

Enlace únicas respuestas están desanimados en tanto, tratar de responder a ella con su propias palabras y si se cayó necesario publicar el enlace como referencia. Además, el enlace puede romperse eventualmente, lo que haría que tu respuesta no tenga sentido. – Math

+0

Buen punto. Aquí está la clave: 'var topPane = map._createPane ('leaflet-top-pane', map.getPanes(). MapPane); var topLayer = L.mapbox.tileLayer ('bobbysud.map-3inxc2p4'). AddTo (map); topPane.appendChild (topLayer.getContainer()); topLayer.setZIndex (7); ' –

+0

La función de folleto que he vinculado aquí el año pasado ha cambiado. Ahora el código anterior sería: 'var topPane = L.DomUtil.create ('div', 'leaflet-top-pane', map.getPanes(). MapPane);' 'var topLayer = L.mapbox.tileLayer ('bobbysud.map-3inxc2p4'). addTo (map); ' ' topPane.appendChild (topLayer.getContainer()); '' topLayer.setZIndex (7); ' –

2

tuvieron que resolver esto recientemente, pero tropezado sobre esta pregunta.

Aquí hay una solución que no depende de los hacks CSS y funciona con grupos de capas. En esencia, elimina y vuelve a agregar capas en el orden deseado.

Lo presento como una mejor "mejor práctica" que la respuesta actual. Muestra cómo administrar las capas y reordenarlas, lo que también es útil para otros contextos. El método actual usa la capa Title para identificar qué capa reordenar, pero puede modificarla fácilmente para usar un índice o una referencia al objeto de capa real.

Mejoras, comentarios y ediciones son bienvenidos y alentados.

JS violín: http://jsfiddle.net/ob1h4uLm/

O desplazarse hacia abajo y haga clic en "Ejecutar código de fragmento" y jugar con él. Establecí el nivel de zoom inicial en un punto que debería ayudar a ilustrar el efecto de superposición layerGroup.

function LeafletHelper() { 
 

 
    // Create the map 
 
    var map = L.map('map').setView([39.5, -0.5], 4); 
 

 
    // Set up the OSM layer 
 
    var baseLayer = L.tileLayer(
 
     'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
     maxZoom: 18 
 
    }).addTo(map); 
 

 
    var baseLayers = { 
 
     "OSM tiles": baseLayer 
 
    }; 
 

 
    this.map = map; 
 

 
    this.BaseLayers = { 
 
     "OSM tiles": baseLayer 
 
    }; 
 
    this.LayersControl = L.control.layers(baseLayers).addTo(map); 
 

 
    this.Overlays = []; 
 
    this.AddOverlay = function (layerOptions, markers) { 
 
     var zIndex = this.Overlays.length; 
 
     var layerGroup = L.layerGroup(markers).addTo(map); 
 
     this.LayersControl.addOverlay(layerGroup, layerOptions.title); 
 
     this.Overlays.push({ 
 
      zIndex: zIndex, 
 
      LeafletLayer: layerGroup, 
 
      Options: layerOptions, 
 
      InitialMarkers: markers, 
 
      Title: layerOptions.title 
 
     }); 
 
     return layerGroup; 
 
    } 
 
    this.RemoveOverlays = function() { 
 
     for (var i = 0, len = this.Overlays.length; i < len; i++) { 
 
      var layer = this.Overlays[i].LeafletLayer; 
 
      this.map.removeLayer(layer); 
 
      this.LayersControl.removeLayer(layer); 
 
     } 
 
     this.Overlays = []; 
 
    } 
 
    this.SetZIndexByTitle = function (title, zIndex) { 
 

 
     var _this = this; 
 

 
     // remove overlays, order them, and re-add in order 
 
     var overlays = this.Overlays; // save reference 
 
     this.RemoveOverlays(); 
 
     this.Overlays = overlays; // restore reference 
 

 
     // filter overlays and set zIndex (may be multiple if dup title) 
 
     overlays.forEach(function (item, idx, arr) { 
 
      if (item.Title === title) { 
 
       item.zIndex = zIndex; 
 
      } 
 
     }); 
 

 
     // sort by zIndex ASC 
 
     overlays.sort(function (a, b) { 
 
      return a.zIndex - b.zIndex; 
 
     }); 
 

 
     // re-add overlays to map and layers control 
 
     overlays.forEach(function (item, idx, arr) { 
 
      item.LeafletLayer.addTo(_this.map); 
 
      _this.LayersControl.addOverlay(item.LeafletLayer, item.Title); 
 
     }); 
 
    } 
 
} 
 

 
window.helper = new LeafletHelper(); 
 

 
AddOverlays = function() { 
 
    // does not check for dups.. for simple example purposes only 
 
    helper.AddOverlay({ 
 
     title: "Marker A" 
 
    }, [L.marker([36.83711, -2.464459]).bindPopup("Marker A")]); 
 
    helper.AddOverlay({ 
 
     title: "Marker B" 
 
    }, [L.marker([36.83711, -3.464459]).bindPopup("Marker B")]); 
 
    helper.AddOverlay({ 
 
     title: "Marker C" 
 
    }, [L.marker([36.83711, -4.464459]).bindPopup("Marker c")]); 
 
    helper.AddOverlay({ 
 
     title: "Marker D" 
 
    }, [L.marker([36.83711, -5.464459]).bindPopup("Marker D")]); 
 
} 
 

 
AddOverlays(); 
 

 
var z = helper.Overlays.length; 
 

 
ChangeZIndex = function() { 
 
    helper.SetZIndexByTitle(helper.Overlays[0].Title, z++); 
 
} 
 

 
ChangeZIndexAnim = function() { 
 
    StopAnim(); 
 
    var stuff = ['A', 'B', 'C', 'D']; 
 
    var idx = 0; 
 
    var ms = 200; 
 
    window.tt = setInterval(function() { 
 
     var title = "Marker " + stuff[idx++ % stuff.length]; 
 
     helper.SetZIndexByTitle(title, z++); 
 
    }, ms); 
 
} 
 

 
StopAnim = function() { 
 
    if (window.tt) clearInterval(window.tt); 
 
}
#map { 
 
    height: 400px; 
 
}
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css"> 
 
<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
 
<div id="map"></div> 
 
<input type='button' value='Remove overlays' onclick='helper.RemoveOverlays();' /> 
 
<input type='button' value='Add overlays' onclick='AddOverlays();' /> 
 
<input type='button' value='Move bottom marker to top' onclick='ChangeZIndex();' /> 
 
<input type='button' value='Change z Index (Animated)' onclick='ChangeZIndexAnim();' /> 
 
<input type='button' value='Stop animation' onclick='StopAnim();' />

Cuestiones relacionadas