欢迎使用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 : ‘
这里可以写自定义的html内容
’          
      });

更多参考：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;iif(!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);
})