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

在 Loca 2.0 API 里看到了一個PulseLinkLayer的圖層

連接飛線圖層，可以支持弧度，寬度，過渡色等能力。 并且還支持脈沖動畫，可以表達數據的朝向。

按文檔使用了下，發現沒效果。發工單問了下，回答說文檔有，但是功能是沒有的，一周后會實現并上線使用例子？？？？？？？

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

代碼實現

具體是在 [高德開放平臺GeoHUB初用（Vue使用高德地圖Loca 2.0）](https://liyoro.com/2020/06/24/高德開放平臺GeoHUB初用（Vue使用高德地圖Loca 2.0）/) 的基礎上，用GeoHUB繪制線，然后導出一份 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 // 實例所在|-- index.vue|-- index.scss|-- index.js

代碼

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

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。