Cesium-Viewer基本配置与底图配置

new Cesium.Viewer(container, options) 创建Cesium视图实例

Viewer接口用于生成视图，同时也是cesium所有功能的入口。Viewer的第一个参数传递一个容器节点需要的唯一标识id，创建的节点设置为该id，cesium视图展示及交互在该节点中执行。options用于配置视图的各种控件。

const viewer = new Viewer('cesiumContainer', {  
    animation: false, // 是否创建动画小部件  
    timeline: false, // 是否显示时间线控件  
    fullscreenButton: false, // 右下角全屏按钮  
    geocoder: false, // 是否显示地名查找控件  
    baseLayerPicker: true, // 是否显示图层选择控件  
    imageryProvider: new UrlTemplateImageryProvider({ // 配置底图获取路径  
        url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'  
    })  
})  

在Viewer的配置文件中，一个比较重要的配置属性是imageryProvider，它用于配置三维地球使用什么底图。

当baseLayerPicker为true时，我们可以在视图右上角看到一个图层控件，选择我们需要的瓦片底图。

也可以生成视图时配置默认底图，配置属性是imageryProvider，举例几个常用的底图：

• Google地图，可以通过Cesium.UrlTemplateImageryProvider()配置。

    const viewer = new Cesium.Viewer('cesiumContainer', {  
        imageryProvider: new new Cesium.UrlTemplateImageryProvider({  
            url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'  
        })  
    })  
  

• OpensTreetMap底图，通过Cesium.OpenStreetMapImageryProvider()配置。

    const viewer = new Cesium.Viewer('cesiumContainer', {  
    imageryProvider: new Cesium.OpenStreetMapImageryProvider({  
        url: 'https://a.tile.openstreetmap.org/'  
        })  
    })
  

• 天地图，Cesium.WebMapTileServiceImageryProvider()配置，秘钥需要在官网注册后获取。

    const viewer = new Cesium.Viewer('cesiumContainer', {  
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({  
            url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=天地图秘钥',  
            layer: 'img',  
            style: 'default',  
            tileMatrixSetID: 'w',  
            format: 'tiles',  
            maximumLevel: 18  
        })  
    }）  
  

如果还需要添加其它图层可通过以下方法实现（天地图影像注记）

const viewer = new Cesium.Viewer(...)  
// 添加天地图影像注记  
var layer = new                 Cesium.WebMapTileServiceImageryProvider({  
    url: 'http://t0.tianditu.gov.cn/cia\_w/wmts?tk=天地图秘钥',  
    layer: 'cia',  
    style: 'default',  
    tileMatrixSetID: 'w',  
    format: 'tiles',  
    maximumLevel: 18  

});  

viewer.imageryLayers.addImageryProvider(layer)