Cesium学习笔记（5）

自定义地图与地图叠加

Cesium添加天地图

申请天地图的秘钥

（1）进入天地图官网

（2）进入开发资源的地图api页面

（3）点击申请Key

（4）创建新应用

（5）填写信息 提交即可

加载天地图矢量地图

var viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: true,
    homeButton: true,
    //控制3D模式选择器的显示  
    sceneModePicker: true,
    baseLayerPicker: true,
    navigationHelpButton: true,
    animation: true,
    timeline: true,
    fullscreenButton: true,
  });
var tdtVectorLayer=new Cesium.WebMapTileServiceImageryProvider({
    url:"http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+"秘钥"，
    layer: 'tdtVectorLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
})
viewer.imageryLayers.addImageryProvider(tdtVectorLayer)

加载天地图影像底图

var viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: true,
    homeButton: true,
    //控制3D模式选择器的显示  
    sceneModePicker: true,
    baseLayerPicker: true,
    navigationHelpButton: true,
    animation: true,
    timeline: true,
    fullscreenButton: true,
  });
var tdtVectorLayer=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="+"秘钥"，
    layer: 'tdtVectorLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
})
viewer.imageryLayers.addImageryProvider(tdtVectorLayer)

上面两种底图加载代码中，只是url不同（/vec_w/wmts，/img_w/wmts）

使用到的Cesium类或方法解释

WebMapTileServiceImageryProvider

这个类能够获取到由wmts（网络地图瓦片服务）提供的瓦片地图数据。 由于，天地图地图服务采用OGC WMTS标准，所以通过WebMapTileServiceImageryProvider来获取到天地图的瓦片数据。其实，可以从url中就可以看出天地图地图服务是WMTS（service=wmts）。

url 地图服务地址 layer 服务请求的图层名 （一定要设置这个属性，否则会报错。但是，随便设置它的值并不会造成地图数据获取失败） style 图层样式 format 数据图片的MIME格式（image/jpeg） tileMatrixSetID 瓦片阵列 使用Google Maps兼容的平铺矩阵集

这个类的基类为ImageryProvider子类，ImageryProvider表示显示在地球表面的地图服务数据提供者。换句话说，不同的地图服务数据可以通过ImageryProvider的不同子类请求获取。

imageryLayers.addImageryProvider

imageryLayers 属性 表示着渲染在三维地球上的影像有序集合（数组），它是一个 ImageryLayerCollection类,简单来说就是一个ImageryLayer数组。ImageryLayer是一个表示有着地图数据（影像数据）图层的类（图层里面包含着地图数据）

addImageryProvider()方法是将某个地图数据提供商提供的地图数据作为一个Imagerylayer添加进ImageryLayerCollection中。也就是说addImageryProvider做了两件事，一个是创建一个Imagerylayer，然后把ImageryProvider提供的数据放进这个imagerylayer中。

addImageryProvider()还有一个参数index(number),代表着图层的顺序（ImageryLayer数组中的索引），不设置该参数就会将新加入的图层放在顶部。 这个方法的返回值为ImageryLayer。

地图叠加

var viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: true,
    homeButton: true,
    //控制3D模式选择器的显示  
    sceneModePicker: true,
    baseLayerPicker: true,
    navigationHelpButton: true,
    animation: true,
    timeline: true,
    fullscreenButton: true,
  });
var tdtVectorLayer=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="+"秘钥"，
    layer: 'tdtVectorLayer',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
})
//添加天地图的影像底图
viewer.imageryLayers.addImageryProvider(tdtVectorLayer)
//获取高德矢量底图
let gdlayer=new Cesium.UrlTemplateImageryProvider({
    url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
  })
//添加高德矢量底图并拿到高德矢量底图对应的图层（ImageryLayer）
let gdl=viewer.imageryLayers.addImageryProvider(gdlayer)
//设置这个ImageryLayer的透明度
gdl.alpha=0.6;