[原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布

Posted 2020-07-09 数据秀dataxiu.com

      基于浏览器的三维地图还算是一个比较高冷的东西，最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据，很遗憾，还真的没有太好的的方案，只能说还有可行的方案。

     很久之前用过skyline，使用CS居多，也可以在浏览器使用actviex插件显示；另外就是arcgis globe，我没看到在项目中用的。后来google有一个globe，算是差的比较远。

　　一直到有一天，看到nokia的地图，没错，就是那个做手机的nokia，他们做的那个一个here.com 的地图，能够看三维地图，使用webgl在浏览器渲染，对当时的我来说，简直是惊为天人，流畅，效果好；把代码拔下来看一下，代码加密了8000多行的代码，这下就懵逼了；flex的也有了，无疾而终；另外还有个webglearth，效果也不太好，现在直接修改成另一个引擎。

　　接下来才是重点，几年前在git上看到一个项目 cesium.一个开源的三维地图引擎，作者曾经写过一本书，c#的三维地球的。后来改JS了，做出这个开源项目，一直一直发布，现在好几年了。

　　这个引擎是我目前看到的效果最好、功能最完整的开源的三维地图引擎了。基本上你只要1句话，就可以显示一个三维地图了。

　　下面，我们把美帝国主义在全球和国内的军事基地在cesium上展示，涉及到基础底图、增加要素、和要素交互的功能：

　　1：初始化cesium对象:　　

//初始化地图
this.viewer = new Cesium.Viewer(‘map‘, {
scene3DOnly: true,
baseLayerPicker: false,
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: true
}), //初始背景
animation: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: true,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false

}
);

　　2：在地图上增加要素：　　　　

$.getJSON(options.url, function(result) {
$(result).each(function(i, val) {
that.viewer.entities.add(
{
parent:layer,
name: "jd"+i,
position : Cesium.Cartesian3.fromDegrees(val.lat, val.lng),
point : {
pixelSize : 10,
color : Cesium.Color.RED
},
data:val
});
});

});

3：效果如下：

　  

老规矩：源代码：http://dataxiu.com/xius/www/admin/js/map3d.js

另外，你可以关注 arcgis 最新的webgl的三维地图；worldwind的地图webgl版本。