Javascript OpenLayers 3悬停，每次仅高亮显示一个指定对象

原版：

OpenLayers 3（也测试了最新的3.14.1）在选择相互重叠的功能方面应该有一定的意义。当

multi=false

时，它只选择一个特征，但随机选取。将鼠标悬停在不同方向的某些特征上时，会选择不同的特征

我试图通过将z-index设置为features来告诉Openlayers所需的顺序来解决这个问题。索引设置为顺序

点>线>多边形

，但悬停时我仍然没有首先选择点

Z索引应用于以下图层：

rendererOptions: { zIndexing: true }

分层

zIndex: x

不同要素类型的样式

首先发生了什么：

Z索引不起作用，因此我无法为select解决问题。我保留了

multi=true

，并从列表中手动筛选结果

我有一个函数

getSelectedRemovableFeature（event.selected）

，它接受了

event.selected

，只返回了其中的一个功能

因此，我选择的代码如下所示：

然后我被绊倒了：

我有

…和

我有这样的逻辑：

（）

。。但当它在那里，没有选择被删除，它的工作原理与没有这个部分的情况相同

回到原点：

现在我意识到，与

hoverSelection

数据纠缠是没有用的，因为在我计算如何只选择一个并显示它之前，会在那里抛出新的

multi=true

类型事件。我相信是这样的，因为即使我手动过滤结果并删除功能，也不会有任何改变

简言之，最后：

---

如何确定悬停/选择的明确顺序？

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

原因：

由于某些历史原因，选定的样式被

zIndex:100

强制置于顶部。正常选择有

zIndex:1

这就产生了一个问题：当你们把点和线放在一起，你们选择了线，它的zIndex上升到100。这打破了自然的高光顺序，因为100远远大于1。因此，@ahocevar指出的自然顺序被打破，高亮显示取决于您靠近地图上特征的方向

解决方案：

我把选择的和默认的样式都放在了

zIndex:1

中，所有的事情似乎都很正常

我仍然需要检查

zIndex

上选择样式的原因，但是如果没有理由继续使用，这个问题就解决了

旁注：

---

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

对地图上的特征进行命中检测的工作顺序与呈现顺序相反。默认情况下，最后渲染点，因此首先检测（并选择）点。在任何样式上未设置任何

zIndex

时，渲染顺序为多边形、线、点和文本

当您在

ol.style.style

上设置

zIndex

时，您将覆盖此固定的渲染顺序，例如，允许您在点的顶部渲染多边形

在这四个组（多边形、直线、点、文本）中，您可以通过在

ol.layer.Vector

上设置

renderOrder

函数来控制渲染顺序。这是一个调用的数组排序函数，具有两个功能：

新建ol.layer.Vector({
renderOrder:函数（a，b）{
如果（a.get（'重要性'）a.get（'importance'））{
返回1；
}
返回0；
}
});

以上假设您的功能具有数字“重要性”属性。现在，当您点击“检测（选择）”相同几何体类型的要素（例如点）时，将首先选择“重要性”值较高的要素，因为它们最后渲染

---

还请注意，没有像您在问题中所述的

渲染器选项。
layersModule.getTargetLayer（）.getSource（）.clear（）应删除图层中的所有现有功能。你试过了吗？在选择交互初始化过程中，还可以使用
multi:true
。这不应该是
multi:false
？只要你想一次只选择一个功能，好的多点错误！必须在工作中检查它。Multi=false使其工作。我现在必须弄清楚为什么以前在代码中使用multi=true，以及我们是否仍然可以在这两种情况下都使用multi=false。事实证明，现在不可能分层选择对象（先点，然后线，然后多边形），因为zIndexing无法正常工作。这就是为什么multi是真的，并且基于层次结构的选择是手动完成的。所以，仍然处于起始点：无法选择直线和多边形下方的点，因为所选的点与所需的点不同。任何关于如何使zindexing工作的指针都是值得赞赏的。请注意，命中检测的工作顺序与渲染顺序相反：点是最后渲染的（默认情况下），因此它们首先被命中检测（并被选中）。还请注意，没有像您在问题中所述的
渲染器选项。最后，还要注意，您不仅可以通过设置
ol.style.style
的
zIndex
属性，还可以通过在
ol.layer.Vector
上设置
renderOrder
函数来完全控制渲染顺序。这是一个用两个特性调用的数组排序函数。
 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]);