cesium中添加天地图底图

1 前言

天地图主要使用的是WGS84坐标系，并提供了矢量、影像、地形等多种底图。可以利用cesium的WebMapTileServiceImageryProvider完成天地图底图的加载。

cesium探索系列目录：传送门

2 技术准备

2.1 天地图API

天地图提供了官方的API：天地图API

• 天地图地图服务支持HTTP和HTTPS协议。
• 天地图地图服务采用OGC WMTS标准。
• 天地图地图服务对所有用户开放，但需要申请Key。
  

天地图提供了众多的底图，需要时可查询文档自行选择需要的。

以w结尾的投影类型主要是经纬度投影，如vec_c是矢量底图的经纬度。而以c结尾的投影类型主要是球面墨卡托投影，如vec_w是矢量底图的球面墨卡托投影。cesium中主要使用w结尾的球面墨卡托投影

2.2 WebMapTileServiceImageryProvider

用于加载Web Map Tile Service提供的影像数据；支持多种格式和规格；可以通过设置单独的token属性进行身份验证。

3 方法封装与调用

3.1 方法封装

根据天地图api的内容，抽取部分底图封装为方法。

type TMapType = 'vec' | 'cva' | 'img' | 'cia' | 'ter' | 'cta' | 'ibo' | 'eva' | 'eia'
/**
 * 为cesimu添加天地图的底图
 * @param viewer 
 * @param layer 
 * vec：矢量底图、cva：矢量标注、img：影像底图、cia：影像标注
 * ter：地形晕渲、cta：地形标注、eva：矢量英文标注、eia：影像英文标注
 */
export function addTMap(viewer: Cesium.Viewer, layer: TMapType) {
  // 添加天地图影像注记底图
  const tMapImagery = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.gov.cn/${layer}_w/wmts?tk=你的tk`,
    layer,
    style: "default",
    tileMatrixSetID: "w",
    format: "tiles",
    maximumLevel: 18
  })
  viewer.imageryLayers.addImageryProvider(tMapImagery)
}

3.2 方法调用

需要添加天地图底图时，直接调用即可，以下代码添加了矢量底图与矢量标注图层。

// 添加矢量底图与矢量标注图层
addTMap(viewer, 'vec')
addTMap(viewer, 'cva')

3.3 结果展示