百度地图之边绑定

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

什么事边绑定 Edge Bundling

• 虽然点-线图提供了直观的可视化，但是当数据存在大量节点和边时，视觉混乱很快成为严重的问题。点-线图中的视觉混乱通常是边缘拥塞的直接结果，诸多研究者设计了各种通过优化边的方式减轻上述视觉混乱，其中边绑定（Edge Bundling）方法被广泛研究和应用
• 边绑定能够有效的减少在图绘制中边的混乱程度。它能够提供给用户复杂连接图的全局概览，同时通过边的粗细与颜色深度也可以提供给用户图中主要连接关系的信息
• 比如我们想实现下面这个例子，500多条点-线 最后终点在一个点上，就要使用边绑定

让我们一起来看看是怎么实现的嗷～ 总体也是分为三步

• 初始化地图

function initBMap(){
    var cityCenter = mapv.utilCityCenter.getCenterByCityName('南京');
    var map = initMap({
            tilt: 0,
            center: [cityCenter.lng, cityCenter.lat],
            zoom: 6,
            style: purpleStyle
    })
    return map;
  }

• 准备数据
  1. 点数据源

      var nodeData = [
       {
         x:targetCity.lng,
         y:targetCity.lat
       }
       ......
     ];
     

2. 边数据源

 var edgeData = [{
       source:0,
       target:0
     }
     ...
  ];

• 代表从source 到 target

3. r = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData);我们可以拿到一系列关于点的二维数组

  for(var i=0;i<results.length;i++ ){
       var line = results[i];
       console.log(line);
       var coordinates = [];
       for(var j=0;j<line.length;j++){
         coordinates.push([ line[j].x,line[j].y ]) 
       }
       data.push({
           geometry: {
               type: 'LineString',
               coordinates
           },
         });
     }

• 绘制数据源
  1. 初始化图层
  • var view = new mapvgl.View({map});

  2. 初始化飞线对象

     var lineLayer = new mapvgl.LineLayer({ color: 'rgba(55, 50, 250, 0.3)', blend:'lighter' })

  3. linePointLayer 这个是运动的小点

  • size点的大小
  • speed 点运动的速度
  • color 点的颜色
  • animationType点的动画类型
  • shapeType点的形状
  • blend 点交汇的处理方式