美国各个机场的航线图

地图

美国各个机场的航线图

带航线图的地图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>美国各个机场的航线图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/usa.geo.json', function(mapData) {
    var map = [];
    var features = mapData.features;
    // 获取出所有的地图区域名称
    for (var i = 0; i < features.length; i++) {
      var name = features[i].properties.name;
      map.push({
        "name": name
      });
    }
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      animate: false,
      padding: 0
    });
    chart.tooltip({
      showTitle: false
    });
    // 同步度量
    chart.scale({
      longitude: {
        max: -66,
        min: -125,
        sync: true
      },
      latitude: {
        max: 50,
        min: 24,
        sync: true
      }
    });
    chart.axis(false);
    chart.legend('trend', {
      position: 'left'
    });
    var mapDv = new DataSet.View().source(mapData, {
      type: 'GeoJSON'
    });
    mapDv.transform({
      type: 'map',
      callback: function callback(row) {
        row.code = row.properties.code;
        return row;
      }
    });
    var bgView = chart.view();
    bgView.source(mapDv);
    bgView.tooltip(false);
    bgView.polygon().position('longitude*latitude').style({
      fill: '#DDDDDD',
      stroke: '#b1b1b1',
      lineWidth: 0.5,
      fillOpacity: 0.85
    });

$.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/flights-airport.json', function(flights) {
      var countByAirport = {};
      var subFlights = [];
      // 计算飞机的起飞、降落数
      flights.forEach(function(flight) {
        var origin = flight.origin,
          destination = flight.destination;
        countByAirport[origin] = (countByAirport[origin] || 0) + 1;
        countByAirport[destination] = (countByAirport[destination] || 0) + 1;
      });
      $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/airport.json', function(airports) {
        // Only consider airports with at least one flight.
        var airportByIata = {};
        airports = airports.filter(function(airport) {
          airportByIata[airport.iata] = airport;
          if (countByAirport[airport.iata]) {
            airport.count = countByAirport[airport.iata]; // 加入班次数量
            airport.id = airport.iata;
            return true;
          }
        });
        flights.forEach(function(flight) {
          var origin = airportByIata[flight.origin];
          var destination = airportByIata[flight.destination];
          flight.longitude = [origin.longitude, destination.longitude];
          flight.latitude = [origin.latitude, destination.latitude];
        });
        var airView = chart.view();
        airView.source(airports);
        airView.point().position('longitude*latitude').color('rgb(97,145,185)').shape('circle').style({
          stroke: '#eee',
          lineWidth: 1
        }).size('count', [3, 18]).tooltip('iata*count');
        var flightView = chart.view(); // 飞行路线
        flightView.tooltip(false);
        flightView.source(subFlights);
        flightView.edge().position('longitude*latitude');
        chart.render();

var preId;
        chart.on('plotmove', function(ev) {
          var records = airView.getSnapRecords({
            x: ev.x,
            y: ev.y
          });
          if (records.length) {
            var obj = records[0]._origin;
            var iata = obj.iata;
            if (preId !== iata) {
              subFlights = getFlights(iata);
              flightView.changeData(subFlights);
              preId = iata;
            }
          }
        });
        chart.on('plotleave', function() {
          if (subFlights.length) {
            subFlights = [];
            flightView.changeData([]);
          }
        });
      });
    });
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>美国各个机场的航线图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/usa.geo.json', function(mapData) {
    var map = [];
    var features = mapData.features;
    // 获取出所有的地图区域名称
    for (var i = 0; i < features.length; i++) {
      var name = features[i].properties.name;
      map.push({
        "name": name
      });
    }
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      animate: false,
      padding: 0
    });
    chart.tooltip({
      showTitle: false
    });
    // 同步度量
    chart.scale({
      longitude: {
        max: -66,
        min: -125,
        sync: true
      },
      latitude: {
        max: 50,
        min: 24,
        sync: true
      }
    });
    chart.axis(false);
    chart.legend('trend', {
      position: 'left'
    });
    var mapDv = new DataSet.View().source(mapData, {
      type: 'GeoJSON'
    });
    mapDv.transform({
      type: 'map',
      callback: function callback(row) {
        row.code = row.properties.code;
        return row;
      }
    });
    var bgView = chart.view();
    bgView.source(mapDv);
    bgView.tooltip(false);
    bgView.polygon().position('longitude*latitude').style({
      fill: '#DDDDDD',
      stroke: '#b1b1b1',
      lineWidth: 0.5,
      fillOpacity: 0.85
    });

图表简介

带航线图的地图

了解更多

图表用法

用于查看地理位置信息之上定义的关系图

关联图表

地图

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

关联图表

相关链接