openlayers 鼠标点击交互事件

目前，openlayers中利用ol.interaction.Select接口进行事件交互操作。在此接口中，有几个重要的参数说明如下：

condition：表示鼠标事件类型，例如ol.events.condition.click表示单击事件（其他事件可参考api）

style:可为style或function，其中为function时函数参数为feature；

filter:function类型，此函数中存在两个参数，feature和layer，利用此方法可对要素和图层是否相应事件进行过滤，例如在生成feature是，利用feature.set(‘key’,value)方法添加是否相应事件的标识参数，那么在filter中就可通过feature.get(‘key’)方法判断相应的值是否满足相应条件，同样的也可以对layer进行添加标识参数进行过滤。这样以来，就可以方便对所有的图层和要素进行筛选。

在定义好select对象之后，通过map.addInteraction()方法将select对象添加到地图中。继而，通过select.on(‘select’,function)方法添加相应的鼠标事件处理方法。这里我在实际应用的过程发现这么一个现象，在单击某个要素时会触发filter方法，如果要素满足filter方法，那么就会执行select绑定的事件处理函数。如果在点击某个要素，触发事件之后，再点击地图上空白处，发现会再一次触发select绑定的处理方法，但是却不会触发filter方法。这个问题着实困扰了我一下，通过对绑定事件参数e进行断点分析，笔者发现，在第一次的相应方法中一切都是正常的，可以通过e.selected属性拿到所选择的要素数组。但是在后面的鼠标事件相应方法中却鼠标选中要素却是空的，这个时候就会思考，为什么明明没有选中要素却还是触发了事件呢。通过在进一步的分析发现，第二次的selected虽然是空的，但是deselected里却有值存在，这就意味这要素的选中和取消选中事件都会触发select绑定的方法，而要素选中会触发filter，要素取消不会触发filter。在这种情况想，如何避免二次触发所带来的可能性错误，通过对e.selected的长度进行判断，如果长度大于0表示此时是要素选中事件，反之则是要素取消事件。

如此一下，我们不进可以对要素选中事件进绑定方法，也可以对要素取消选中要素进行处理。

此外，还需要注意一点的是，同个地图中可以添加多个交互select。这个时候就可以通过filter方法来控制哪些要素或者图层相应哪些事件。

转载自：https://blog.csdn.net/haochajin/article/details/83151453