---

前言

上一章学习完了cesium入门的基础，成功在浏览器中显示出了一个地球，这一章开始，我们将学习如何将图层数据加载到地球之上。

---

一、影像加载

Cesium为用户提供了ImageryLayerCollection类，ImageryLayer类及相关的ImageryProvider类来加载不同的影像图层。ImageryProvider类及其子类封装了加载各种网络影像图层的接口，可用于加载Bing地图，天地图，ArcGis在线地图，高德地图，OSM影像、MapBox影像等数据源。

1.1Bing地图

当获得token之后，默认加载的地图就是Bing地图，也就是说，在创建viewer时，如果不指定ImageryProvider类，就默认加载Bing地图。

1.2天地图

Cesium提供了WebMapTileServiceImageryProvider类来调用天地图的服务，但是调用天地图需要申请免费的key，用户可以在天地图官网中免费申请，具体流程如下：
点击此链接即可直接跳转至天地图官网

点击开发资源进入天地图Api网页

上图的地图API区域的地图都可以使用，我选择一个矢量底图作为示范：

将服务地址拷贝下来，然后我们在上一章创建的初识Cesium文件夹下，新建一个2Cesium数据加载文件夹，然后新建文件1天地图.vue，如图所示

将helloworld.vue文件夹赋值一份，作为基础文件夹，今后我们写的内容都基于这个基础文件夹继续写。

接下来就是加载地图，可以在viewer的option对象里面直接添加imageryProvider属性，也可以使用 viewer.imageryLayers.addImageryProvider的方法添加。

imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
      url:
        'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
        token,
      layer: 'tdtAnnoLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible'
    })

注意：以上的token需要自行获取，我这里并没有提供

如果要用第二种方式，应该在viewer构造函数的外面写上

viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url:
        'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' +
        webKey,
      layer: 'tdtAnnoLayer',
      style: 'default',
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible'
    })
  )

这里解释一下，在之前图片上的服务地址只是用来替换http://t0.tianditu.com/cva_w/wmts?这个部分，并且其中t0-t7是天地图的二级服务域名，可以随意使用。
一般地图上的投影都使用球面墨卡托投影

1.3ArcGis在线地图

Cesium提供了ArcGisMapServerImageryProvider类来通过ArcGis Server REST API访问托管在ArcGis MapServer上的地图瓦片，在创建viewer时，也可以使用imageryProvider配置项通过ArcGisMapServerImageryProvider类来传入ArcGis在线地图。与天地图类似
https://server.arcgisonline.com/arcgis/rest/services，这是ArcGis在线地图网站的地址

例如我们需要使用arcgis的世界地图，打开网站后，点击箭头所指的部分。

然后点击这个JSON，进入一个文档后，将它的地址拷贝下来，然后直接作为URL放到ArcGisMapServerImageryProvider类的属性里面

imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=pjson'
    })

这样就可以直接加载arcgis的在线地图了。

注意：如果有人要跟着我的内容练习的话，我还有一部分操作没有写出来，例如我又新建了一个文件夹为ArcGisMapServerImageryProvider.vue，然后加载了这个地图，以及替换组件路径的操作，我这里不过多赘述，每个新的小节我都是这样新建一个.vue文件来操作的。大家知道即可，大家也可以按照自己的方式来。

1.4高德地图

Cesium提供了UrlTemplateImageryProvider类来通过指定的URL模板请求地图。

//高德地图
new Cesium.UrlTemplateImageryProvider({
    url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    layer: "tdtVecBasicLayer",
    style: "default",
    format: "image/png",
    tileMatrixSetID: "GoogleMapsCompatible",
    show: true
  }))

1.5OSM影像

Cesium 提供了OpenStreetMapImageryProvider类来加载OSM数据，只需要指定OSM数据的URL即可。

imageryProvider: new Cesium.OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/'
    })

注意：openstreet地图可能需要安全上网才能打开。

1.6MapBox影像

使用该影像需要进入MapBox官网申请密钥，网址为https://www.mapbox.com/maps/
由于我的实力有限，没法安全上网创建那个账户，所以这里我就不再赘述，具体操作与之前类似。

---

二、地形数据加载

2.1在线地形数据加载

Cesium封装了现成的地形接口createWorldTerrain，该接口可以提供全球在线地形数据，只需要在创建viewer时，设置terrainProvider的配置项为Cesium.createWorldTerrain()即可加载全球在线地形数据。

 terrainProvider: Cesium.createWorldTerrain()

---

2.2 使用IonResource.fromAssetId(1)

当创建完成一个cesium账号后，都可以用一些cesium内部的资源，Cesium.IonResource.fromAssetId(1)这个1号的资源就是一个地形数据，可以直接被使用。使用方法如下：

viewer.terrainProvider =new Cesium.CesiumTerrainProvider({
    url : Cesium.IonResource.fromAssetId(1),
    requestVertexNormals : true,//顶点法线效果
    requestWaterMask:true,//水效果
  })

以上是水体的效果

以上是地形的效果。

三、TIFF数据加载

TIFF格式是图形图像处理中常用的格式之一，虽然该图像格式很复杂，但是由于它对图像信息的存放灵活多变，可以支持多种色彩系统，并且独立于操作系统，所以得到广泛应用。Cesium并不能直接加载本地TIFF格式的影像数据，而是需要对其进行切片处理后才能加载，处理数据的过程如下

3.1 Cesium实验室处理TIff数据

点击下载cesium实验室https://www.cesiumlab.com/
下载完成后，作为普通用户登录

选择影像切片，上传准备好的tif影像（这里的影像大家可以去地理空间数据云下载，下载后得到多波段影像通过arcmap影像合成，让红绿蓝波段对应你下载影像的红绿蓝波段，即可获得真彩色图像）。然后这样选择即可

之后将得到的地形切片数据加载到cesium中

new Cesium.UrlTemplateImageryProvider({
url:'切片地址'
})

总结

本章学习了如何加载cesium影像和地形。