cesium加载天地图、OSM、谷歌底图

---

加载天地图

首先打开天地图地图服务，然后申请key。
有两种方法加载天地图分别是WebMapTileServiceImageryProvider和UrlTemplateImageryProvider*
第一种：

const imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://{s}.tianditu.gov.cn/vec_w/wmts?tk=816517e17d1cc31c6eec03ef9fc4bb5b',
                    layer: "vec",
                    style: "default",
                    format: "tiles",
                    tileMatrixSetID: 'w',
                    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    minimumLevel: 0,
                    maximumLevel: 18,
                    credit: 'Tianditu'
});
viewer.imageryLayers.addImageryProvider(imageryProvider);  //加载矢量底图

第二种：

const imageryProvider = new Cesium.UrlTemplateImageryProvider({
      url: 'http://{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=816517e17d1cc31c6eec03ef9fc4bb5b',
      subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
      maximumLevel: 18,
      minimumLevel: 1,
      credit: 'Tianditu'
  });
 viewer.imageryLayers.addImageryProvider(imageryProvider);  //加载矢量底图 

以上示例是加载矢量底图，若要加载影像或者其他只需要更换相应的url，在WebMapTileServiceImageryProvider中还要更改layer参数。url中’‘vec_w’，vec对应底图种类，w对应投影样式，具体可看地图服务页面。两种方法效果差别不大。

加载OSM

const osmImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    subdomains: ['a', 'b', 'c'], // 子域名列表
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    minimumLevel: 0,
    maximumLevel: 18,
    credit: '© OpenStreetMap contributors'
  });
  viewer.imageryLayers.addImageryProvider(osmImageryProvider ); 

一些其他风格，基于CRAT渲染，Voyager

const cartoImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
    subdomains: ['a', 'b', 'c', 'd'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© CartoDB © OpenStreetMap'
});
viewer.imageryLayers.addImageryProvider(cartoImageryProvider );

Positron

const cartoImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}{r}.png',
    subdomains: ['a', 'b', 'c', 'd'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© CartoDB © OpenStreetMap'
});
viewer.imageryLayers.addImageryProvider(cartoImageryProvider );

Dark Matter

const cartoImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}{r}.png',
    subdomains: ['a', 'b', 'c', 'd'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© CartoDB © OpenStreetMap'
});
viewer.imageryLayers.addImageryProvider(cartoImageryProvider );

加载谷歌底图

const googleRoadmapImageryProvider = new Cesium.UrlTemplateImageryProvider({
  	url: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© Google'
});
viewer.imageryLayers.addImageryProvider(googleRoadmapImageryProvider ); 

还有谷歌的一些卫星底图
GOOGLE_CUSTOM

const googleRoadmapImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://mt1.google.com/vt/lyrs=custom_layer_id&x={x}&y={y}&z={z}',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© Google'
});
viewer.imageryLayers.addImageryProvider(googleRoadmapImageryProvider );

GOOGLE_HYBRID

const googleHybridImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© Google'
});
viewer.imageryLayers.addImageryProvider(googleHybridImageryProvider);

GOOGLE_SATELLITE

const googleSatelliteImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 19,
    credit: '© Google'
});
viewer.imageryLayers.addImageryProvider(googleSatelliteImageryProvider);