// setInterval("bigdata.mapAjax()",3000); 这里定时调用这个函数
mapAjax: function () {
$.ajax({
url: "" + urls + "bigData/scooter/queryTrack?cityCode="+city+"",
success: function (data) {
var busLines=data.result;
var data=busLines.map(function(v){
return v.points;
})
var hStep = 300 / (data.length - 1);
// var max=[];
var busLines = [].concat.apply([], data.map(function (busLine,
idx) {
var prevPt;
var points = [];
for (var i = 0; i < busLine.length; i += 2) {
// busLine[i] 所展示的是每一辆车的经纬度
var pt = [busLine[i], busLine[i + 1]];
// pt 是一个经纬度的数组 就是把这辆车每移动的一个经纬度添加为一个数组
if (i > 0 && i < busLine.length) {
pt = [
prevPt[0] + pt[0],
prevPt[1] + pt[1]
];
}
prevPt = pt;
points.push([pt[0] / 1e4, pt[1] / 1e4]);
var pre=[prevPt[0]/ 1e4,prevPt[1]/ 1e4];
var po=points[points.length-1];
if(pre[0]==po[0] && pre[1]==po[1]){
}
}
// max.push(points);
return {
coords: points,
lineStyle: {
normal: {
color: echarts.color.modifyHSL('#5A94DF',
Math.round(hStep * idx))
}
}
};
}));
// var zd=Math.max(...max.map(v=>v.length));
// var newData=max.map(v=>(v.splice(v.length,0,...new
Array(zd-v.length).fill(v[v.length-1])),v));
var jwds=[];
var ds=busLines.forEach(function(v) {
var obj={
jd:v.coords[0][0],
wd:v.coords[0][1],
}
jwds.push(obj);
})
if(btnFirst){
position={
x: jwds[0].jd,
y: jwds[0].wd
}
btnFirst=false;
}
option={
bmap: {
// center: [position.x,position.y],
// zoom:17,
roam: true,
mapStyle: {
'styleJson': [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#031628'
}
},
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#000102'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#0b3d51'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'featureType': 'railway',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#08304b'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -70
}
},
{
'featureType': 'building',
'elementType': 'geometry.fill',
'stylers': {
'color': '#000000'
}
},
{
'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'
}
}
]
}
},
series: [{
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: [],
silent: true,
lineStyle: {
normal: {
// color: '#c23531',
// color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1
}
},
progressiveThreshold: 500,
//启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。
progressive: 200 //渐进式渲染
}, {
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: busLines,
lineStyle: {
normal: {
width: 0
}
},
effect: { //线特效的配置
constantSpeed: 5, //是否是固定速度
period:5,//特效动画的时间
show: true,
// loop: false, //是否循环特效
trailLength: 0.6, //特效尾际的长度
symbolSize: 1.5 //特效的大小
},
animation: true,
zlevel: 1
}]
};
// console.log(option.series[1].effect.loop);
if(centerFirst){
option.bmap.center=[position.x,position.y]
option.bmap.zoom=15
centerFirst=false;
}
mapEcharts.setOption(option);
}
})
}
@gangyahaidao 这个就是实例代码 麻烦了
[ Full content available at:
https://github.com/apache/incubator-echarts/issues/9044 ]
This message was relayed via gitbox.apache.org for [email protected]
