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

You may also like...