1. 程式人生 > >openlayers 滑鼠點選互動事件

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方法來控制哪些要素或者圖層相應哪些事件。