G2 - 美国各个机场航线图

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>美国各个机场航线图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script>
var Stat = G2.Stat;
var Frame = G2.Frame;
$.getJSON('../../../static/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({
    id: 'c1',
    forceFit: true,
    height: 450,
    animate: false,
    plotCfg: {
      margin: [40, 90, 40, 20]
    }
  });
  var defs = {
    '..long': {
      max: -66,
      min:-125
    },
    '..lant': {
      max: 50,
      min:24
    },
    '..x': {
      max: -66,
      min:-125
    },
    '..y': {
      max: 50,
      min:24
    }
  };
  chart.source(map, defs);
  chart.tooltip({
    title: null
  });
  var backView = chart.createView();
  backView.source(map);
  backView.tooltip(false); // 背景不显示tooltip
  backView.polygon().position(Stat.map.region('name', mapData)).style({
    fill: 'rgb(204,204,204)',
    stroke: '#fff',
    lineWidth: 1
  });
 // backView.render();
  $.getJSON('../../../static/data/flights-airport.json', function(flights) {
    var linksByOrigin = {},
      countByAirport = {},
      locationByAirport = {},
      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('../../../static/data/airport.json', function(airports) {

      // Only consider airports with at least one flight.
      airports = airports.filter(function(airport) {
        if (countByAirport[airport.iata]) {
          airport.count = countByAirport[airport.iata]; // 加入班次数量
          airport.x = airport.longitude;
          airport.y = airport.latitude;
          airport.id = airport.iata;
          return true;
        }
      });

      var airView = chart.createView();
      airView.source(airports);
      airView.point().position(Stat.map.location('longitude*latitude'))
             .color('rgb(97,145,185)')
             .shape('circle')
             .style({
               stroke: '#eee',
               lineWidth: 1
             })
             .size('count', 15, 3)
             .tooltip('iata*count');

      var flightView = chart.createView(); // 飞行路线
      flightView.tooltip(false);
      flightView.source(subFlights);
      flightView.edge().position(Stat.link('origin*destination', airports));
      chart.render();
      var preShape;

      function getFlights(iata) {
        var rst = [];
        flights.forEach(function(flight) {
          if (flight.origin == iata || flight.destination == iata) {
            rst.push(flight);
          }
        });
        return rst;
      }
      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(ev){
        if (subFlights.length) {
          subFlights = [];
          flightView.changeData([]);
        }
      });
    });
  });
});
</script>

      </body>
    </html>
          
        

美国各个机场航线图

带气泡的地图，其实就是气泡图和地图的结合，我们以地图为背景，在上面绘制气泡。了解更多

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>美国各个机场航线图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const MyComponent = React.createClass({
      componentDidMount: function() {
        const Stat = G2.Stat;
        const Frame = G2.Frame;

axios.get('../../../static/data/USA.geo.json').then(function (response) {
          let map = [];
          const mapData = response.data;
          const features = mapData.features;
          // 获取出所有的地图区域名称
          for(let i=0; i<features.length; i++) {
            const name = features[i].properties.name;
            map.push({
              "name": name
            });
          }

// 计算飞机的起飞、降落数
            const flights = response.data;
            flights.forEach(function(flight) {
              const origin = flight.origin,
                  destination = flight.destination;

countByAirport[origin] = (countByAirport[origin] || 0) + 1;
              countByAirport[destination] = (countByAirport[destination] || 0) + 1;
            });

axios.get('../../../static/data/airport.json').then(function (response) {
              let airports = response.data;
              // Only consider airports with at least one flight.
              airports = airports.filter(function(airport) {
                if (countByAirport[airport.iata]) {
                  airport.count = countByAirport[airport.iata]; // 加入班次数量
                  airport.x = airport.longitude;
                  airport.y = airport.latitude;
                  airport.id = airport.iata;
                  return true;
                }
              });

const airView = chart.createView();
              airView.source(airports);
              airView.point().position(Stat.map.location('longitude*latitude'))
                     .color('rgb(97,145,185)')
                     .shape('circle')
                     .style({
                       stroke: '#eee',
                       lineWidth: 1
                     })
                     .size('count', 15, 3)
                     .tooltip('iata*count');

const flightView = chart.createView(); // 飞行路线
              flightView.tooltip(false);
              flightView.source(subFlights);
              flightView.edge().position(Stat.link('origin*destination', airports));
              chart.render();
              let preShape;

chart.on('plotleave', function(ev){
                if (subFlights.length) {
                  subFlights = [];
                  flightView.changeData([]);
                }
              });
            });
          });
        });
      },
      render() {
          return (
            <div>
              <div id="chart"></div>
            </div>
          );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>