OpenLayers 3悬停每次只突出显示一个指定的对象

Question

原刊：

OpenLayers 3（也测试了最新的 3.14.1）在 select 相互重叠的功能方面应该有一定的意义。当 multi=false 时，它 select 只有一个特征，但它是随机选择的。当您从不同方向将鼠标悬停在某些地图项上时，selected 会显示不同的地图项。

我试图通过将 z-index 设置为特征来告诉 Openlayers 所需的顺序来解决这个问题。索引设置为顺序 point > line > polygon 但我仍然没有在悬停时首先得到点 selected。

Z-Index 应用于图层：

rendererOptions: { zIndexing: true }

在图层上并且

zIndex: x

不同特征类型的风格。

先发生了什么：

Z-indexing 不起作用，所以我无法纠结 select 的情况。我保留了 multi=true 并从列表中手动过滤了结果。

我有一个函数 getSelectedRemovableFeature(event.selected) 接受了 event.selected 并且只返回其中的一个特征。

所以，我的 selection 有如下代码：

 var selectionInteraction = new ol.interaction.Select({
                               layers: [layersModule.getTargetLayer()],
                               condition: ol.events.condition.click,
                               multi: true
                            });  

and more..

selectionInteraction.on('select', function(event) {

                var selectedFeature = null;

                selectedFeature = getSelectedRemovableFeature(event.selected);

                if(selectedFeature){
                   .. some logic..
                   layersModule.getTargetLayer().getSource().removeFeature(selectedFeature);
                }
         });

然后卡住了:

我有

var hoverInteraction = new ol.interaction.Select({
                       layers: [layersModule.getTargetLayer()],
                       condition: ol.events.condition.pointerMove,
                       multi: true
                       });

..和..

hoverInteraction.on('select', function(event) {

            var selectedFeature = null;

            selectedFeature = getSelectedRemovableFeature(event.selected);

            // here I didn't know what to do..
            }
     });

我有这样的逻辑：

  selectControl = new OpenLayers.Control.SelectFeature(vectorLayer);
  ...
  map.addControls([selectControl]);
 selectControl.activate();

  // unselect any specific feature...
  selectControl.unselect(vectorLayer.features[0]);

(https://gis.stackexchange.com/questions/41017/how-can-i-unselect-a-feature-in-openlayers)

.. 但是当它在那里时，没有 select 离子被移除，它的工作原理与没有这部分一样。

回到原点：

现在我意识到，与 hoverSelection 数据纠缠不清是没有用的，因为在我可以计算如何 select 之前，新的 multi=true 类型事件被抛出显示。我相信是这样，因为即使我手动过滤结果并删除功能也没有任何改变。

总而言之：

如何确定悬停/select selection 移动的明确顺序？

Answer 1

我注意到出于某种原因绘图样式包含大量 z 索引，导致此问题发生的原因如下：

原因：

由于某些历史原因，selected 风格被 zIndex: 100 强行放在首位。正常 selection 有 zIndex: 1.

这导致了一个问题：当点和线彼此重叠并且 select 线时，zIndex 上升到 100。这打破了自然高亮顺序，因为 100 远远超过1. 因此，@ahocevar 指出的自然顺序被打破，突出显示取决于您靠近地图上的特征的方向。

解法：

我将 selected 和默认样式都设置为 zIndex: 1，并且一切似乎都正常。

我还需要检查 selected style on zIndex 这么高的原因，但是如果没有理由继续使用它，这个东西就解决了问题。

旁注：

答案是一个社区维基，因为一半的解决方案来自另一个用户的评论。

Answer 2

地图上特征的命中检测以相反的渲染顺序工作。默认情况下，点最后呈现，所以它们首先被检测到（和 selected）。当任何样式都没有设置zIndex时，渲染顺序为多边形、线、点、文本。

当您在 ol.style.Style 上设置 zIndex 时，您会覆盖此固定渲染顺序，例如，在点之上渲染多边形。

在这四个组（多边形、线、点、文本）中，您可以通过在 ol.layer.Vector 上设置 renderOrder 函数来控制渲染顺序。这是一个数组排序函数，调用时有两个特点：

new ol.layer.Vector({
  renderOrder: function(a, b) {
    if (a.get('importance') < b.get('importance')) {
      return -1;
    } else if (b.get('importance') > a.get('importance')) {
      return 1;
    }
    return 0;
  }
});

以上假定您的功能具有数字 'importance' 属性。现在，当您点击检测 (select) 相同几何类型（例如点）的特征时，具有较高 'importance' 值的特征将首先被 selected，因为它们是最后呈现的。

另请注意，没有像您在问题中所说的那样 rendererOptions。

OpenLayers 3悬停每次只突出显示一个指定的对象

OpenLayers 3 hover to highlight only one specified object per time

javascript

hover

openlayers-3