[原創.數據可視化系列之二]使用cesium三維地圖展現美國全球軍事基地分佈

      基於瀏覽器的三維地圖還算是一個比較高冷的東西，最主要的技術難點是如何在瀏覽器上 多快好省 的顯示三維數據，很遺憾，還真的沒有太好的的方案，只能說還有可行的方案。

     好久以前用過skyline，使用CS居多，也能夠在瀏覽器使用actviex插件顯示；另外就是arcgis globe，我沒看到在項目中用的。後來google有一個globe，算是差的比較遠。

　　一直到有一天，看到nokia的地圖，沒錯，就是那個作手機的nokia，他們作的那個一個here.com 的地圖，可以看三維地圖，使用webgl在瀏覽器渲染，對當時的我來講，簡直是驚爲天人，流暢，效果好，百度也在用，對，就是百度，我是搞不明白，這麼大一個公司，每一年這麼多研發費用，不能本身搞一個嗎，去用here.com的東西？難道都去搞外賣了？我就hehe了；這是題外的牢騷，迴歸正題把代碼拔下來看一下，代碼加密了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版本。