效果
数据结构
getQysybtj2: {
"msg": "操作成功",
"flag": true,
"rows": [{
"value": 11,
"name": "名称",
"code": 2,
"longitude": 10.137400,
"latitude": 8.092329,
"quantity": 11,
"rmb": 11.11
}, {
"value": 11,
"name": "名称2",
"code": 3,
"longitude": -20.000000,
"latitude": 24.778300,
"quantity": 11,
"rmb": 11.11
}, ],
"status": "C00000"
},
1.获取数据
getDemoData: function() {
ak_nav.clearAll();
var temp = {
// start: sp,
// end: sp
};
var options = new Object();
options.url = "/manage-api/IndexTjfx1Controller/getQysybtj";
options.type = "get";
options.data = temp;
options.errorback = akglobe_config.errBack;
options.callback = function(data) {
ak_qianxi2.callBackGET(data);
}
// 如果是测试环境 使用假数据
if(typep002==2){
ak_qianxi2.callBackGET(ak_ztqg.getQysybtj2);
}else{
akglobe_config.ajaxQuery(options);
}
},
callBackGET:function(data){
console.log(data);
var rows = data.rows;
for (var i = 0; i <= rows.length - 1; i++) {
for (var j = 0; j < rows.length - i - 1; j++) {
// 数据库中有坐标数据之后
if (rows[j].value > rows[j + 1].value) {
var temp = rows[j];
rows[j] = rows[j + 1];
rows[j + 1] = temp;
}
}
}
rows.reverse();
console.log(rows)
ak_qianxi2.initQinxi(rows);
},
2.标注
initQinxi: function(rows) {
var tgas = this;
tgas.circleArr = [];
console.log("开始执行");
// ak_nav.flyGlobe();
//ak_nav.c3();
var geoCoordMap = {
'北京': [116.4551, 40.2539]
};
var waveCircle = new WaveCircle(viewer);
var obj = {};
obj.x = 116.4551;
obj.y = 40.2539;
obj.color = Cesium.Color.GREENYELLOW;
waveCircle.createByPosition({
lng: obj.x,
lat: obj.y,
radius: 500000,
color: obj.color
});
ak_commonQuery.waveCircleArr.push(waveCircle);
var BJData = [];
for (var i = 0; i < rows.length; i++) {
var arr = [];
var name = rows[i].name;
arr[0] = rows[i].latitude;
arr[1] = rows[i].longitude;
// geoCoordMap.['name'] = arr;
var obj = {};
obj = {
[name]: arr
}
geoCoordMap = {
...geoCoordMap,
...obj
}
var arr2 = [];
arr2[0] = {
name: '北京'
};
var obj2 = {};
obj2.name = name;
var value = rows[i].value;
var length1 = rows.length / 3;
length1 = parseInt(length1);
var length2 = length1 * 2;
length2 = parseInt(length2);
if (i <= length1) {
value = 88;
} else if (i > length1 && i <= length2) {
value = 88;
} else if (i > length2) {
value = 88;
}
obj2.value = value;
var code = rows[i].code;
obj2.code = code;
arr2[1] = obj2;
BJData.push(arr2);
}
console.log(geoCoordMap);
console.log(BJData);
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
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,
toCode: dataItem[1].code,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
var arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5",
"rgb(0,244,188)", "#139FF0"
]
//this.labels =viewer.scene.primitives.add(new Cesium.LabelCollection())
//var cz=ak_marker.getHxMaterial("",Cesium.Color.CHARTREUSE,2000); AQUA
var color = Cesium.Color.LAWNGREEN.withAlpha(0.01);
var material = ak_marker.getFenceMaterial("", color);
var result = convertData(BJData);
for (var i = 0; i < result.length; i++) {
var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
var db = result[i];
var name = db.toName;
var jwd = db.coords;
var code = db.toCode;
var obj = new Object();
obj.id = id;
obj.name = db.toName;
obj.address = db.toName;
obj.lat = jwd[1][0];
obj.lng = jwd[1][1];
// feature.latitude) || net_tool.isBlank(feature.longitude)
obj.latitude = jwd[1][0];
obj.longitude = jwd[1][1];
obj.tag = 1;
obj.addtypemarker = config.addtypemarker.ceccQygs;
obj.code = code;
obj.attributes = obj; // 设置属性
obj.radius = 100000; //设置半径
obj.color = new Cesium.Color(1.0, 1.0, 0.0, 0.05);
var tt = new geo_circle(obj);
tt.draw();
tgas.circleArr.push(tt);
}
var color = ['#FF4040', '#666666', '#222222'];
var series = [];
[
['北京', BJData]
].forEach(function(item, i) {
series.push({
coordinateSystem: 'GLMap',
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 1
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.8
}
},
data: convertData(item[1])
}
, {
coordinateSystem: 'GLMap',
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 12,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 12
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'GLMap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
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 = {
animation: false,
GLMap: {
},
title: {
text: '', //模拟迁徙
subtext: '', //数据纯属虚构
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
series: series
};
impMap(viewer, option);
},
设置起始点
循环添加从起始点到中的数据
终点的echarts这个标注不能点击,所以在这个标注最下面我们放置了一个透明的圆,用于识别点击
获取数据,然后放入id一些信息用于识别点击
获取数据设置迁徙的样式
var color = ['#FF4040', '#666666', '#222222'];
var series = [];
[
['北京', BJData]
].forEach(function(item, i) {
series.push({
coordinateSystem: 'GLMap',
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 1
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.8
}
},
data: convertData(item[1])
}
, {
coordinateSystem: 'GLMap',
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 12,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 12
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
}, {
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'GLMap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
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 = {
animation: false,
GLMap: {
},
title: {
text: '', //模拟迁徙
subtext: '', //数据纯属虚构
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
series: series
};
impMap(viewer, option);
3.清除
3.1清除透明圆
clearCircle: function() {
var circleArr = this.circleArr;
for (var i = 0; i < circleArr.length; i++) {
var towerItem = circleArr[i];
towerItem.destroy();
}
},
3.2清除echarts
3.2.1第一步在nav.js调用清除所有方法
3.2.2第二步在清除所有方法中有释放所有事件的方法,释放所有事件的方法中有清除echarts的方法
3.2.3第三步 清除echarts
echarts本质上在一个div上面写的,所以我们清除div中的内容即可
disableAllEcharts: function() {
var oid = document.getElementById('echarts_div');
if (oid) {
viewer.container.removeChild(oid);
}
},