cesium入门示例-HelloWorld

示例准备：

在Cesium ion官网（https://cesium.com/）上注册用户，获取AccessToken，在js代码入口设置Cesium.Ion.defaultAccessToken，即可正常使用Cesium内置的影像和地形服务。

HelloWorld示例：

1、替换了cesium内置的影像和地形服务；

 //bing map
 var bingMap = new Cesium.ProviderViewModel({
     name: 'Bing Maps Aerial',
     iconUrl: './SampleData/bingAerial.png',
     tooltip: 'Bing Maps aerial imagery',
     category: 'Cesium ion',
     creationFunction: function() {
         return new Cesium.BingMapsImageryProvider({
             url: 'https://dev.virtualearth.net',
             key: binmapToken,
             mapStyle: Cesium.BingMapsStyle.AERIAL
         })
     }
 })
 //Tianditu
 var tiandiMap = new Cesium.ProviderViewModel({
     name: 'Tiditu',
     iconUrl: './SampleData/fire.png',
     tooltip: 'Tiditu image',
     category: 'Cesium ion',
     creationFunction: function() {
         return new Cesium.WebMapTileServiceImageryProvider({
             //调用影像服务
             url: "http://t1.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&tk=" + tidituToken
         })
     }
 })
 //google map
 var googleMap = new Cesium.ProviderViewModel({
     name: 'Goolge Map',
     iconUrl: './SampleData/fire.png',
     tooltip: 'Google image',
     category: 'Cesium ion',
     creationFunction: function() {
         return new Cesium.UrlTemplateImageryProvider({
             //调用影像服务
             url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
         })
     }
 })
 //自己下载的瓦片
 var customMap = new Cesium.ProviderViewModel({
     name: 'Offline Map',
     iconUrl: './SampleData/fire.png',
     tooltip: 'Offline image',
     category: 'Cesium ion',
     creationFunction: function() {
         return new Cesium.UrlTemplateImageryProvider({
             //调用影像服务
             url: "http://localhost/www/Johannesburg/{z}/{x}/{y}.png"
         })
     }
 })

 //添加自定义地形选择控件
 var customTerrain = new Cesium.ProviderViewModel({
     name: 'myTerrain',
     iconUrl: './SampleData/fire.png',
     tooltip: 'custom terrain',
     category: 'Cesium ion',
     creationFunction: function() {
         return new Cesium.CesiumTerrainProvider({
             url: 'http://localhost/www/n39w119',
             requestVertexNormals: true
         })
     }
 })
 var terrainModels = Cesium.createDefaultTerrainProviderViewModels();
 terrainModels.push(customTerrain);
 var viewer = new Cesium.Viewer('cesiumContainer', {
     animation: false, //去掉动画空间
     timeline: false, //去掉时间线控件
     imageryProviderViewModels: [bingMap, tiandiMap, googleMap, customMap],
     terrainProviderViewModels: terrainModels
 });
 //去除水印
 viewer._cesiumWidget._creditContainer.style.display = "none";
 //显示帧率信息
 viewer.scene.debugShowFramesPerSecond = true;

自定义地形数据n39w119从https://apps.nationalmap.gov/3depdem/网站下载的美国某一片高程数据。
下载的数据为ErdasIMG格式的，在QGIS（或ArcGIS）中转为TIFF格式，然后使用cesiumlab(https://www.cesiumlab.com/)的地形处理工具切成cesium支持的.terrain离散文件，部署在服务器上即可访问。
global_tms为从cesiumlab交流群下载的乔峰地球上下载的.terrain离散文件，地形精度较低，测试用。

2、增加显示鼠标位置的经纬高信息；

 <div id="cesiumContainer">
     <div id="coords" style="position: absolute;z-index: 1000;color: red;"></div>
 </div>

 //显示坐标
 var canvas = viewer.scene.canvas;
 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 handler.setInputAction(function(movement) {
     var cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
     var ellipsoid = viewer.scene.globe.ellipsoid;
     if(cartesian) { //能获取，显示坐标
         var cartographic = ellipsoid.cartesianToCartographic(cartesian);

         var terrainLevel = level;
         var promise = Cesium.sampleTerrain(viewer.terrainProvider, terrainLevel, [cartographic]);
         Cesium.when(promise, function(updatedPositions) {
             if(updatedPositions.length > 0) {
                 var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(2) + ', ' +
                     '纬度' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(2) + ',    ' + '高度' + (updatedPositions[0].height ? updatedPositions[0].height : 0);
                 document.getElementById(divId).innerHTML = coords;
                 document.getElementById(divId).style.display = '';
             } else {
                 document.getElementById('coords').style.display = 'none';
             }
         });

     } else { //不能获取不显示
         document.getElementById('coords').style.display = 'none';
     }
 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

注意“coords"的div中的z-index的设置。

3、加载了天地图的注记服务；

 viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
     //调用中文注记服务
     url: "http://t2.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&" +
        "TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=" + tidituToken
 }));

4、加载多边形实体；

 viewer.entities.add({
    polygon: {
         hierarchy: Cesium.Cartesian3.fromDegreesArray([-109.080842, 45.002073, -105.91517, 45.002073, -104.058488, 44.996596, -104.053011, 43.002989, -104.053011, 41.003906, -105.728954, 40.998429, -107.919731, 41.003906, -109.04798, 40.998429, -111.047063, 40.998429, -111.047063, 42.000709, -111.047063, 44.476286, -111.05254, 45.002073]),
         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         material: Cesium.Color.RED.withAlpha(0.5),
         outline: true,
         outlineColor: Cesium.Color.BLACK
     }
 })

最后效果：