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

     }

 })

最后效果：

巴特西

cesium入门示例-HelloWorld

最新文章

热门文章