mapbox-gl開發(fā)教程(二十):鼠標(biāo)和矢量圖層feature交互
矢量圖層疊加在地圖之后,通過鼠標(biāo)和圖層之中的對象進(jìn)行交互,比如鼠標(biāo)滑過顯示提示信息,鼠標(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)移動(mousemove)、鼠標(biāo)按下(mousedown)等。
事件關(guān)閉通過map.off進(jìn)行結(jié)束,假如加載一個(gè)事件多次執(zhí)行map.on,而不執(zhí)行關(guān)閉,事件中的方法會多次響應(yīng),這個(gè)需要注意。
事件響應(yīng)返回的e對象中,包含一系列的信息,地理坐標(biāo)(LngLat)、屏幕坐標(biāo)(point)等,當(dāng)點(diǎn)擊事件指定圖層時(shí),e.features是當(dāng)前位置的所有feature,未指定圖層時(shí),需要通過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對象,其中有坐標(biāo)信息和屬性信息,通過這些信息,可以進(jìn)行下一步的操作。
相關(guān)鏈接:
https://docs.mapbox.com/mapbox-gl-js/api/events/#maptouchevent#features