高德地圖原來是沒有飛線功能的，很多可視化效果和百度相比確實(shí)差很多。

在 Loca 2.0 API 里看到了一個(gè)PulseLinkLayer的圖層

連接飛線圖層，可以支持弧度，寬度，過渡色等能力。 并且還支持脈沖動(dòng)畫，可以表達(dá)數(shù)據(jù)的朝向。

按文檔使用了下，發(fā)現(xiàn)沒效果。發(fā)工單問了下，回答說文檔有，但是功能是沒有的，一周后會(huì)實(shí)現(xiàn)并上線使用例子？？？？？？？

官方例子：北京人口流出弧線

代碼實(shí)現(xiàn)

具體是在 [高德開放平臺(tái)GeoHUB初用（Vue使用高德地圖Loca 2.0）](https://liyoro.com/2020/06/24/高德開放平臺(tái)GeoHUB初用（Vue使用高德地圖Loca 2.0）/) 的基礎(chǔ)上，用GeoHUB繪制線，然后導(dǎo)出一份 huadu_line.geojson的文件。

主要代碼如下，具體看 代碼

initPulseLink() {const linkLayer = new Loca.PulseLinkLayer({loca: this.loca,zooms: [2, 22],zIndex: 115,visible: true,opacity: 1,depth: true})linkLayer.setSource(this.pLineSource)linkLayer.setStyle({unit: 'meter',dash: [300, 0, 300, 0],lineWidth: function() {return [20, 20]},height: function(index, feat) {return feat.distance / 3 + 10},smoothSteps: 200,speed: function(index, prop) {return 50 * index + Math.random() * 200},flowLength: 500,lineColors: function(index, feat) {return ['rgba(104, 68, 254, 0.0)', 'rgba(104, 68, 254, 1.0)', '#0089FF']},maxHeightScale: 0.5, // 弧頂位置比例headColor: 'rgba(255, 255, 204, 1)', //trailColor: 'rgba(255, 255, 255, 1.0)'}) }

效果

代碼總覽

涉及的文件如下（具體參考代碼）：

|-- public|-- data|-- huadu.geojson|-- huadu_line.geojson |-- src|-- components|-- map|-- locaPoint.vue|-- views|-- amapLocaTest // 實(shí)例所在|-- index.vue|-- index.scss|-- index.js

代碼

按代碼總覽的目錄去代碼里找著看就行了。

總結(jié)

高德的飛線，不能給線、脈沖加陰影，缺少比較炫的特效，功能比較少，真的如文檔所說，用來表達(dá)數(shù)據(jù)的朝向而已。

總結(jié)

以上是生活随笔為你收集整理的Vue高德地图Loca 2.0飞线功能初体验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。