地图可视化与飞行器轨迹仿真

/ Web前端 / 0 条评论 / 465浏览

效果如下:

confront

你可以利用这项技术完成轨迹仿真,游戏开发等等工作,简言之,这是一个很棒的 demo

使用 ECharts3 来实现飞行器轨迹模拟。

使用百度地图作为地图,完全在真实的地形仿真飞行器轨迹。

地图可视化

这里我们使用百度地图作为图层,百度地图优势在于:

1. 官方文档详细

2. 功能强大

由于百度地图api的强大,我们基于百度地图可以实现很多功能。

因为开发百度地图需要 keys ,当然,在百度地图开发者平台官网就可以申请到。

ejYIGZbTcyvBK3UW2sGLiW28OUxQOonK
0UqXGL98FSmi22w2Rl6HK56I
<script src="bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0UqXGL98FSmi22w2Rl6HK56I"></script>
<script src="jquery.js"></script>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            margin: 0;
        }

        #main {
            height: 100%;
        }

        .anchorBL {
            display: none;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>

地图将会加载到 id 为 main 的 div 标签之中。

轨迹仿真

这里我们使用 Echarts3 做仿真飞行器轨迹。

<script src="echarts.js"></script>
var myChart = echarts.init(document.getElementById('main'));

// 坐标 json
var geoCoordMap = {
    '1base_0': [112.13039541423717, 41.086800413550378],
    '1base_1': [112.39844529660478, 36.700474186787787],
    '1base_2': [117.910088546946, 40.247265396041591],
    '1base_3': [108.79623449425317, 38.553297720401225],
    '1base_4': [103.19964187938167, 38.518472011132644],
    '1base_5': [105.26430875368148, 30.872636325460263],
    '1base_6': [124.12748478011511, 39.509346174191073],
    '1base_7': [130.03595061349387, 32.197883666568934],
    '1base_8': [110.8597113351978, 37.840329437635198],
    '1base_9': [120.67581989495554, 33.067290684310613],

    '2base_0': [105.52666056811864, 40.981144337632337],
    '2base_1': [88.35687043256182, 41.606441189779559],
    '2base_2': [84.679145219431931, 43.245772969533284],
    '2base_3': [95.481135995466673, 46.184568275829641],
    '2base_4': [80.36362428405215, 39.478457232754117],
    '2base_5': [74.413850942583778, 49.221026361716312],
    '2base_6': [79.899425459570068, 43.525867237380005],
    '2base_7': [94.538396084001945, 44.122091668818385],
    '2base_8': [87.882145866097986, 40.621334226855829],
    '2base_9': [71.548083242725895, 42.843024307757716]
};

// 轨迹 json 这里有三种轨迹
var BJData = [
    [{name: '1base_0'}, {name: '2base_9', value: 95}],
    [{name: '1base_0'}, {name: '2base_9', value: 90}],
    [{name: '1base_0'}, {name: '2base_9', value: 80}],
    [{name: '1base_0'}, {name: '2base_9', value: 70}],

];

var SHData = [
    [{name: '2base_9'}, {name: '1base_1', value: 60}],
    [{name: '2base_5'}, {name: '1base_1', value: 50}],
    [{name: '2base_5'}, {name: '1base_1', value: 40}],
    [{name: '2base_5'}, {name: '1base_1', value: 30}]
];

var GZData = [
    [{name: '1base_2'}, {name: '2base_6', value: 20}],
    [{name: '1base_2'}, {name: '2base_6', value: 10}],
    [{name: '1base_2'}, {name: '2base_6', value: 10}],
    [{name: '1base_2'}, {name: '2base_6', value: 10}]
];

// 飞行器图标 --- 矢量图
var planePath = 'arrow';

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

// 轨迹颜色
var color = ['#c80f0f', '#1c52ff', '#49e936'];

var series = [];
[['A', BJData], ['B', SHData], ['C', GZData]].forEach(function (item, i) {
    series.push({
            name: item[0] + ' Top10',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 1,
            effect: {
                show: false,
                period: 6,
                trailLength: 0.7,
                color: '#fff',
                symbolSize: 3
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {
            name: item[0] + ' Top10',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
            },
            lineStyle: {
                normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2
                }
            },
            data: convertData(item[1])
        },
        {
            name: item[0] + ' Top10',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: false,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: function (val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: color[i]
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        });
});

option = {
    backgroundColor: '#404a59',
    // 标题
    title: {
        text: '模拟',
        subtext: '数据纯属虚构',
        left: 'center',
        textStyle: {
            color: '#08090b'
        }
    },
    // 工具箱
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'top',
        left: 'right',
        // data: ['battle1 Top10', 'battle2 Top10', 'battle3 Top10'],
        // data: ['a Top10', 'b Top10', 'c Top10'],
        textStyle: {
            color: '#08090b'
        },
        selectedMode: 'single'
    },
    dataRange: {
        min: 0,
        max: 100,
        x: 'right',
        calculable: true,
        color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
        textStyle: {
            color: '#fff'
        }
    },

    // 百度地图
    bmap: {
        mapType: BMAP_HYBRID_MAP,
        center: [115.97, 29.71],
        zoom: 5,
        roam: true,
        addControl: true
    },

    series: series
};

myChart.setOption(option);