Uso un deslizamiento en Openlayers para mostrar una capa en cada lado, que se puede elegir de un menú. Es decir, no se fija si una capa se mostrará en el lado derecho o izquierdo del deslizamiento. Tengo dos selecciones ol.interaction.Select: lado derecho e izquierdo. Mi pregunta es: ¿cómo cambiar dinámicamente las capas para cada selección? En el código, la capa 1 está fijada en ` layer1 , pero puede ser que en algún momento, esta capa se agregue en el lado derecho.
var selectPointerMove_left = new ol.interaction.Select({ condition: function(e) { return ( ol.events.condition.pointerMove(e) && e.pixel[0] < map.getSize()[0] * swipe_control.get('position') ); }, multi: false, layers: [layer1], style: selectedStyle }); var selectPointerMove_right = new ol.interaction.Select({ condition: function(e) { return ( ol.events.condition.pointerMove(e) && e.pixel[0] > map.getSize()[0] * swipe_control.get('position') ); }, multi: false, layers: [layer2], style: selectedStyle });Defina un booleano swapped , si intercambia las capas, configúrelo como verdadero y pruebe en las condiciones seleccionadas:
var swapped = false; var selectPointerMove_left = new ol.interaction.Select({ condition: function (e) { return ( ol.events.condition.pointerMove(e) && (swapped ? e.pixel[0] > map.getSize()[0] * swipe_control.get('position') : e.pixel[0] < map.getSize()[0] * swipe_control.get('position')) ); }, multi: false, layers: [layer1], style: selectedStyle }); var selectPointerMove_right = new ol.interaction.Select({ condition: function (e) { return ( ol.events.condition.pointerMove(e) && (swapped ? e.pixel[0] < map.getSize()[0] * swipe_control.get('position') : e.pixel[0] > map.getSize()[0] * swipe_control.get('position')) ); }, multi: false, layers: [layer2], style: selectedStyle }); O para casos más complejos que un simple intercambio, podría reemplazar la matriz de capas con una función de filtro y una bandera de mantener izquierda/derecha para cada capa (o incluso una bandera de tres vías izquierda/derecha/ambos donde both serían válidos para ambas interacciones) :
var selectPointerMove_left = new ol.interaction.Select({ condition: function(e) { return ( ol.events.condition.pointerMove(e) && e.pixel[0] < map.getSize()[0] * swipe_control.get('position') ); }, multi: false, filter: function(feature, layer) { return ( {layer === layer1 && layer1Left) || {layer === layer2 && layer2Left) ); }, style: selectedStyle }); var selectPointerMove_right = new ol.interaction.Select({ condition: function(e) { return ( ol.events.condition.pointerMove(e) && e.pixel[0] > map.getSize()[0] * swipe_control.get('position') ); }, multi: false, filter: function(feature, layer) { return ( {layer === layer1 && !layer1Left) || {layer === layer2 && !layer2Left) ); }, style: selectedStyle });