在地图上轻松绘制时序数据

首先，什么是时序数据，比如一天二十四小时每个小时杭州市各个区域的人流分布，一天二十四小时每个小时地铁乘坐人数，这些随时间存在连续性变化的，能反映一定趋势的数据就是时序数据。

时序数据的绘制有两个特点，一个是为了反映趋势，所以数据量会比较大，二是需要支持实时的播放切换，以满足动画的效果。因此需要为了满足以上两个要求，绘制时序数据的代码需要足够的性能才能达到较好的效果。

下面我们介绍如何使用 antv/l7 绘制某城市的 24 小时各公交站点需求的 OD 数据（113880 条数据）。

​

首先我们创建一个点图层用于绘制地图上的点，然后我们通过更新图层的数据来实现时序数据的切换。在这里提高性能的关键是我们需要提前计算图层在绘制时使用的顶点数据，而不是在切换的时候实时计算顶点数据。

 fetch(
    'https://gw.alipayobjects.com/os/bmw-prod/82d85bb6-db7c-4583-af26-35b11c7b2d0d.json'
  )
    .then(res => res.json())
    .then(originData => {
      timeKeys = Object.keys(originData);
      layer = new PointLayer({}) // 用于显示的点图层
        .source(originData[currentTimeKey], parser)
        .shape('simple')
        .size('v', v => Math.sqrt(v) / 5)
        .color('v', [
          '#ffffb2',
          '#fed976',
          '#feb24c',
          '#fd8d3c',
          '#f03b20',
          '#bd0026'
        ])
        .style({
          opacity: 0.6
        });

      scene.addLayer(layer);

      getModelDatas(originData); // 提前计算各个时间端需要的顶点数据
      return '';
    });

function getModelDatas(originData) {
  timeKeys.map(timeKey => {
    modelDatas[timeKey] = layer.createModelData(originData[timeKey], parser);
    return '';
  });
}

在上述的代码中，核心方法就是 layer.createModelData，用户通过这个方法可以提前计算并存储图层所需的顶点数据。

为了使用我们提前计算存储的顶点数据，我们使用 layer.updateModelData 方法

function updateTime() {
  if (layer && scene) {
    layer.updateModelData(modelDatas[currentTimeKey]);
    scene.render();
  }
}

// 时间轴的触发逻辑
    $(document).mousemove(function(e) { // 鼠标移动
      if (tag) {
        left = e.pageX - ox;
        currentTimeKey = setText(left, barWidth);
        updateTime();
      }
    });

    $('.progress_bg').click(function(e) { // 鼠标点击
      if (!tag) {
        bgleft = $('.progress_bg').offset().left;
        left = e.pageX - bgleft;
        currentTimeKey = setText(left, barWidth);
        updateTime();
      }
    });

大家可以查看在线案例： 在线案例

同样的，我们通过使用的相同的方法还可以得到时序的热力图变化效果：下图是某区域 12 小时的人流动变化的时序效果（20万数据）

​

日常硬广：欢迎大家给 L7 PR！Issue！Star！

github.com/antvis/L7​g…

日常硬广2：欢迎搜索加入钉钉群：32292906