在openlayers中选择与滑动交互的层

Question

我在Openlayers中使用滑动来在每一侧显示一个层，可以从菜单中选择。也就是说，层是显示在滑动的右侧还是左侧是不固定的。我有两个选项。选择：右侧和左侧。我的问题是：如何动态地更改每个选择的图层？在代码中，layer1固定为"selectPointerMove_left"，但可能在某个时刻，该层将添加到右侧。

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
}); 

Answer 1

定义一个swapped布尔值，如果交换层，则将其设置为true并在选定条件下进行测试：

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
});

或者，对于比简单交换更复杂的情况，您可以用过滤函数和每个层的维护左/右标志(甚至是三向左/右/双向标志，其中both对两种交互都有效(来替换层阵列：

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
});