public/data-gl/lines3d-flight-path-on-mapbox.js

/*
title: Flight path on Mapbox
category: lines3D
titleCN: Flight path on Mapbox
*/

// 数据来自 https://uber.github.io/deck.gl/#/examples/core-layers/line-layer

mapboxgl.accessToken = 'pk.eyJ1IjoicGlzc2FuZyIsImEiOiJjaXBnaGYxcW8wMDFodWNtNDc4NzdqMWR2In0.4XUWeduDltiCbsIiS-U8Lg';


$.get(ROOT_PATH + '/asset/get/s/data-1497886591658-rJOKkdH7W.txt', function (text) {

    var data = decodeFlightPathData(text);

    var dataAll = [];
    for (var i = 0; i < 4; i++) {
        dataAll = dataAll.concat(data.map(function (item) {
            return {
                name: item.name,
                coords: item.coords.map(function (coord) {
                    return coord.slice();
                })
            };
        }));
    }

    myChart.setOption({
        mapbox: {
            center: [0, 51.5],
            zoom: 8,
            pitch: 60,
            altitudeScale: 5,
            style: 'mapbox://styles/mapbox/dark-v9',
            postEffect: {
                enable: true,
                bloom: {
                    intensity: 0.4
                }
            }
        },
        series: [{
            type: 'lines3D',

            coordinateSystem: 'mapbox',

            effect: {
                show: true,
                constantSpeed: 40,
                trailWidth: 2,
                trailLength: 0.15,
                trailOpacity: 1
            },

            blendMode: 'lighter',

            polyline: true,

            lineStyle: {
                width: 1,
                color: 'rgb(50, 60, 170)',
                opacity: 0.1
            },

            data: dataAll
        }]
    });

    window.addEventListener('keydown', function () {
        myChart.dispatchAction({
            type: 'lines3DToggleEffect',
            seriesIndex: 0
        });
    });
});


/**
 * https://github.com/mapbox/polyline
 *
 * Decodes to a [longitude, latitude] coordinates array.
 *
 * This is adapted from the implementation in Project-OSRM.
 *
 * @param {String} str
 * @param {Number} precision
 * @returns {Array}
 *
 * @see https://github.com/Project-OSRM/osrm-frontend/blob/master/WebContent/routing/OSRM.RoutingGeometry.js
 */
function decodePolyline(str, precision) {
    var index = 0;
    var lat = 0;
    var lng = 0;
    var coordinates = [];
    var shift = 0;
    var result = 0;
    var byte = null;
    var latitude_change;
    var longitude_change;
    var factor = Math.pow(10, precision || 5);

        // Coordinates have variable length when encoded, so just keep
        // track of whether we've hit the end of the string. In each
        // loop iteration, a single coordinate is decoded.
    while (index < str.length) {

        // Reset shift, result, and byte
        byte = null;
        shift = 0;
        result = 0;

        do {
            byte = str.charCodeAt(index++) - 63;
            result |= (byte & 0x1f) << shift;
            shift += 5;
        } while (byte >= 0x20);

        latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

        shift = result = 0;

        do {
            byte = str.charCodeAt(index++) - 63;
            result |= (byte & 0x1f) << shift;
            shift += 5;
        } while (byte >= 0x20);

        longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

        lat += latitude_change;
        lng += longitude_change;

        coordinates.push([lng / factor, lat / factor]);
    }

    return coordinates;
}

function decodeFlightPathData(text) {
    var lines = text.split('\n');

    var result = [];

    lines.forEach(function(line) {

        if (!line) {
            return;
        }

        var parts = line.split('\t');
        var coords0 = parts[2].split('\x01').map(function(str) { return decodePolyline(str, 5) });
        var coords1 = parts[3].split('\x01').map(function(str) { return decodePolyline(str, 1) });

        var coords = [];
        coords0.forEach(function(lineStr, i) {
            for (var j = 1; j < lineStr.length; j++) {
                var prevPt0 = coords0[i][j - 1],
                    prevPt1 = coords1[i][j - 1],
                    currPt0 = coords0[i][j],
                    currPt1 = coords1[i][j];

                coords.push(
                    [prevPt0[0], prevPt0[1], prevPt1[0]],
                    [currPt0[0], currPt0[1], currPt1[0]]
                );
            // result.push({
            //     name: parts[0],
            //     country: parts[1],
            //     start: [prevPt0[0], prevPt0[1], prevPt1[0]],
            //     end: [currPt0[0], currPt0[1], currPt1[0]]
            // });
            }
        });

        result.push({
            name: parts[0],
            country: parts[1],
            coords: coords
        });
    });
    return result;
}