欢迎使用CSDN-markdown编辑器

初学cesium

1、下载js文件

https://cesiumjs.org/downloads/

获取bingMap密钥，可以获取测试密钥

https://www.microsoft.com/maps/create-a-bing-maps-key.aspx

获取mapbox tokens

https://www.mapbox.com/studio/account/tokens/

2、创建html，引入cesium文件下的 cesium.js 与 Widgets 文件下的 widgets.css

3、添加需要渲染的 div，初始化组件

Cesium.MapboxApi.defaultAccessToken='您的tokens'
Cesium.BingMapsApi.defaultKey='您的密钥'；
var viewer = new Cesium.Viewer('map',{
/**屏幕组件显示设置**/
scene3DOnly:true,//仅显示3d地图//基层选择器
selectionIndicator:false,
baseLayerPicker:false,//各种地形//场景模式选择器
animation:false,//加速动画显示
geocoder:false,//反向地理搜索框
homeButton:false,//主页按钮
navigationHelpButton:false,//导航帮助按钮
timeline:false,//时间轴
creditDisplay:'.',//积分显示  未看到效果
fullscreenButton:false,//全屏按钮
sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,//指示是否在3D，2D或2.5D Columbus视图中查看场景。******COLUMBUS_VIEW  //哥伦布视图模式。2.5D透视图****MORPHING //模式之间的变形，例如3D到2D。****SCENE2D //2D模式  ****SCENE3D  //3D模式
});

设置显示位置

设置View rectangle

viewer.camera.setView({
destination : Cesium.Rectangle.fromDegrees(west最远西经, south最远南纬, east最远东经, north最远北纬)
});

通过3D显示，设置为 x y z 以山西省为例（112.47，37.71，1500000.0）

viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

json文件下载

参考http://blog.csdn.net/sinat_34719507/article/details/70544164

使用 json 文件 加载地图

参考http://www.cnblogs.com/lilyxusi/p/6628056.html

var promise= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./data/shan1xi.json', {
stroke: Cesium.Color.BLACK,
fill: Cesium.Color.RED,
strokeWidth: 3,
markerSymbol: '?'
}));
viewer.flyTo(promise);

加载 gis 地图

var imageryLayers = viewer.imageryLayers;
imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
url : 'http://www.daditu.com.cn:6080/arcgis/rest/services/Public/BJBlue/MapServer'
}));

eg:椭圆实例

var entity = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(90.0, 50.0),   //绘制图形所在的经纬度

name : '位置在这', //信息盒子标题

ellipse : {    //定义图形形状的对象 box矩形/ polyline /折线 ellipse/椭圆

semiMinorAxis : 250000.0,  //指定半长轴的数值属性。

semiMajorAxis : 400000.0,  //指定半短轴的数值属性。

extrudedHeight : 200000.0, //距离地面的高度 并且填充颜色(建3D图形)

fill:true,   //是否开启背景色

height: 200000.0, //椭圆距离地面的高度 不填充颜色

material :Cesium.Color.BLUE.withAlpha(0.5), //背景色 withAlpha为透明度  背景图片://cesiumjs.org/images/2015/02-02/cats.jpg

outline :true, //是否开启边框

rotation : Cesium.Math.toRadians(45), //倾斜

outlineColor : Cesium.Color.BLACK //边框颜色
},
//自定义图像 信息盒子自定义html内容
description : ‘<p>这里可以写自定义的html内容</p>’
});

更多参考：http://www.liubf.com/index.php?c=content&a=show&id=83 Cesium初学心得

实现地图自定义地区颜色

var promise=Cesium.GeoJsonDataSource.load('./data/shan1xi.json')
promise.then(function(dataSource){
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;

var colorHash={};
for(var i=0;i<entities.length;i++){
var entity = entities[i];
var name = entity.name;
var color = colorHash[name];
if(!color){
color = Cesium.Color.fromRandom({
alpha:1.0
});
colorHash[name] = color;
}
//    console.log(colorHash);

entity.polygon.material = color;
entity.polygon.outline = false;

//    console.log(entity.properties)
}
}).otherwise(function(error){
window.alert(error);
})