cesium核心类Viewer简介

sinna

1.简单描述Viewer

Viewer类是cesium的核心类，是地图可视化展示的主窗口，cesium程序应用的切入口，扮演必不可少的核心角色。

官网的英文解析如下：

A base widget for building applications. It composites all of the standard Cesium widgets into one reusable package. The widget can always be extended by using mixins, which add functionality useful for a variety of applications

---

2.Viewer对象创建以及参数解析

new Cesium.Viewer(container, options);

container参数类型type：Element |String

描述（一般是地图主窗口div的ID）：The DOM element or ID that will contain the widget

options对象，里面属性值特别多，详细的参数见：http://cesiumjs.org/refdoc.html；

个人觉的Viewer类options参数常用的属性值，其他的用默认值即可：

1. this.cesiumViewer = new Cesium.Viewer(divId, {
   
2.                animation:false, //动画控制，默认true
   
3.                baseLayerPicker:true,//地图切换控件(底图以及地形图)是否显示,默认显示true
   
4.                fullscreenButton:true,//全屏按钮,默认显示true
   
5.                geocoder:false,//地名查找,默认true
   
6.                timeline:false,//时间线,默认true
   
7.                vrButton:true,//双屏模式,默认不显示false
   
8.                homeButton:true,//主页按钮，默认true
   
9.                infoBox:false,//点击要素之后显示的信息,默认true
   
10.                selectionIndicator:true,//选中元素显示,默认true
    
11.                imageryProviderViewModels:this._getImageryViewModels(options.mapInitParams.imageryViewModels),//设置影像图列表
    
12.                terrainProviderViewModels:this._getTerrainViewModels(options.mapInitParams.terrainViewModels)//设置地形图列表
    
13. 
    
14.     });

复制代码

1)animation,是否显示动画效果控件，默认true

设置false，动画效果控件不可见

2)timeline,是否显示时间轴控件，默认true

设置false，时间轴控件不可见

3)baseLayerPicker,是否显示底图切换控件，默认true

设置false

4)fullscreenButton,是否显示地图全屏控件，默认true

设置false，地图全屏控件不可见

5)geocoder,是否显示地名查找控件，默认true

设置false，地名查找控件不可见

6) vrButton,是否显示地图双屏控件，默认false

设置true

7)homeButton,是否显示主页控件，默认true

设置false，主页控件不可见

8)infoBox,是否显示cesium默认气泡窗口控件，默认true

设置false，气泡窗口控件不可见

9) selectionIndicator,是否显示选中地图元素标识控件，默认true

设置false，地图元素标识控件不可见

10) imagerProviderViewModels,设置地图切换控件绑定底图数据源，跟baseLayerPicker属性设置true配合使用

备注：这里的imagerProviderViewModels参数要是不设置的话，默认会自动创建一组在线地图底图服务的数据源，假如想要配置一些自己服务器发布的地图服务的话，应该自己设置一组地图服务数据源来替换；

11) terrainProviderViewModels,设置地图切换控件绑定地形图数据源，跟baseLayerPicker属性设置true配合使用

备注：这里的terrainProviderViewModels参数要是不设置的话，默认会自动创建一组在线地形图服务的数据源，假如想要配置一些自己服务器发布的地形图服务的话，应该自己设置一组地形图数据源来替换；

---

3.附上设置底图服务数据源以及地形图数据源设置的函数

1. /**
   
2.           * 获取地形图配置列表
   
3.           * @method _getTerrainViewModels
   
4.           * @param  models 配置文件中的地形图列表
   
5.           * @return terrainViewModels
   
6.           */      
   
7.     _getTerrainViewModels:function(models){
   
8.             var terrainViewModels = [];
   
9.             var viewer = this.cesiumViewer;
   
10.     if(models && models.length>0){
    
11.        for(var i=0;i<models.length;i++){//默认最多能识别配置2个地形图信息
    
12.                   var model = models[i];
    
13.                   switch (i) {
    
14.                   case 0:
    
15.                            var terrain = _createProviderViewModel(models[0]);
    
16.                            terrainViewModels.push(terrain);                                 
    
17.                            break;
    
18.                   case 1:
    
19.                            var terrain = _createProviderViewModel(models[1]);
    
20.                            terrainViewModels.push(terrain);                              
    
21.                            break;                                                              
    
22.                   default:
    
23.                            break;
    
24.                   }
    
25.        }
    
26.     }
    
27.     return terrainViewModels;
    
28.     /**
    
29.      * 创建ProviderViewModel
    
30.      * @method _createProviderViewModel
    
31.      * @param  model,配置文件地形图信息
    
32.      * @return 返回指定地形图ProviderViewModel
    
33.     */
    
34.     function _createProviderViewModel(model){
    
35.                return new Cesium.ProviderViewModel(
    
36.                {
    
37.                name : model.name,
    
38.                iconUrl : Cesium.buildModuleUrl(model.iconUrl),
    
39.                tooltip : model.name,
    
40.               creationFunction : function() {
    
41.                return _createTerrainProvider(model);
    
42.               }
    
43.      });                              
    
44.     }
    
45.     /**
    
46.      * 创建指定地形图数据源
    
47.      * @method _createTerrainProvider
    
48.      * @param  model,配置文件地形图信息
    
49.      * @return 返回指定地形图数据源
    
50.     */         
    
51.     function _createTerrainProvider(model){
    
52.                var provider ={};
    
53.                if(model.proxyUrl && model.proxyUrl.length>0)
    
54.                provider = {proxy:new Cesium.DefaultProxy(model.proxyUrl),url:model.Url,requestWaterMask:model.requestWaterMask};
    
55.                else
    
56.                provider = {url:model.Url,requestWaterMask:model.requestWaterMask};
    
57.                return new Cesium.CesiumTerrainProvider(provider);                     
    
58.     }            
    
59.     },
    
