cesium入门示例-HelloWorld

示例准备：

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

HelloWorld示例：

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

 1 //bing map
 2 var bingMap = new Cesium.ProviderViewModel({
 3     name: \'Bing Maps Aerial\',
 4     iconUrl: \'./SampleData/bingAerial.png\',
 5     tooltip: \'Bing Maps aerial imagery\',
 6     category: \'Cesium ion\',
 7     creationFunction: function() {
 8         return new Cesium.BingMapsImageryProvider({
 9             url: \'https://dev.virtualearth.net\',
10             key: binmapToken,
11             mapStyle: Cesium.BingMapsStyle.AERIAL
12         })
13     }
14 })
15 //Tianditu
16 var tiandiMap = new Cesium.ProviderViewModel({
17     name: \'Tiditu\',
18     iconUrl: \'./SampleData/fire.png\',
19     tooltip: \'Tiditu image\',
20     category: \'Cesium ion\',
21     creationFunction: function() {
22         return new Cesium.WebMapTileServiceImageryProvider({
23             //调用影像服务 
24             url: "http://t1.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&" +
25                 "TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&tk=" + tidituToken
26         })
27     }
28 })
29 //google map
30 var googleMap = new Cesium.ProviderViewModel({
31     name: \'Goolge Map\',
32     iconUrl: \'./SampleData/fire.png\',
33     tooltip: \'Google image\',
34     category: \'Cesium ion\',
35     creationFunction: function() {
36         return new Cesium.UrlTemplateImageryProvider({
37             //调用影像服务 
38             url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"
39         })
40     }
41 })
42 //自己下载的瓦片
43 var customMap = new Cesium.ProviderViewModel({
44     name: \'Offline Map\',
45     iconUrl: \'./SampleData/fire.png\',
46     tooltip: \'Offline image\',
47     category: \'Cesium ion\',
48     creationFunction: function() {
49         return new Cesium.UrlTemplateImageryProvider({
50             //调用影像服务 
51             url: "http://localhost/www/Johannesburg/{z}/{x}/{y}.png"
52         })
53     }
54 })
55 
56 //添加自定义地形选择控件
57 var customTerrain = new Cesium.ProviderViewModel({
58     name: \'myTerrain\',
59     iconUrl: \'./SampleData/fire.png\',
60     tooltip: \'custom terrain\',
61     category: \'Cesium ion\',
62     creationFunction: function() {
63         return new Cesium.CesiumTerrainProvider({
64             url: \'http://localhost/www/n39w119\',
65             requestVertexNormals: true
66         })
67     }
68 })
69 var terrainModels = Cesium.createDefaultTerrainProviderViewModels();
70 terrainModels.push(customTerrain);
71 var viewer = new Cesium.Viewer(\'cesiumContainer\', {
72     animation: false, //去掉动画空间
73     timeline: false, //去掉时间线控件
74     imageryProviderViewModels: [bingMap, tiandiMap, googleMap, customMap],
75     terrainProviderViewModels: terrainModels
76 });
77 //去除水印
78 viewer._cesiumWidget._creditContainer.style.display = "none";
79 //显示帧率信息
80 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、增加显示鼠标位置的经纬高信息；

 1 <div id="cesiumContainer">
 2     <div id="coords" style="position: absolute;z-index: 1000;color: red;"></div>
 3 </div>
 4 
 5 //显示坐标 
 6 var canvas = viewer.scene.canvas;
 7 var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
 8 handler.setInputAction(function(movement) {
 9     var cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
10     var ellipsoid = viewer.scene.globe.ellipsoid;
11     if(cartesian) { //能获取，显示坐标
12         var cartographic = ellipsoid.cartesianToCartographic(cartesian);
13 
14         var terrainLevel = level;
15         var promise = Cesium.sampleTerrain(viewer.terrainProvider, terrainLevel, [cartographic]);
16         Cesium.when(promise, function(updatedPositions) {
17             if(updatedPositions.length > 0) {
18                 var coords = \'经度\' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(2) + \', \' +
19                     \'纬度\' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(2) + \',    \' + \'高度\' + (updatedPositions[0].height ? updatedPositions[0].height : 0);
20                 document.getElementById(divId).innerHTML = coords;
21                 document.getElementById(divId).style.display = \'\';
22             } else {
23                 document.getElementById(\'coords\').style.display = \'none\';
24             }
25         });
26 
27     } else { //不能获取不显示
28         document.getElementById(\'coords\').style.display = \'none\';
29     }
30 }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

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

 

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

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

4、加载多边形实体；

1 viewer.entities.add({
2    polygon: {
3         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]),
4         heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
5         material: Cesium.Color.RED.withAlpha(0.5),
6         outline: true,
7         outlineColor: Cesium.Color.BLACK
8     }
9 })

 

最后效果：