mapbox-gl開發(fā)教程(二十):鼠標和矢量圖層feature交互
矢量圖層疊加在地圖之后,通過鼠標和圖層之中的對象進行交互,比如鼠標滑過顯示提示信息,鼠標點擊彈出feature詳情,或是鼠標點擊feature,觸發(fā)跳轉等操作。
mapbox-gl地圖支持一系列的鼠標事件,包括鼠標單擊(click)、鼠標雙擊(dbclick)、鼠標移動(mousemove)、鼠標按下(mousedown)等。
事件關閉通過map.off進行結束,假如加載一個事件多次執(zhí)行map.on,而不執(zhí)行關閉,事件中的方法會多次響應,這個需要注意。
事件響應返回的e對象中,包含一系列的信息,地理坐標(LngLat)、屏幕坐標(point)等,當點擊事件指定圖層時,e.features是當前位置的所有feature,未指定圖層時,需要通過map.queryRenderedFeatures(e.point),根據屏幕坐標,查詢當前位置的feature。
mapbox-gl中的圖層是以geojson的數據形式進行加載,點擊的單個feature,也就是geojson數據中的一個feature對象,其中有坐標信息和屬性信息,通過這些信息,可以進行下一步的操作。
相關鏈接:
https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent#features