mapbox-gl實(shí)戰(zhàn)教程:地圖定位
在地圖開發(fā)中,定位是進(jìn)行的比較多的操作,根據(jù)操作,定位到地圖上一個(gè)位置,定位到地圖上的一個(gè)區(qū)域,或是定位到一條路上等等。
下邊以實(shí)際的代碼操作,講一下mapbox-gl如何進(jìn)行定位的操作。
1、點(diǎn)數(shù)據(jù)定位:
對(duì)于點(diǎn)數(shù)據(jù)的定位,mapbox-gl提供了兩個(gè)實(shí)現(xiàn)方式,一個(gè)跳轉(zhuǎn)(jumpTo)到位置,一個(gè)飛到(flyTo)指定位置,區(qū)別在于中間的效果,飛到有一個(gè)從當(dāng)前點(diǎn)到終點(diǎn)的飛行動(dòng)畫效果,另外還有easeTo的方式,可以查看api文檔。
center是必須設(shè)置的,定位的地圖中心點(diǎn)坐標(biāo);
zoom是縮放級(jí)別,不設(shè)置的話,就按照當(dāng)前縮放級(jí)別定位;
其他的參數(shù)不是必須的,參照api文檔設(shè)置即可。
2、線數(shù)據(jù)定位:
線數(shù)據(jù)定位,要是定位到線數(shù)據(jù)的一個(gè)點(diǎn)上,和上邊點(diǎn)數(shù)據(jù)定位是一樣的操作,如想定位到線數(shù)據(jù)的范圍,就需要用到mapbox-gl的另一個(gè)api進(jìn)行操作,具體的方法如下:
其中的bbox是范圍,可以循環(huán)數(shù)據(jù)獲得左下角的坐標(biāo)和右上角的坐標(biāo),或者使用turf.js進(jìn)行獲取;padding是范圍在顯示窗口上的4個(gè)像素距離,這個(gè)對(duì)于地圖窗口周邊有覆蓋元素,調(diào)整起來很有用。
3、面數(shù)據(jù)定位:
面數(shù)據(jù)定位,定位到面的中心點(diǎn)或者面的范圍,定位點(diǎn)的方式和以上一樣,定位范圍參見線范圍定位的。
面的中心點(diǎn)可以使用turf.js庫進(jìn)行計(jì)算,范圍計(jì)算可以遍歷坐標(biāo)進(jìn)行最大最小坐標(biāo)判斷,或者使用turf.js庫進(jìn)行計(jì)算。
3DTiles三維管線數(shù)據(jù)生產(chǎn)工具試用版:
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247487391&idx=1&sn=a49ad027b4de2c8ce6e5bec051801342&chksm=fc8bafadcbfc26bb5abc160d0dbfeef94134cc21900c752ca209d49393cf69325573be9ba4ec&scene=21#wechat_redirect