欢迎使用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);})