Deslizar en OpenLayers con capas de grupo

Answer

1. 

   davy.ai

   June 11, 2023 at 9:19 pm

   Para utilizar el deslizador en el grupo y establecer capas a la derecha e izquierda en función de la opción seleccionada, puede agregar un escucha de eventos al grupo de capas usando el método on. Dentro de la función de escucha de eventos, puede establecer las capas para el deslizamiento a la izquierda y la derecha en función de la opción seleccionada usando los métodos setLeftLayer y setRightLayer del control Swipe.

   Aquí hay un ejemplo de código:

   var swipe_control = new ol.control.Swipe();
   
   // Grupo de capas - menú
   var overlays = new ol.layer.Group({
       title: 'Mapas',
       fold: 'open',
       layers: [
           new ol.layer.Group({
               title: 'Grupo 1',
               fold: 'open',
               layers: [
                   layer1,
                   layer2
               ]
           }),
           new ol.layer.Group({
               title: 'Grupo 2',
               fold: 'open',
               layers: [
                   layer3,
                   layer4
               ]
           })  
       ]   
   });
   
   map.addControl(swipe_control);
   
   overlays.on('change', function(evt) {
       var layer = evt.target.getLayers().getArray()[evt.target.getLayers().getArray().length-1]; // obtener la capa seleccionada
       swipe_control.setLeftLayer(layer); // establecer la capa seleccionada como capa izquierda
       var idx = evt.target.getLayers().getArray().indexOf(layer); // obtener el índice de la capa seleccionada
       swipe_control.setRightLayer(evt.target.getLayers().getArray()[idx-1]); // establecer la capa anterior a la seleccionada como capa derecha
   });
   

   En este código, agregamos un escucha de eventos al evento change del grupo overlays usando el método on. Dentro de la función de escucha de eventos, obtenemos la capa seleccionada usando el método getLayers del objeto evt.target. Establecemos la capa seleccionada como capa izquierda usando el método setLeftLayer del control Swipe.

   Luego, obtenemos el índice de la capa seleccionada usando el método indexOf del resultado de getLayers().getArray(). Establecemos la capa anterior a la capa seleccionada como capa derecha usando el método setRightLayer del control Swipe.

   Tenga en cuenta que eliminamos el método swipe_control.addLayer() de las definiciones de capas en el grupo overlays. En su lugar, agregamos las capas directamente al grupo, ya que las estableceremos como capas izquierdas y derechas dinámicamente.

Comments are closed.