select 中的图层与 openlayers 中的滑动交互

Question

我在 Openlayers 中使用滑动来在每一侧显示一个层，可以从菜单中选择。 也就是说，图层是显示在滑动的右侧还是左侧是不固定的。 我有两个 select ol.interaction.Select: 右侧和左侧。 我的问题是：如何动态更改每个 select 的图层？ 在代码中， 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的 boolean，如果交换层将其设置为真并在 select 条件下测试：

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

或者对于比简单交换更复杂的情况，您可以用过滤器 function 替换图层数组，并为每一层保留左/右标志（或者甚至是三向左/右/双标志，其中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
});