战疫情-用地图揭秘“逆行者”
疫情发生以后，全国人民几乎都听从号召，在家自我隔离，但是，却有这么一批人，被称作“逆行者”，他们就是全国各省前往湖北支援的医护人员，他们赶去疫情的中心点，不畏艰苦和困难，铸成了隔离病毒的“新的长城”。下面我们将介绍，如何在地图上揭秘各省“逆行者”数据，信息主体为全国各省支援湖北的医护人员人数，使用的平台是SuperMap iClient3D 10i for WebGL。
1.数据准备
（1）底图
使用全国行政区划图，SuperMap iDesktop范例数据下就有名为“China Province pg”的全国行政区划矢量面数据，删除不必要的属性字段后，直接将其导出成GeoJson。
以全国各省的省名制作三维标签专题图，然后生成s3m缓存，这里选择该方式来制作标签，而不是前端使用lable实*作，是因为前两天研发说优化了文本s3m缓存和文本地图缓存在WebGL上面的显示效果，我赶紧找研发同事要了WebGL临时版本，测试发现，果然文本显示得很清晰，而以前版本文本会发虚，特别是计算机分辨率设置成125%时尤为严重。
（2）尾迹线效果数据
制作全国各省分别流向湖北的动态尾迹线效果，我们需要各省的中心点坐标，这儿我们直接用各省面数据的内点，可通过iDesktop中“类型转换”-“面转点”实现。
（3）全国各省支援湖北医护人员数量数据
该数据来源于长江日报，其中不包含解放军医疗队人数，截止日期是2月15号，本文并不对该数据真实性和准确性负责。将该数据编辑到各省点数据的属性中后，将点数据导出成GeoJson。
先来一张成果图：
2.功能实现
（1）创建三维球
我们隐藏掉导航控件，隐藏掉太阳，星空背景和三维球面，并将场景背景色改为蓝色，整体的行政区划面呈一个曲面，禁止信息框和隐藏选择提示，这样鼠标点击面实体时，界面上不会有任何提示，代码如下：
var viewer = new Cesium.Viewer('cesiumContainer',{
navigation:false,//隐藏导航控件
infoBox:false,//禁止信息框
selectionIndicator : false//隐藏选择提示
});
var scene = viewer.scene;
viewer.scene.backgroundColor = new Cesium.Color(5/255, 27/255, 51/255, 255/255);//设置场景背景色
scene.globe.show=false;//隐藏三维球体
scene.sun.show=false;//隐藏太阳
scene.skyBox.show=false;//隐藏天空盒
（2）打开标签专题图
先将标签专题图用iserver发布成三维服务，然后打开该服务数据，代码如下：
var promise = scene.open("http://localhost:8090/iserver/services/3D-China_Province_pg/rest/realspace");//打开标签专题图服务
Cesium.when(promise,function(layers){
})//服务加载完成的回调,在回调中加载行政区划面,尾迹线和代表医护人员人数的圆圈
（3）添加行政区划面
该段代码添加到上面的回调中，代码如下：
Cesium.loadJson('China_Data.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=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
}
});
}
}
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
}
});
}
}
}
}
}).otherwise(function(error) {
});
（4）添加尾迹线和代表各省支援湖北医护人员数量的圆
尾迹线由各省指向湖北，医护人员数量决定圆圈的半径，代码如下：
var ellipsecolor=new Cesium.Color(50/255, 173/255, 180/255, 100/255);//圆圈颜色
Cesium.loadJson('China_Doc.json').then(function(DocData) {
for(var i=0;i<DocData.features.length;i++)
{
var point=DocData.features[i].geometry.coordinates;//各省除湖北外的内点坐标
var DocCount=DocData.features[i].properties.Doc;
var points=[];
if(DocCount<200)//为了保证圆圈在小比例尺下也能看到,最小值取200
{
DocCount=200;
}
var R=parseInt(DocCount/100)*15000;//医护人员数量确定圆圈半径
points.push(point[0]);
points.push(point[1]);
points.push(112.866487619079);//湖北内点坐标,是固定的
points.push(31.1766459770616);
viewer.entities.add({ // 尾迹线
polyline: {
width: 5,
hMax:100000,
positions: Cesium.Cartesian3.fromDegreesArray(points),
material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质
color: Cesium.Color.fromCssColorString("rgba(118, 233, 241, 1.0)"),
trailLength : 0.6,
period : 3.0
})
}
});
viewer.entities.add({//圆圈
position: Cesium.Cartesian3.fromDegrees(point[0],point[1]),
ellipse : {
semiMinorAxis : R,
semiMajorAxis : R,
height: 10000.0,
material : ellipsecolor
}
});
}
})
semiMinorAxis : R,
semiMajorAxis : R,
height: 10000.0,
material : ellipsecolor
}
});
}
})
范例代码可以在超图技术资源中心下载，http://support.supermap.com.cn/，搜索“逆行者”，再点击“超图代码”即可下载
上一篇： 31.数论算法总结
推荐阅读