60.          /**
    
61.           * 获取切换地图服务配置列表
    
62.           * @method _getImageryViewModels
    
63.           * @param  models 配置文件中的底图服务列表
    
64.           * @return imageryViewModels
    
65.           */      
    
66.     _getImageryViewModels:function(models){
    
67.             var imageryViewModels = [];
    
68.             var viewer = this.cesiumViewer;
    
69.     if(models && models.length>0){
    
70.        for(var i=0;i<models.length;i++){//默认最多能识别配置地图信息文件的8个底图服务
    
71.                  var model = models[i];
    
72.                   switch (i) {
    
73.                   case 0:
    
74.                            var imagery = _createProviderViewModel(models[0]);
    
75.                            imageryViewModels.push(imagery);                           
    
76.                            break;
    
77.                   case 1:
    
78.                            var imagery = _createProviderViewModel(models[1]);
    
79.                            imageryViewModels.push(imagery);                                   
    
80.                            break;
    
81.                   case 2:
    
82.                            var imagery = _createProviderViewModel(models[2]);
    
83.                            imageryViewModels.push(imagery);                                   
    
84.                            break;                              
    
85.                   case 3:
    
86.                            var imagery = _createProviderViewModel(models[3]);
    
87.                            imageryViewModels.push(imagery);                           
    
88.                            break;
    
89.                   case 4:
    
90.                            var imagery = _createProviderViewModel(models[4]);
    
91.                            imageryViewModels.push(imagery);                                   
    
92.                            break;
    
93.                   case 5:
    
94.                            var imagery = _createProviderViewModel(models[5]);
    
95.                            imageryViewModels.push(imagery);                                   
    
96.                            break;
    
97.                   case 6:
    
98.                            var imagery = _createProviderViewModel(models[6]);
    
99.                            imageryViewModels.push(imagery);                                   
    
100.                            break;
     
101.                   case 7:
     
102.                            var imagery = _createProviderViewModel(models[7]);
     
103.                            imageryViewModels.push(imagery);                                   
     
104.                            break;                                    
     
105.                   default:
     
106.                            break;
     
107.                   }
     
108.        }
     
109.     }
     
110.     return imageryViewModels;
     
111.     /**
     
112.      * 创建ProviderViewModel
     
113.      * @method _createProviderViewModel
     
114.      * @param  model,配置文件地图信息
     
115.      * @return 返回指定地图服务类型的ProviderViewModel
     
116.     */
     
117.     function _createProviderViewModel(model){
     
118.                return new Cesium.ProviderViewModel(
     
119.                {
     
120.                 name : model.name,
     
121.                 iconUrl : Cesium.buildModuleUrl(model.iconUrl),
     
122.                 tooltip : model.name,
     
123.                 creationFunction : function() {
     
124.                   return _createImageryProvider(model);
     
125.                  }
     
126.      });                              
     
127.     }
     
128.     /**
     
129.      * 创建指定地图服务类型的地图数据源，比如ArcGisMapServer、OpenStreetMap、BingMaps、MapBox、TileMapService、WebMapTileService等等
     
130.      * @method _createImageryProvider
     
131.      * @param  model,配置文件地图信息
     
132.      * @return 返回指定地图服务类型的地图数据源
     
133.     */         
     
134.     function _createImageryProvider(model){
     
135.                var provider ={};
     
136.                if(model.proxyUrl && model.proxyUrl.length>0)
     
137.                         provider = {proxy : new Cesium.DefaultProxy(model.proxyUrl),url : model.Url};
     
138.                else
     
139.                         provider = {url : model.Url};                           
     
140.            switch (model.type) {
     
141.                case 0://ArcGisMapServerImageryProvider
     
142.          return new Cesium.ArcGisMapServerImageryProvider(provider);
     
143.                         break;
     
144.                case 1://OpenStreetMapImageryProvider
     
145.                         return Cesium.createOpenStreetMapImageryProvider(provider);
     
146.                         break;
     
147.                default:
     
148.          return new Cesium.ArcGisMapServerImageryProvider(provider);
     
149.                        break;
     
150.                }                    
     
151.     }
     
152.     }

复制代码

GIS之家论坛（推荐）：GIS之家论坛
GitHub:GIS之家GitHub
GIS作品：GIS之家
QQ兴趣部落：GIS之家部落
GIS项目交流群：238339408
GIS之家交流群一：432512093(已满)
GIS之家交流群二：296438295