OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图

这是一个做完很久的demo，主要还是为了摆脱echarts那种“图层脱线”的问题，提升可视化渲染性能。

使用的数据还是来自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()
})

完整代码

 更多请见：http://www.mark-to-win.com/tutorial/175094.html