Echart3 맵의 글로벌 공격 태세 인식

Echart3 맵으로 전 세계 공격 태세 감지도 구현(一)

배경 소개:echart3 시뮬레이션 이동도 홈페이지의 구조에 따라 지리적 위치 좌표계에서 라인 곡선도와 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. 시리즈 시리즈의 라인과 effectScatter 두 시리즈를 통해 아날로그 공격 발기자와 공격받는 사람을 시뮬레이션한다. 라인은 effect 특성 속성 제어 라인의 표현 형식을 가지고 공격의 방향 전시를 도와준다. 구체적인 시리즈 구조 코드는 다음과 같다.

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);

실시간 공격 데이터 처리 문제에 대해 후속으로 보충, 감사합니다!!!