疫情航班同程数据三维可视化

前言
最近，中国的新冠肺炎疫情情况已经得到了控制，社会各个行业正在逐步恢复秩序。疫情期间，有的朋友为了帮忙寻找同程人员，自发做了一个在线的同程查询网站。于是想到，若用超图三维的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