使用的數據還是來自echarts，模擬了全國各地到湖南重點景區的客流情況。

分析
要實現動態遷徙圖的效果，主要需解決兩個問題
??? 曲線的繪制。因為給出的數據只有起點和終點兩個點位，所以想要繪制曲線可以參考turf中的bezier曲線生成API。
??? 點跡的動畫播放。仍然要依靠render機制，這里我還是使用比較熟悉的postrender事件回調函數。
實現
首先利用turf做一個利用兩個點就可以生成弧線要素的函數，其實這里面調用的是turf的bezierSpline，寫死了一個定比例取到的點位，參數列表為要素的自定義屬性留了位置。同時在函數里計算出曲線的長度待用。?

function getTurfArcFeature(start, end, opt) { var line = turf.lineString([ start, [start[0] + (end[0] - start[0]) * 0.5, start[1] + (end[1] - start[1]) * 0.65], end ]); var curved = turf.bezierSpline(line); let length = turf.length(curved, { units: 'meters' }); var bF = turfFormat.readFeature(curved); bF.getGeometry().transform('EPSG:4326', 'EPSG:3857'); bF.setProperties(opt); bF.set("length", length); return bF;}

然后重點分析一下點位動畫的實現：

先寫出監聽postrender事件回調函數的基本框架，并取得VectorContex對象的句柄：

tileLayer.on('postrender', (evt) => { let veContext = getVectorContext(evt); })

再寫出遍歷所有曲線的forEach結構及回調函數，回調函數內先將本次迭代的曲線繪制到地圖上：

tileLayer.on('postrender', (evt) => { let veContext = getVectorContext(evt); arcLinesFeature.forEach((item,index) => { veContext.drawFeature(item, arcStyle); }) })

然后通過frameState獲取當前幀的時間戳，計算得到當前幀運動點位的位置百分比，如果百分比超過100%還要進行歸零處理

tileLayer.on('postrender', (evt) => { let veContext = getVectorContext(evt); arcLinesFeature.forEach((item,index) => { veContext.drawFeature(item, arcStyle); let time = (evt.frameState.time - item.get('start')) / 1000; let frac = time / 5-index/arcLinesFeature.length; if (!item.get('start')) item.set('start', new Date().getTime()); if (frac>=1) { item.set('start', new Date().getTime()); frac=0; } }) })

最后根據位置百分比，使用getCoordinateAt求得點位的坐標，并且使用VectorContex對象繪制到canvas上，然后顯示調用render()函數，請求渲染下一幀。

tileLayer.on('postrender', (evt) => { let veContext = getVectorContext(evt); arcLinesFeature.forEach((item,index) => { veContext.drawFeature(item, arcStyle); let time = (evt.frameState.time - item.get('start')) / 1000; let frac = time / 5-index/arcLinesFeature.length; if (!item.get('start')) item.set('start', new Date().getTime()); if (frac>=1) { item.set('start', new Date().getTime()); frac=0; } let along = item.getGeometry().getCoordinateAt(frac); let pF=new Feature(new Point(along)); veContext.drawFeature(pF, dotStyle); }) map.render()})

完整代碼

(刪掉了我自己的Google開發者Key，黑色主題地圖還請自己動手做一個)

