疫情航班同程数据三维可视化
前言
最近，中国的新冠肺炎疫情情况已经得到了控制，社会各个行业正在逐步恢复秩序。疫情期间，有的朋友为了帮忙寻找同程人员，自发做了一个在线的同程查询网站。于是想到，若用超图三维的WebGL产品展示这些数据，效果能够更直观，因此写了这边博客，本文只暂时航班同程数据情况
数据
同程数据来源：http://2019ncov.nosugartech.com/
超图在线地理编码服务：https://www.supermapol.com/developer/webapi.html#geocoding?**
超图**可上在线网站注册申请（https://www.supermapol.com/），由于超图在线地理编码服务是限于中国境内的地址编译，因此本篇博客只展示国内同程数据
功能实现
（1）制作地球底图
制作底图的具体实现方法和操作可以参考以下博客
https://blog.csdn.net/supermapsupport/article/details/104789521
Cesium.loadJson('js/Province_R_5.json').then(function(jsonData) {
var polygonfeatures = jsonData.features; //各省面要素集合
var color = new Cesium.Color(26 / 255, 59 / 255, 90 / 255, 255 / 255); //面颜色
var linecolor = new Cesium.Color(54 / 255, 96 / 255, 146 / 255, 255 / 255); //面边框线颜色
for (var i = 0; i < polygonfeatures.length; i++) {
var polygonfeature = polygonfeatures[i].geometry.coordinates; //各省的面要素
for (var j = 0; j < polygonfeature.length; j++) {
if (polygonfeature.length > 1) //该省矢量面由多个面对象组合而成的情况
{
var feature = polygonfeature[j][0];
var points = [];
for (var k = 0; k < feature.length; k++) //读取每个面的节点信息,并存进数组
{
var x = feature[k][0];
var y = feature[k][1];
var z = 2;
points.push(x);
points.push(y);
points.push(z)
}
if (points[0] != undefined) //面节点异常判断
{
viewer.entities.add({ //构造面实体
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(points),
perPositionHeight: true,
material: color,
outline: true,
outlineColor: linecolor,
fill: false
//extrudedHeight:2
}
});
}
} else {
var feature = polygonfeature[0];
var points = [];
for (var k = 0; k < feature.length; k++) {
var x = feature[k][0];
var y = feature[k][1];
var z = 0;
points.push(x);
points.push(y);
points.push(z);
}
if (points[0] != undefined) {
viewer.entities.add({
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(points),
perPositionHeight: true,
material: color,
outline: true,
outlineColor: linecolor,
fill: false
// extrudedHeight:2
}
});
}
}
}
}
})
（2）获取同程数据
从同程网站中拿到同程数据地址（http://2019ncov.nosugartech.com/data.json?440360
），向数据发GET请求取数据，获取航班的同程信息。
$.ajax({
type: 'get',
url: "http://2019ncov.nosugartech.com/data.json?440190",
success: function(data) {
tcdata = data.data
var starttime = new Date($("#selDate").val())
var endtime = new Date($("#selDateend").val())
for (var i = 0; i < tcdata.length; i++) {
var datatime = new Date(tcdata[i].t_date)
if (datatime >= starttime && datatime <= endtime && tcdata[i].t_type == 1) {
valuedata.push(tcdata[i])
}
}
（3）地址编译成坐标
通过上述方法获取到的同程数据不能直接显示到地球上，还需要获取到每个城市的经纬度，这样才能在地球上真正定位到城市。
超图在线地理编码服务API使用方法可在以下链接查看
https://www.supermapol.com/developer/webapi.html#geocoding
for (j = 0; j < valuedata.length; j++) {
var testart = {
"address": valuedata[j].t_pos_start,
"city": valuedata[j].t_pos_start
}
var reend = {
"address": valuedata[j].t_pos_end,
"city": valuedata[j].t_pos_end
}
$.ajax({
async: false,
type: 'get',
data: testart,
url: 'http://www.supermapol.com/iserver/services/location-china/rest/locationanalyst/China/geocoding.rjson?key=fvV2osxwuZWlY0wJb8FEb2i5',
success: function(data) {
var jsdata = JSON.parse(data)
start = Cesium.Cartesian3.fromDegrees(jsdata[0].location.x, jsdata[0].location.y,
100000)
startname = jsdata[0].address.city
（4）数据可视化
拿到经纬度，便能使用超图的WebGL产品将这些数据变成可视化的实体展示出来
航班信息以文本展示出来，使用红色大点表示起点，白色小点表示终点，动态尾迹线表示航班行驶的方向，最后在加个金色的底线
var poinarr = generateCurve(start, end)
var dis = Cesium.Cartesian3.distance(start, end)
var midpo = viewer.entities.add({
name: startname + ' -> ' + endname,
position:poinarr[150],
label:{
text:"航班号"+valuedata[j].t_no,
fillColor:Cesium.Color.WHITE.withAlpha(0.8),
font:'15px sans-serif',
}
});
var lineEntity = viewer.entities.add({
name: startname + ' -> ' + endname,
polyline: {
positions: poinarr,
width: 5,
hMax: dis / 15,
material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质
color: Cesium.Color.fromCssColorString("rgba(118, 233, 241, 1.0)"),
trailLength: 0.3,
period: 10.0
})
}
});
var bgline = viewer.entities.add({ // 背景线
//description: 'background-line',
name: startname + ' -> ' + endname,
polyline: {
width: 2,
positions: poinarr,
hMax: dis / 15,
material: Cesium.Color.GOLD.withAlpha(0.5)
}
});
var entityLAX = new Cesium.Entity({
position: start,
point: {
pixelSize: 10,
color: Cesium.Color.RED
}
});
var startpo = viewer.entities.add(entityLAX);
//
var entityend = new Cesium.Entity({
position: end,
point: {
pixelSize: 5,
color: Cesium.Color.ALICEBLUE
}
});
var endpo = viewer.entities.add(entityend);
最终效果图如下
具体代码可以从以下链接获取
链接：https://pan.baidu.com/s/1cKef9iINwbCfSAm1pbyEQw
提取码：cy0c
上一篇： Hadoop数据压缩总结
推荐阅读