本文主要是介绍战疫情-用地图揭秘“逆行者”，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
疫情发生以后，全国人民几乎都听从号召，在家自我隔离，但是，却有这么一批人，被称作“逆行者”，他们就是全国各省前往湖北支援的医护人员，他们赶去疫情的中心点，不畏艰苦和困难，铸成了隔离病毒的“新的长城”。下面我们将介绍，如何在地图上揭秘各省“逆行者”数据，信息主体为全国各省支援湖北的医护人员人数，使用的平台是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}});}})
范例代码可以在超图技术资源中心下载，http://support.supermap.com.cn/，搜索“逆行者”，再点击“超图代码”即可下载
这篇关于战疫情-用地图揭秘“逆行者”的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
