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