按轨迹行走的小车echarts lines配置项内容和展示

按轨迹行走的小车

      var mapStyle = {
    'styleJson': [{
            'featureType': 'water',
            'elementType': 'all',
            'stylers': {
                'color': '#031628'
            }
        },
        {
            'featureType': 'land',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'highway',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'arterial',
            'elementType': 'geometry.fill',
            'stylers': {
                'color': '#000000'
            }
        },
        {
            'featureType': 'arterial',
            'elementType': 'geometry.stroke',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'local',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'railway',
            'elementType': 'geometry.fill',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'railway',
            'elementType': 'geometry.stroke',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'subway',
            'elementType': 'geometry',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'building',
            'elementType': 'geometry.fill',
            'stylers': {
                'visibility': 'off'
            }
        },
        {
            'featureType': 'all',
            'elementType': 'labels.text.fill',
            'stylers': {
                'color': '#857f7f'
            }
        },
        {
            'featureType': 'all',
            'elementType': 'labels.text.stroke',
            'stylers': {
                'color': '#000000'
            }
        },
        {
            'featureType': 'building',
            'elementType': 'geometry',
            'stylers': {
                'color': '#022338'
            }
        },
        {
            'featureType': 'green',
            'elementType': 'geometry',
            'stylers': {
                'color': '#062032'
            }
        },
        {
            'featureType': 'boundary',
            'elementType': 'all',
            'stylers': {
                'color': '#465b6c'
            }
        },
        {
            'featureType': 'manmade',
            'elementType': 'all',
            'stylers': {
                'color': '#022338'
            }
        },
        {
            'featureType': 'label',
            'elementType': 'all',
            'stylers': {
                'visibility': 'off'
            }
        }
    ]
};
var arrpoints = [[116.403984,39.914034],[116.402106,39.913978],[116.402036,39.913978],[116.401916,39.913977],[116.401228,39.913944],[116.401008,39.913933],[116.400599,39.913921],[116.3999,39.913897],[116.399471,39.913875],[116.399292,39.913874],[116.398694,39.91385],[116.398165,39.913816],[116.397666,39.913782],[116.396231,39.913729],[116.395743,39.913705],[116.395583,39.913693],[116.395115,39.913679],[116.395025,39.913678],[116.392804,39.913593],[116.390584,39.913495],[116.38929,39.913457],[116.389201,39.913456],[116.388912,39.913462],[116.388733,39.913459],[116.388335,39.913453],[116.388266,39.913442],[116.388087,39.91345],[116.387241,39.913437],[116.386386,39.913423],[116.385899,39.913416],[116.385849,39.913415],[116.385382,39.913417],[116.384328,39.9134],[116.384169,39.913397],[116.383473,39.913385],[116.383105,39.913379],[116.38233,39.913366],[116.382327,39.913363],[116.382297,39.913363],[116.382267,39.913362],[116.381651,39.913362],[116.381492,39.913359],[116.381462,39.913358],[116.381254,39.913355],[116.381184,39.913353],[116.381055,39.913351],[116.380876,39.913348],[116.380807,39.913347],[116.380747,39.913336],[116.380668,39.913335],[116.380667,39.913334],[116.380677,39.913584],[116.380666,39.914004],[116.380606,39.914722],[116.380586,39.914882],[116.380586,39.914882],[116.380576,39.915252],[116.380556,39.915521],[116.380526,39.915831],[116.380475,39.917029],[116.380445,39.917709],[116.380435,39.918078],[116.380425,39.918168],[116.380425,39.918318],[116.380415,39.918408],[116.380405,39.918618],[116.380405,39.918788],[116.380385,39.919147],[116.380375,39.919427],[116.380365,39.919727],[116.380365,39.919806],[116.380355,39.919896],[116.380345,39.920126],[116.380343,39.920126],[116.380313,39.920775],[116.380313,39.920835],[116.380263,39.921374],[116.380223,39.921544],[116.380213,39.921913],[116.380183,39.922603],[116.380183,39.922663],[116.380173,39.922732],[116.380173,39.922792],[116.380153,39.923352],[116.380133,39.924101],[116.380153,39.924252],[116.380122,39.924761],[116.380122,39.924761],[116.380092,39.925351],[116.380062,39.92549],[116.380042,39.92591],[116.380032,39.926119],[116.380012,39.926819],[116.380012,39.926969],[116.379992,39.927548],[116.379992,39.927748],[116.379972,39.928018],[116.380001,39.928128],[116.380001,39.928488],[116.380001,39.928558],[116.379981,39.928998],[116.379961,39.930007],[116.379961,39.930087],[116.37996,39.930088],[116.37993,39.930607],[116.3799,39.931046],[116.3799,39.931126],[116.37989,39.931486],[116.379871,39.931816],[116.379861,39.932246],[116.379841,39.932545],[116.379841,39.932645],[116.379801,39.933624],[116.379751,39.934463],[116.379741,39.934653],[116.379682,39.934652],[116.379681,39.934652],[116.377962,39.934551],[116.377495,39.934532],[116.377008,39.934513],[116.376223,39.934479],[116.375349,39.934463],[116.374355,39.934455],[116.373759,39.934504],[116.373679,39.934513],[116.373679,39.934512],[116.37357,39.93427],[116.37354,39.93421],[116.37354,39.93421],[116.373381,39.934217],[116.372486,39.934261],[116.371125,39.934256],[116.370876,39.934232],[116.370876,39.934232],[116.370826,39.933891],[116.370797,39.933041],[116.370797,39.933041],[116.371642,39.933056],[116.371642,39.933056],[116.37186,39.933059],[116.37186,39.933059],[116.370797,39.933041],[116.370797,39.933041],[116.370826,39.933891],[116.370876,39.934232],[116.370876,39.934232],[116.371125,39.934256],[116.371125,39.934256],[116.371085,39.934576],[116.371115,39.934946],[116.371115,39.935006],[116.371135,39.935177],[116.371164,39.935527],[116.371145,39.935757],[116.371184,39.936107],[116.371244,39.936469],[116.371254,39.936749],[116.371254,39.937109],[116.371244,39.937219],[116.371234,39.937428],[116.371234,39.937718],[116.371234,39.937798],[116.371244,39.937959],[116.371244,39.937989],[116.371254,39.938229],[116.371254,39.938229],[116.371582,39.938245],[116.374255,39.938303],[116.374494,39.938307],[116.374573,39.938319],[116.374583,39.938439],[116.374583,39.938439],[116.374613,39.938689],[116.374693,39.939401],[116.374732,39.939902],[116.374802,39.940803],[116.374862,39.941474],[116.374872,39.941704],[116.374882,39.941945],[116.374932,39.942806],[116.374942,39.942926],[116.374942,39.943086],[116.374972,39.943606],[116.374992,39.944277],[116.374992,39.944377],[116.375002,39.944637],[116.375023,39.945728],[116.375033,39.946438],[116.375033,39.946588],[116.375033,39.946588],[116.375461,39.947666],[116.37574,39.948531],[116.37578,39.948812],[116.37578,39.949062],[116.37578,39.949542],[116.37586,39.950204],[116.37586,39.950204],[116.37588,39.950264],[116.376069,39.950898],[116.376099,39.951048],[116.376119,39.951379],[116.3761,39.951498],[116.37606,39.951938],[116.375991,39.952277],[116.375952,39.952596],[116.375684,39.953331],[116.375545,39.953699],[116.375545,39.953699],[116.376877,39.954103],[116.376936,39.954115],[116.377523,39.954275],[116.377851,39.954321],[116.377851,39.954321],[116.37793,39.954343],[116.378516,39.954414],[116.378626,39.954426],[116.378944,39.954491],[116.379689,39.954555],[116.380017,39.954581],[116.380266,39.954595],[116.380822,39.954645],[116.381458,39.954677],[116.381806,39.954693],[116.381975,39.954696],[116.382532,39.954716],[116.383029,39.954744],[116.383158,39.954747],[116.383337,39.95477],[116.383337,39.95477],[116.383605,39.954704],[116.383983,39.954681],[116.384023,39.954692],[116.384311,39.954696],[116.384699,39.954703],[116.385206,39.954721],[116.385206,39.954721],[116.385514,39.954726],[116.385514,39.954726],[116.385564,39.954637],[116.385673,39.954549],[116.385843,39.954502],[116.385842,39.954502],[116.386141,39.954366],[116.38627,39.954358],[116.386359,39.95432],[116.386479,39.954282],[116.387294,39.954135],[116.387563,39.954029],[116.387632,39.95399],[116.387732,39.953932],[116.387821,39.953873],[116.388448,39.953512],[116.388488,39.953483],[116.388488,39.953482],[116.388746,39.953336],[116.388746,39.953336],[116.388448,39.953512],[116.388398,39.953581],[116.387772,39.953982],[116.387672,39.95403],[116.387454,39.954157],[116.386857,39.954287],[116.38645,39.954351],[116.386449,39.954351],[116.38631,39.954749],[116.38631,39.954749],[116.38631,39.955049],[116.386321,39.955329],[116.38634,39.95542],[116.38642,39.955511],[116.386679,39.955765],[116.386709,39.955956],[116.38671,39.956636],[116.38671,39.956776],[116.38671,39.956876],[116.38666,39.957125],[116.386531,39.957303],[116.386531,39.957303],[116.386422,39.957522],[116.386333,39.95766],[116.386332,39.95766],[116.386164,39.957938],[116.386104,39.958147],[116.386065,39.958436],[116.386076,39.959687],[116.386086,39.959797],[116.386067,39.960337],[116.386067,39.960367],[116.386057,39.960787],[116.386048,39.961097],[116.386047,39.961097],[116.385869,39.961434],[116.385869,39.961434],[116.385859,39.961834],[116.385859,39.962114],[116.385859,39.962154],[116.385859,39.962224],[116.38586,39.962314],[116.38585,39.962544],[116.385831,39.963754],[116.385822,39.964164],[116.385852,39.964745],[116.386003,39.966548],[116.386013,39.966658],[116.386124,39.96759],[116.386124,39.96763],[116.386154,39.967811],[116.386244,39.968582],[116.386595,39.971489],[116.386594,39.971489],[116.386644,39.97186],[116.386675,39.97219],[116.386705,39.972421],[116.386725,39.972621],[116.386735,39.972711],[116.386785,39.973072],[116.386795,39.973223],[116.386825,39.973423],[116.386825,39.973463],[116.386835,39.973593],[116.386865,39.973784],[116.386875,39.973884],[116.386915,39.974175],[116.387025,39.975077],[116.387026,39.975137],[116.387106,39.975848],[116.387106,39.975848],[116.387215,39.97598],[116.387245,39.97602],[116.387335,39.976132],[116.387474,39.976284],[116.387474,39.976284],[116.387504,39.976534],[116.387524,39.976765],[116.387554,39.977005],[116.387594,39.977276],[116.387684,39.978088],[116.387724,39.978388],[116.387765,39.978829],[116.387785,39.978959],[116.387805,39.97903],[116.387865,39.979471],[116.387905,39.979911],[116.387905,39.980062],[116.387905,39.980162],[116.387936,39.981382],[116.388016,39.982064],[116.388056,39.982454],[116.388056,39.982554],[116.388056,39.982554],[116.387887,39.982832],[116.387688,39.983009],[116.387579,39.983057],[116.387579,39.983057],[116.38725,39.983062],[116.387141,39.98306],[116.386843,39.983046],[116.386127,39.983025],[116.385978,39.983022],[116.385898,39.983021],[116.38566,39.983017],[116.38388,39.982968],[116.382926,39.982941],[116.381484,39.982906],[116.380888,39.982895],[116.379298,39.982857],[116.378016,39.982823],[116.376844,39.982802],[116.376695,39.982799],[116.376516,39.982796],[116.376357,39.982793],[116.376238,39.982791],[116.376049,39.982788],[116.375453,39.982767],[116.372591,39.982655],[116.372273,39.982639],[116.372184,39.982637],[116.372184,39.982578],[116.372223,39.982498],[116.372221,39.982497],[116.372211,39.982027],[116.372191,39.981816],[116.372191,39.981536],[116.372181,39.981176],[116.372171,39.980936],[116.372171,39.980935],[116.371505,39.980924],[116.369696,39.980852],[116.367976,39.980823],[116.367727,39.980819],[116.367727,39.980819],[116.367747,39.980679],[116.367747,39.980559],[116.367588,39.980417],[116.367587,39.980416],[116.368144,39.980436],[116.368144,39.980436],[116.368184,39.980106],[116.368194,39.980016],[116.368194,39.980016],[116.36885,39.980037],[116.36885,39.980037],[116.36886,39.980048],[116.36886,39.980048],[116.368194,39.980016],[116.368194,39.980016],[116.368184,39.980106],[116.368144,39.980436],[116.368144,39.980436],[116.367587,39.980416],[116.367587,39.980416],[116.367747,39.980559],[116.367747,39.980679],[116.367727,39.980819],[116.367727,39.980819],[116.367468,39.980815],[116.367329,39.980852],[116.366603,39.980831],[116.366365,39.980827],[116.36534,39.980761],[116.365241,39.98075],[116.364833,39.980744],[116.364724,39.980742],[116.364664,39.980741],[116.364406,39.980737],[116.36364,39.980756],[116.363401,39.980753],[116.363162,39.98075],[116.362545,39.980731],[116.361759,39.980721],[116.361032,39.980701],[116.361031,39.980701],[116.361011,39.9811],[116.360962,39.98154],[116.360942,39.98183],[116.360793,39.981938],[116.360713,39.981947],[116.360026,39.981979],[116.359887,39.981937],[116.359886,39.981937],[116.359747,39.981775],[116.359577,39.981313],[116.359557,39.981163],[116.359548,39.981143],[116.359508,39.980873],[116.359497,39.979972],[116.359497,39.979903],[116.359526,39.979033],[116.359556,39.978613],[116.359565,39.978253],[116.359595,39.977813],[116.359594,39.977813],[116.359614,39.977403],[116.359663,39.976613],[116.359663,39.976383],[116.359673,39.976243],[116.359673,39.976243],[116.359683,39.976163],[116.359693,39.975923],[116.359722,39.975323],[116.359781,39.975054],[116.359752,39.974954],[116.359712,39.974843],[116.359711,39.974843],[116.359662,39.974723],[116.359562,39.974491],[116.359542,39.974441],[116.359472,39.97429],[116.359452,39.97425],[116.359313,39.973939],[116.359193,39.973697],[116.359153,39.973657],[116.359133,39.973637],[116.359084,39.973586],[116.359083,39.973586],[116.358874,39.973583],[116.358625,39.973581],[116.358256,39.973577],[116.357768,39.973572],[116.357768,39.973572],[116.35708,39.973515],[116.356532,39.97344],[116.356532,39.97344],[116.356203,39.973437],[116.355046,39.973417],[116.355046,39.973417],[116.354657,39.973414],[116.354278,39.973411],[116.348967,39.973346],[116.347038,39.973324],[116.346938,39.973324],[116.346208,39.973324],[116.345868,39.973314],[116.345568,39.973315],[116.344067,39.973307],[116.343116,39.9733],[116.341864,39.973295],[116.341143,39.973279],[116.340883,39.97327],[116.340803,39.97327],[116.340723,39.973271],[116.337786,39.973201],[116.337445,39.973194],[116.336873,39.973189],[116.334716,39.97312],[116.334715,39.973119],[116.333209,39.973066],[116.333209,39.973066],[116.332657,39.973132],[116.33118,39.973091],[116.330829,39.973136],[116.330828,39.973136],[116.330798,39.973136],[116.330407,39.973122],[116.329804,39.97311],[116.329523,39.973104],[116.329211,39.973088],[116.328096,39.972995],[116.327864,39.972958],[116.327864,39.972958],[116.327613,39.973592],[116.327503,39.973864],[116.327312,39.974337],[116.327112,39.97477],[116.327062,39.974881],[116.326961,39.975122],[116.326741,39.975686],[116.32674,39.975686],[116.32654,39.976159],[116.326229,39.976965],[116.325968,39.977589],[116.325747,39.978153],[116.325596,39.978115],[116.325596,39.978115],[116.325646,39.977984],[116.325727,39.977803],[116.325947,39.977249],[116.326419,39.976052],[116.32661,39.975578],[116.326489,39.97557],[116.326489,39.97557],[116.326298,39.975553],[116.325664,39.975493],[116.325664,39.975493],[116.325654,39.975633],[116.325654,39.975633],[116.325524,39.975736],[116.325323,39.975829],[116.325112,39.975842],[116.324991,39.975834],[116.324418,39.975804],[116.323784,39.975795],[116.323784,39.975794],[116.323714,39.976206],[116.323704,39.976406],[116.323704,39.976506],[116.323684,39.976596],[116.323684,39.976596],[116.322386,39.976529],[116.321873,39.976498],[116.320716,39.976438],[116.320646,39.976429],[116.319821,39.976384]];


