流向图组件

效果图

用法示例

<script type="text/javascript">
   var map,baseLayer,flow;
   var city = {
     '东莞': [113.8953,22.901],
     '东营': [118.7073,37.5513],
     '中山': [113.4229,22.478],
     '临汾': [111.4783,36.1615],
     '临沂': [118.3118,35.2936],
     '丹东': [124.541,40.4242],
     '丽水': [119.5642,28.1854],
     '乌鲁木齐': [87.9236,43.5883],
     '佛山': [112.8955,23.1097],
     '保定': [115.0488,39.0948],
     '兰州': [103.5901,36.3043],
     '包头': [110.3467,41.4899],
     '北京': [116.4551,40.2539],
     '北海': [109.314,21.6211],
     '南京': [118.8062,31.9208],
     '南宁': [108.479,23.1152],
     '南昌': [116.0046,28.6633],
     '南通': [121.1023,32.1625],
     '厦门': [118.1689,24.6478],
     '台州': [121.1353,28.6688],
     '合肥': [117.29,32.0581],
     '呼和浩特': [111.4124,40.4901],
     '咸阳': [108.4131,34.8706],
     '哈尔滨': [127.9688,45.368]
   };
   function addFlowLayer(){
    if(flow){
      map.removeLayer(flow);
    }
    var data = new Array();
    var bjLatlng = [39.90973623453719, 116.4111328125];
    for(var key in city){
      data.push({//这里构造流向图所需数据结构
        from: bjLatlng, //起点
        to: [city[key][1], city[key][0]], //终点
        color: 'red', //颜色
        size: 2,
        label: key
      });
    }
    var opt = {
      infoParse: function(data){
        return "北京    ---->     " + data.label;
      },
      callback: {
        click: function(data){
          alert(data.label);
        }
      }
    };
    flow = new W.Flow(data, opt).addTo(map);      
  }
  function initMap(){
    map = W.map("mapContainer", {
     center : [35.53222622770337, 106.875],
     zoom : 5,
     serverUrl: 'http://localhost:8080/tileProxy'
   });
    addFlowLayer();
  }
  </script>

构造方法

构造属性