最近想模仿windy網(wǎng)站自己實(shí)現(xiàn)一個(gè)氣流動(dòng)態(tài)圖缘厢,經(jīng)過不懈的嘗試倦卖,終于實(shí)現(xiàn)了在地圖上描繪動(dòng)態(tài)點(diǎn)
windy網(wǎng)站截圖
自己實(shí)現(xiàn)的幾個(gè)點(diǎn)
這幾個(gè)就是需要的js文件纹磺,echarts在官網(wǎng)下載,中國地圖和世界地圖的js文件我是從echarts的github開源包里找出來的鸟辅,本例只用到了世界地圖。
這段配置為地圖的初始化配置莺葫,之前的官方示例使用series[i]-map作為地圖初始化的配置匪凉,使用echarts3的包和原來的示例代碼會(huì)報(bào)一個(gè)函數(shù)不存在的錯(cuò)誤,在這個(gè)地方折騰了好久捺檬,幾乎快放棄再层。偶然看到官方文檔的一句提示
Tip: 在 ECharts 3 中不再建議在地圖類型的圖表使用 markLine 和 markPoint。如果要實(shí)現(xiàn)點(diǎn)數(shù)據(jù)或者線數(shù)據(jù)的可視化堡纬,可以使用在地理坐標(biāo)系組件上的散點(diǎn)圖和線圖聂受。
沒錯(cuò),介個(gè)geo就是地理坐標(biāo)系的配置
這一段烤镐,就是繪制動(dòng)態(tài)點(diǎn)的過程蛋济。series設(shè)置為lines屬性,effect屬性設(shè)置動(dòng)畫特效炮叶,data中為地理坐標(biāo)經(jīng)緯度的點(diǎn)碗旅。