function getAngle(n, next) {
    var ret
    var w1 = n[1] / 180 * Math.PI
    var j1 = n[0] / 180 * Math.PI

    var w2 = next[1] / 180 * Math.PI
    var j2 = next[0] / 180 * Math.PI

    ret = 4 * Math.pow(Math.sin((w1 - w2) / 2), 2) - Math.pow(Math.sin((j1 - j2) / 2) * (Math.cos(w1) - Math.cos(w2)), 2);
    ret = Math.sqrt(ret);

    // var temp = Math.sin(Math.abs(j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
    var temp = Math.sin((j1 - j2) / 2) * (Math.cos(w1) + Math.cos(w2));
    //console.log(temp)
    ret = ret / temp;

    ret = Math.atan(ret) / Math.PI * 180;
    ret += 90;

    // 这里用如此臃肿的if..else是为了判定追踪单个点的具体情况,从而调整ret的值
    if (j1 - j2 < 0) {
        // console.log('j1<j2')
        if (w1 - w2 < 0) {
            // console.log('w1<w2')
            ret;
        } else {
            // console.log('w1>w2')
            ret = -ret + 180;
        }
    } else {
        // console.log('j1>j2')
        if (w1 - w2 < 0) {
            // console.log('w1<w2')
            ret = 180 + ret;
        } else {
            // console.log('w1>w2')
            ret = -ret;
        }
    }
    return ret;
}
var cursetpindex = 0;
doshow();

