Cesium入门04-图层变换

之前有发过关于必应图层的显示，那个只是通过申请秘钥的方式来获取图层，这次是引用不同的地图源。

这个文章包含两个内容：
1、小控件的调用
2、关于BaseLayerPicker的图层调用

一、小控件

在最第二章‘构建球体’的最后，有提到一些关于viewer视图下的小框架，例如Geocoder(查询)、BaseLayerPicker(图层更换)、timeline(底部时间轴）之类。这里举个例子：

var viewer = new Cesium.Viewer('cesiumContainer', {
      animation: false, //是否创建动画小器件，左下角仪表
      baseLayerPicker: false, //是否显示图层选择器
      fullscreenButton: false, //是否显示全屏按钮
      geocoder: false, //是否显示geocoder小器件，右上角查询按钮  
      homeButton: false, //是否显示Home按钮
      infoBox: false, //是否显示信息框
      sceneModePicker: false, //是否显示3D/2D选择器
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, //是否显示时间轴
      navigationHelpButton: false, //是否显示右上角的帮助按钮
      scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url: "http://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=token",
        layer: "tdtImgBasicLayer",
        style: "default",
        format: "image/jpeg",
        show: false
      })
    });

他们的类型都是布尔型，因此只需要True or Flase就可以了。

二、图层的调用

通过个人理解，我整理了一下添加图层的方法，简要介绍一下：
当baseLyaerPicker(后文简称LP)为True时，可以选择Cesium的图层选择器中提供了的一些图层。例如Bing、Openstreet等
当LP为False的时候，就需要使用ImagerProvider了。这里仅仅列举了几个，这里举两个例子，一个是Esri图层的变换(使用ArcMapServeringProvider)，一个是天地图的变换(用WebMapServiceProvider)。

1、Esri图层

		//ESRI底图
        var esri = new Cesium.ArcGisMapServerImageryProvider({
        url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        });
        
        var viewer = new Cesium.Viewer('CesiumContainer',{
            BaseLayerPicker:false,
            imageryProvider:esri
        });

这里没什么说的，展示一下结果：

2、天地图（天地图需要自己申请key了嗷）

注册账号，控制台里申请‘网页端’的key就可以啦
注册完成后打开这里查看调用地址：天地图-地图API

拿上述链接里的‘影像底图’调用地址举例：
http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥
http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥
img_w/c包含两个内容：①img是layer属性；
②w是Web Mercator，c是CGCS 2000坐标系；

下面就是实现：

		//天地图影像底图
        var tian_i = new Cesium.WebMapTileServiceImageryProvider   ({
            url:'http://t0.tianditu.gov.cn/img_w/wmts?tk=（你的key）',
            layer: "img",
            style: 'default',
            tileMatrixSetID:'w',
            format: "tiles",
            maximumlevel:18
        });
        //添加影像
        var viewer = new Cesium.Viewer('CesiumContainer',{
            BaseLayerPicker:false,
            imageryProvider:tian_i
        });
        //天地图影像注记
        var tian_v = new Cesium.WebMapTileServiceImageryProvider({
            url:'http://t0.tianditu.gov.cn/cia_w/wmts?tk=（你的key）',
            layer:'cia',
            style:'default',
            tileMatrixSetID:'w',
            format:'tiles',
            maximumlevel:18
        });
        //添加注记
        viewer.imageryLayers.addImageryProvider(tian_v);

结果：
再把上次的实体添加一下（确实挺丑别笑我）：