Flight path on Maptalksecharts lines3D配置项内容和展示

data from uber/deck.gl ;copy from @pissang

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

$.get('/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({
        maptalks3D: {
            center: [0, 51.5],
            zoom: 6,
            pitch: 60,
            altitudeScale: 5,
            urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            postEffect: {
                enable: true,
                bloom: {
                    intensity: 0.4
                }
            }
        },
        series: [{
            type: 'lines3D',
            coordinateSystem: 'maptalks3D',
            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
        }]
    });
});


/**
 * 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;
}


window.addEventListener('resize', function() {
    myChart.resize();
});