<!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>