function doshow() {
    var busLines = [{
        "coords": arrpoints,
        "lineStyle": {
            "normal": {
                "color": 'red'
            }
        }
    }];
    var arrpoints2 = [];
    var curstop = null;
    if (cursetpindex) {
        for (var i = 0; i <= cursetpindex; i++) {
            if (i == cursetpindex) {
                curstop = arrpoints[i];
            }
            arrpoints2.push(arrpoints[i]);
        }
    } else {
        curstop = arrpoints[0];
    }
    var busLinecur = [{
        "coords": arrpoints2,
        "lineStyle": {
            "normal": {
                "color": 'blue'
            }
        }
    }];
    var option = {
        bmap: {
            center: [116.361729, 39.945501],
            zoom: 14,
            roam: true,
            mapStyle: mapStyle
        },
        series: [{
            name: "busLines",
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: busLines,
            silent: true,
            lineStyle: {
                normal: {
                    // color: '#c23531',
                    // color: 'rgb(200, 35, 45)',
                    opacity: 0.4,
                    width: 3
                }
            },
            progressiveThreshold: 500,
            progressive: 200
        }]
    };
    if (busLinecur && busLinecur[0] && busLinecur[0].coords && busLinecur[0].coords.length) {
        option.series.push({
            name: "busLinecur",
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: busLinecur,
            lineStyle: {
                normal: {
                    width: 3
                }
            },
            effect1: {
                constantSpeed: 40,
                show: true,
                trailLength: 0,
                symbolSize: 10
            },
            zlevel: 1
        })
    }
    //http://lbsyun.baidu.com/jsdemo/img/car.png
    /* option.series.push({
         name:"changedot",
         type:'effectScatter',
         coordinateSystem:'bmap',
         data:[
             {"name":"北京","value":curstop}
         ],
         symbolSize:10,
         itemStyle:{
             emphasis:{
                 borderColor:'blue',
                 borderWidth:2
             }
         }
     });*/
    var nextindex = 0;
    if (cursetpindex + 1 >= arrpoints.length - 1) {
        nextindex = arrpoints.length - 1;
    } else {
        nextindex = cursetpindex + 1;
    }
    var nextstop = arrpoints[nextindex];
    var jiaodu = -getAngle(curstop, nextstop) + 90; //根据 nextstop和curstop 获取角度
    option.series.push({
        name: "changedot",
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: [{
            "name": "北京",
            "value": curstop
        }],
        symbol: "image://https://tbfile.oss-cn-beijing.aliyuncs.com/image/car.png",
        symbolSize: [52, 26],
        symbolRotate: jiaodu,
        itemStyle: {
            emphasis: {
                borderColor: 'blue',
                borderWidth: 2
            }
        }
    });
    myChart.setOption(option);
}
setInterval(function() {
    if (cursetpindex == arrpoints.length - 1) {
        cursetpindex = 0;
    } else if (cursetpindex + 1 >= arrpoints.length - 1) {
        cursetpindex = arrpoints.length - 1;
    } else {
        cursetpindex += 1;
    }
    doshow();
}, 0.1 * 1000)