cesium利用UrlTemplateImageryProvider加载高德底图

1 前言

在国内，常用高德、百度等的切片底图，想要加载这些底图时，可以使用UrlTemplateImageryProvider类创建。

cesium探索系列目录：传送门

2 UrlTemplateImageryProvider类

UrlTemplateImageryProvider用于加载基于HTTP/HTTPS协议的网络栅格切片数据；支持多种格式、规格和级别范围；需要提供包含切片路径和后缀的URL模板。国内的高德，腾讯等影像服务都可以使用UrlTemplateImageryProvider加载，也可以加载自行发布的影像切片。

3 代码封装与调用

3.1 代码封装

type AMapType = 'vec' | 'img' | 'marker'
/**
 * 5、添加高德底图
 * @param viewer 
 * @param type  vec：矢量、img：影像、marker标注
 * @param option 
 */
export function addAMapImagery(viewer: Cesium.Viewer, type: AMapType, option?: Cesium.UrlTemplateImageryProvider.ConstructorOptions) {
  let url = ''
  if(type === 'img') {
    url = 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
  } else if(type === 'vec') {
    url = "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
  } else if(type === 'marker') {
    url = 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
  }
  const atLayer = new Cesium.UrlTemplateImageryProvider({
    url,
    minimumLevel: 3,
    maximumLevel: 18,
    ...option
  })
  viewer.imageryLayers.addImageryProvider(atLayer);
}

3.2 代码调用

addAMapImagery(viewer, 'vec')		// 加载高德矢量底图
addAMapImagery(viewer, 'img')		// 加载高德影像底图
addAMapImagery(viewer, 'marker')	// 加载高德标注图层

3.3 代码调用

高德矢量

高德影像

高德标注

4 缺陷

暂未查看该底图的坐标系，由于高德使用的是GCJ-02的坐标系，GCJ-02是由国测局制定的互联网地图坐标系，又叫火星坐标，最常见的互联网地图坐标系。所以当数据是WGS84坐标系时，需要把高德的底图转为WGS84坐标系的，目前暂未做这一步，后续在添加geojson数据时，会将该操作补齐。