261Echarts - 3D 路径图(Flights GL)

简介: 261Echarts - 3D 路径图(Flights GL)
效果图

源代码
var uploadedDataURL = "data-gl/asset/data/flights.json";
app.title = '65k+ 飞机航线';
myChart.showLoading();
$.getJSON(uploadedDataURL, function(data) {
    myChart.hideLoading();
    function getAirportCoord(idx) {
        return [data.airports[idx][3], data.airports[idx][4]];
    }
    var routes = data.routes.map(function (airline) {
        return [
            getAirportCoord(airline[1]),
            getAirportCoord(airline[2])
        ];
    });
    myChart.setOption({
        geo3D: {
            map: 'world',
            shading: 'realistic',
            silent: true,
            environment: '#333',
            realisticMaterial: {
                roughness: 0.8,
                metalness: 0
            },
            postEffect: {
                enable: true
            },
            groundPlane: {
                show: false
            },
            light: {
                main: {
                    intensity: 1,
                    alpha: 30
                },
                ambient: {
                    intensity: 0
                }
            },
            viewControl: {
                distance: 70,
                alpha: 89,
                panMouseButton: 'left',
                rotateMouseButton: 'right'
            },
            itemStyle: {
                areaColor: '#000'
            },
            regionHeight: 0.5
        },
        series: [{
            type: 'lines3D',
            coordinateSystem: 'geo3D',
            effect: {
                show: true,
                trailWidth: 1,
                trailOpacity: 0.5,
                trailLength: 0.2,
                constantSpeed: 5
            },
            blendMode: 'lighter',
            lineStyle: {
                width: 0.2,
                opacity: 0.05
            },
            data: routes
        }]
    });
    window.addEventListener('keydown', function () {
        myChart.dispatchAction({
            type: 'lines3DToggleEffect',
            seriesIndex: 0
        });
    });
});


目录
相关文章
|
6天前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
6月前
echarts中矢量图片路径设置
echarts中矢量图片路径设置
|
7月前
269Echarts - GL 关系图(1w 节点 2w7 边的NPM 依赖图)
269Echarts - GL 关系图(1w 节点 2w7 边的NPM 依赖图)
31 0
|
7月前
268Echarts - GL 关系图(GraphGL - Large Internet)
268Echarts - GL 关系图(GraphGL - Large Internet)
25 0
|
7月前
|
异构计算
267Echarts - GL 关系图(GraphGL GPU Layout)
267Echarts - GL 关系图(GraphGL GPU Layout)
33 0
|
7月前
266Echarts - GL 矢量场图(Global Wind Visualization 2)
266Echarts - GL 矢量场图(Global Wind Visualization 2)
33 0
|
7月前
266Echarts - GL 矢量场图(Global wind visualization)
266Echarts - GL 矢量场图(Global wind visualization)
29 0
|
7月前
265Echarts - GL 矢量场图(Flow on the cartesian)
265Echarts - GL 矢量场图(Flow on the cartesian)
29 0
|
7月前
|
定位技术
264Echarts - GL 散点图(10 million Bulk GPS points)
264Echarts - GL 散点图(10 million Bulk GPS points)
24 0
|
7月前
262Echarts - 3D 路径图(Flights on Geo3D)
262Echarts - 3D 路径图(Flights on Geo3D)
27 0