import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ';import Point from 'ol/geom/Point';import VectorSource from 'ol/source/Vector';import VectorLayer from 'ol/layer/Vector';import Feature from 'ol/Feature';import * as turf from '@turf/turf'import GeoJSON from 'ol/format/GeoJSON'import { getVectorContext } from 'ol/render';import Style from 'ol/style/Style';import Stroke from 'ol/style/Stroke';import Fill from 'ol/style/Fill';import CircleStyle from 'ol/style/Circle';import data from './data/t.json' let tileLayer = new TileLayer({ source: new XYZ({ url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i451159038!3m14!2szh-CN!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcC5oOiNmZjFhMDB8cC5pbDp0cnVlfHAuczotMTAwfHAubDozM3xwLmc6MC41LHMudDo2fHMuZTpnfHAuYzojZmYyRDMzM0M!4e0&key=&token=126219' })})let map = new Map({ target: 'map', layers: [ tileLayer ], view: new View({ center: [11936406.337013, 3786384.633134], zoom: 5 })}); var flightSource = new VectorSource()var flightLayer = new VectorLayer( { source: flightSource })var turfFormat = new GeoJSON(); function getTurfArcFeature(start, end, opt) { var line = turf.lineString([ start, [start[0] + (end[0] - start[0]) * 0.5, start[1] + (end[1] - start[1]) * 0.65], end ]); var curved = turf.bezierSpline(line); let length = turf.length(curved, { units: 'meters' }); var bF = turfFormat.readFeature(curved); bF.getGeometry().transform('EPSG:4326', 'EPSG:3857'); bF.setProperties(opt); bF.set("length", length); return bF;} map.addLayer(flightLayer) var arcStyle = new Style({ stroke: new Stroke({ color: [0, 122, 122, 0.7], width: 1 })}) var dotStyle = new Style({ image: new CircleStyle({ fill: new Fill({ color: [255, 255, 255,0.7] }), radius: 1 })}) var arcLinesFeature = [];data.moveLines.forEach((item, index) => { let tempF = getTurfArcFeature(item.coords[0], item.coords[1], { 'from': item.fromName, 'to': item.toName }); arcLinesFeature.push(tempF);}) tileLayer.on('postrender', (evt) => { let veContext = getVectorContext(evt); arcLinesFeature.forEach((item,index) => { veContext.drawFeature(item, arcStyle); let time = (evt.frameState.time - item.get('start')) / 1000; let frac = time / 5-index/arcLinesFeature.length; if (!item.get('start')) item.set('start', new Date().getTime()); if (frac>=1) { item.set('start', new Date().getTime()); frac=0; } let along = item.getGeometry().getCoordinateAt(frac); let pF=new Feature(new Point(along)); veContext.drawFeature(pF, dotStyle); }) map.render()})

【OpenLayers】OpenLayers概述

【OpenLayers】實現簡單的地圖顯示

【OpenLayers】地圖控件之縮放控件

【OpenLayers】歸屬控件與全屏控件

【OpenLayers】地圖控件之坐標拾取控件和鷹眼控件

【OpenLayers】地圖控件之旋轉控件與比例尺控件

【OpenLayers】實現圖層切換控件

【OpenLayers】多源數據加載之數據組織

【OpenLayers】多源數據加載之瓦片地圖原理一

【OpenLayers】多源數據加載之瓦片地圖原理二

【OpenLayers】多源數據加載之用最簡單的方式加載瓦片地圖

【OpenLayers】多源數據加載之使用XYZ的方式加載瓦片地圖

【OpenLayers】多源數據加載之詳解OpenLayers的瓦片坐標系

【OpenLayers】多源數據加載之離線瓦片地圖

【OpenLayers】多源數據加載之矢量地圖

【OpenLayers】多源數據加載之WMS(一)

【OpenLayers】多源數據加載之WMS(二)

【OpenLayers】多源數據加載之矢量切片

【OpenLayers】多源數據加載之WMTS

【OpenLayers】圖形繪制之設置圖形的樣式

【OpenLayers】圖形繪制之編輯圖形

【OpenLayers】使用GeoJSON數據渲染熱力圖

【OpenLayers】實現“上一視圖”、“下一視圖”的視圖切換功能

【OpenLayers】圖文標注

【OpenLayers】聚合標注

【OpenLayers】圖層卷簾(Layer Swipe)

【OpenLayers】Drag-and-Drop Image Vector

【OpenLayer 實戰】實現克里金插值渲染圖-Kriging

【OpenLayer 實戰】請求Geoserver帶Filter的WFS查詢

【OpenLayer 實戰】使用GeoJSON進行行政區劃剪裁(clip, not mask or filter)

END

?

請：右下點在看，右上點【···】分享

關注我

發現更多精彩

總結

以上是生活随笔為你收集整理的echarts symbol 回调函数_【OpenLayer 实战】实现仿Echarts风格的动态迁徙图/航班图的全部內容，希望文章能夠幫你解決所遇到的問題。

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