Echart3地图实现全球攻击态势感知图

Echart3地图实现全球攻击态势感知图（一）

背景介绍：根据echart3模拟迁徙图官网的构造，掌握如何在地理位置坐标系中通过lines曲线图和effectScatter气泡图做攻击模拟展示。

项目实现方案：
1.构造世界地图通过geo地理坐标系的方式构造地图而不是echart2中采用maptype的方式，代码如下：

//echart代码
series : [{
            name: '世界地图',
            type: 'map',
            mapType: 'world',

//echarts3代码
geo: {
            map: geoMap,
            roam: true,
            nameMap: nameMap,
            label: {
                emphasis: {
                    show: true,
                    textStyle: {
                        color: "#fff"
                    }
                }
            },
            selectedMode : 'single',
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#404a59'
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                        }], false),
                    areaColor: '#2a333d'
                }
            },
            silent: false
        },

2.通过series系列的lines和effectScatter两个系列模拟攻击发起者和受攻击者，lines有effect特性属性控制lines展现形式，从而帮助我构造攻击的方向展示，具体series构造代码如下：

series: [{
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 1,
            effect: {  //线的特效
                show: true,
                period: 4,
                //constantSpeed: 25,
                trailLength: 0.2,
                //loop: false,
                symbol: planePath,
                symbolSize: 10
            },
            // symbol: ["circle",'none'], //标记线两端样式
            // symbolSize: [20,],
            lineStyle: {
                normal: {
                    //color: color[i],
                    color: function(params){
                        //debugger;
                        var _value = option.series[1].data[params.dataIndex].value[2]
                        if(_value >= 90){
                            return 'red';
                        }else if(_value >= 70 && _value < 90){
                            return 'orange';
                        }else if(_value >= 50 && _value < 70){
                            return 'yellow';
                        }else if(_value >= 30 && _value < 50){
                            return 'green';
                        }else if(_value >= 10 && _value < 30){
                            return 'blue';
                        }else {
                            return 'purple';
                        }
                    },
                    width: 1,
                    opacity: 0.1,
                    //shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    curveness: 0.2
                }
            },
            data: []
        },{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                scale: 6, //缩放比例
                brushType: 'stroke' //实心空心圆
            },
            symbolSize: function (val) {
                return val[2] / 8;
            },
            itemStyle: { 
                normal: {
                    color: function(params){
                        return "#31ebf7";
                        // var _value = params.value[2];
                        // if(_value >= 90){
                        //  return 'red';
                        // }else if(_value >= 70 && _value < 90){
                        //  return 'orange';
                        // }else if(_value >= 50 && _value < 70){
                        //  return 'yellow';
                        // }else if(_value >= 30 && _value < 50){
                        //  return 'green';
                        // }else if(_value >= 10 && _value < 30){
                        //  return 'blue';
                        // }else {
                        //  return 'purple';
                        // }
                    }
                }
            },
            data: []
        }]

以上代码在构造lines和effectScatter系列时初始化的数据都为空从后台读取数据后动态赋值的过程。
3.通过初始化函数构造态势感知图，首先加载坐标数据，实例化echart对象，设置option属性，向后台发送ajax请求得到实时攻击数据。

//初始化世界地图
function initMap(){
    // 加载坐标数据
    getCoord();
    // 基于准备好的dom，初始化echarts图表
    mapWorldChart = echarts.init(document.getElementById('gisDisplay'));
    worldOption = getOption(worldOption, "world");
    mapWorldChart.setOption(worldOption);
    $.ajax({
        type: "POST",
        url: prePath + "map/worldMap.queryWorldMapData.json",
        async:true,
        success: function(transData){
            // 记录地图本次加载的数据
            transData = JSON.parse(transData);              
            areaInfo = transData.data;
            onloadMapData(0);
        }
    });

}

4，通过$.ready()函数页面加载完成后调用过程如下：

    //初始化地图
    setTimeout("initMap()", 100);
    //添加geo地理坐标系地图响应事件
    setTimeout("geoClick()", 150);
    // 5秒后递归调用刷新数据
    setTimeout("loadLoopMapData()", 20100);

关于实时攻击数据处理问题，后续会补充，谢谢！！！