0
261
VistasSeleccionar interacción con deslizamiento en Openlayers
Estoy usando el control de deslizamiento https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html para mostrar dos capas en el mapa: lado derecho e izquierdo.
[EDITAR]
Tengo dos iteraciones seleccionadas, una para cada lado del deslizamiento. Cambié el estilo solo para verificar: lado izquierdo negro y lado derecho rojo. Hay dos capas diferentes una en cada lado. Cuando paso el mouse, muestra ambos estilos, es decir, la iteración no funciona solo para el conjunto lateral, sino para ambas capas, incluso si el mouse se pasa en un solo lado. ¿Alguien sabe cómo resolver?
Cambie el código de iteración seleccionado de acuerdo con la respuesta de Mike, y cuando muevo el mouse hacia el lado derecho, no muestra el estilo, pero cuando lo muevo hacia el lado izquierdo, muestra ambos estilos, porque es como ejecutar ambas iteraciones. ¿Alguien sabe cómo resolver?
var selectPointerMove1 = 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: function(feature) { feature.changed(); return selectedStyle; } }); var selectPointerMove2 = 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: function(feature) { feature.changed(); return selectedStyle2; } }); 
1 Respuestas
Responde la pregunta0
Debe probar el píxel de evento en una condición personalizada. Entonces, la primera interacción solo selecciona y deselecciona cuando se usa a la izquierda del deslizamiento, y la segunda interacción solo selecciona y deselecciona cuando se usa a la derecha del deslizamiento:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css"> <style> html, body, .map { margin: 0; height: 100%; width: 100%; } </style> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script> <link rel="stylesheet" href="https://viglino.github.io/ol-ext/dist/ol-ext.css" /> <script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script> <title>OpenLayers example</title> </head> <body> <div id="map" class="map"></div> <script type="text/javascript"> var selectedStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#f00', width: 1, }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.1)', }), }); var layer1 = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/en/v6.10.0/examples/data/geojson/countries.geojson', format: new ol.format.GeoJSON(), }), }); var layer2 = new ol.layer.Vector({ source: new ol.source.Vector({ url: 'https://openlayers.org/data/vector/ecoregions.json', format: new ol.format.GeoJSON(), }), }); var map = new ol.Map({ target: 'map', layers: [layer1, layer2], view: new ol.View({ center: ol.proj.fromLonLat([10, 45]), zoom: 5 }) }); var swipe = new ol.control.Swipe(); map.addControl(swipe); swipe.addLayer(layer1); swipe.addLayer(layer2, true); var selectPointerMove1 = new ol.interaction.Select({ condition: function(e) { return ( ol.events.condition.pointerMove(e) && e.pixel[0] < map.getSize()[0] * swipe.get('position') ); }, multi: false, layers: [layer1], style: selectedStyle }); var selectPointerMove2 = new ol.interaction.Select({ condition: function(e) { return ( ol.events.condition.pointerMove(e) && e.pixel[0] > map.getSize()[0] * swipe.get('position') ); }, multi: false, layers: [layer2], style: selectedStyle }); map.addInteraction(selectPointerMove1); map.addInteraction(selectPointerMove2); </script> </body> </html>