| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Globe DOF - ECHARTS-GL</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS --> |
| <link rel="stylesheet" href="../common/reset.css"> |
| </head> |
| <body> |
| <div id="main"></div> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/map/js/world-simp.js"></script> |
| <script src="../common/jquery.min.js"></script> |
| <script src="../common/echarts-gl.js"></script> |
| <script src="../data/flights.json.js"></script> |
| <script> |
| var chart = echarts.init(document.getElementById('main')); |
| |
| $.getJSON('../data/flights2.json', function (data) { |
| var airports = data.airports.map(function (item) { |
| return { |
| coord: [item[3], item[4]] |
| } |
| }); |
| function getAirportCoord(idx) { |
| return [data.airports[idx][3], data.airports[idx][4]]; |
| } |
| |
| // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex] |
| var routesGroupByAirline = {}; |
| data.routes.forEach(function (route) { |
| var airline = data.airlines[route[0]]; |
| var airlineName = airline[0]; |
| if (!routesGroupByAirline[airlineName]) { |
| routesGroupByAirline[airlineName] = []; |
| } |
| routesGroupByAirline[airlineName].push(route); |
| }); |
| |
| var pointsData = []; |
| data.routes.forEach(function (airline) { |
| pointsData.push(getAirportCoord(airline[1])); |
| pointsData.push(getAirportCoord(airline[2])); |
| }); |
| |
| var series = data.airlines.map(function (airline) { |
| var airlineName = airline[0]; |
| var routes = routesGroupByAirline[airlineName]; |
| |
| if (!routes) { |
| return null; |
| } |
| return { |
| type: 'lines3D', |
| name: airlineName, |
| |
| effect: { |
| show: true, |
| trailWidth: 2, |
| trailLength: 0.2, |
| trailOpacity: 0.2, |
| trailColor: [0.5, 0.5, 1] |
| }, |
| |
| lineStyle: { |
| width: 1, |
| color: 'rgb(50, 50, 150)', |
| // color: 'rgb(118, 233, 241)', |
| opacity: 0.1 |
| }, |
| blendMode: 'lighter', |
| |
| distanceToGlobe: 4, |
| |
| data: routes.map(function (item) { |
| return [airports[item[1]].coord, airports[item[2]].coord]; |
| }) |
| }; |
| }).filter(function (series) { |
| return !!series; |
| }); |
| series.push({ |
| type: 'scatter3D', |
| coordinateSystem: 'globe', |
| blendMode: 'lighter', |
| symbolSize: 2, |
| distanceToGlobe: 4, |
| itemStyle: { |
| color: 'rgb(50, 50, 150)', |
| opacity: 0.6 |
| }, |
| data: pointsData |
| }); |
| |
| chart.setOption({ |
| legend: { |
| selectedMode: 'single', |
| left: 'left', |
| data: Object.keys(routesGroupByAirline), |
| orient: 'vertical', |
| textStyle: { |
| color: '#fff' |
| } |
| }, |
| globe: { |
| |
| environment: '../texture/starfield.jpg', |
| |
| heightTexture: '../texture/bathymetry_bw_composite_4k.jpg', |
| |
| displacementScale: 0.05, |
| displacementQuality: 'high', |
| |
| baseColor: '#000', |
| |
| shading: 'realistic', |
| realisticMaterial: { |
| roughness: 0.2, |
| metalness: 0 |
| }, |
| |
| postEffect: { |
| enable: true, |
| depthOfField: { |
| enable: true, |
| quality: 'ultra', |
| blurRadius: 10 |
| } |
| }, |
| temporalSuperSampling: { |
| enable: true |
| }, |
| light: { |
| ambient: { |
| intensity: 0 |
| }, |
| main: { |
| intensity: 0.1, |
| shadow: false |
| }, |
| ambientCubemap: { |
| texture: '../texture/lake.hdr', |
| exposure: 1, |
| diffuseIntensity: 0.5, |
| specularIntensity: 2 |
| } |
| }, |
| viewControl: { |
| autoRotate: false |
| }, |
| |
| silent: true |
| }, |
| series: series |
| }); |
| window.addEventListener('keydown', function () { |
| series.forEach(function (series, idx) { |
| chart.dispatchAction({ |
| type: 'lines3DToggleEffect', |
| seriesIndex: idx |
| }); |
| }); |
| }); |
| }); |
| |
| window.addEventListener('resize', function () { |
| chart.resize(); |
| }); |
| |
| </script> |
| </body> |
| </html> |
