0
258
ViewsSelect interaction with swipe in Openlayers
I'm using swipe control https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html to show two layers on the map: right and left side.
[EDIT]
I have two iterations selected, one for each side of the swipe. I changed the style just to check: left side black and right side red. There are two different layers one on each side. When I mouse over, it shows both styles, that is, the iteration is not working only for the side set, but for both layers, even if the mouse is passed on a single side. Does anyone know how to solve?
Change the select iteration code according to Mike's answer, and when I move the mouse on the right side, it doesn't show the style, but when I move on the left side, it shows both styles, because it's like running both iterations. Does anyone know how to solve?
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 answers
Answer question0
Yu need to test the event pixel in a custom condition. So the first interaction only selects and deselects when used left of the swipe, and the second interaction only selects and deselects when used right of the swipe:
<!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>