Cesium常用的在线地图

ArcGIS在线地图

// 加载ArcGIS在线地图
this.viewer.imageryLayers.addImageryProvider(
    new Cesium.ArcGisMapServerImageryProvider({
        url: 'http://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer',
    })
);

OSM在线地图

// 加载OSM在线地图（标准风格）
this.viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: 'https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png',
        subdomains: ["a", "b", "c", "d"],
    })
);

// 加载OSM在线地图（黑色风格）
 this.viewer.imageryLayers.addImageryProvider(
     new Cesium.UrlTemplateImageryProvider({
         url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
         subdomains: ["a", "b", "c", "d"],
     })
 );

高德在线地图

// 添加高德路网中文注记图
atLayer = new Cesium.UrlTemplateImageryProvider({
    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    minimumLevel: 3,
    maximumLevel: 18
});

// 添加高德矢量图
atLayer = 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}",
   minimumLevel: 3,
   maximumLevel: 18
})
viewer.imageryLayers.addImageryProvider(atLayer);

// 添加高德影像图
 atLayer = new Cesium.UrlTemplateImageryProvider({
     url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
     minimumLevel: 3,
     maximumLevel: 18
 })
 viewer.imageryLayers.addImageryProvider(atLayer);

// 1.影像图
https://webst01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&style=6
// 2.道路纯图
https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x=54658&y=26799&z=16&scl=1<ype=2
// 3.道路简图
http://webrd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&size=1&scale=1&style=7
// 4.道路详图
http://webrd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scale=1&style=8
// 5.纯道路图
http://wprd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scl=1&style=8<ype=11
// 6.纯地标图
https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x=54658&y=26799&z=16&scl=1<ype=4
// 7.路网注记图
http://webst01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scale=1&style=8

lang	显示语言，zh_cn：中文，en：英文
scl	设置标注还是底图，1表示标注，2表示底图
style	地图类型控制，6卫星（st）,7简图（st rd），8详图（不透明rd，透明st）

腾讯地图

// 添加腾讯在线地图
this.viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
   // 影像图
   url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400",
   customTags: {
       sx: function(imageryProvider, x, y, level) {
           return x >> 4;
       },
       sy: function(imageryProvider, x, y, level) {
           return ((1 << level) - y) >> 4
       }
   }
   // 矢量图
   // url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297",
   // 黑色风格
   // url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&scene=0",
   // 注记图1
   // url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=3&scene=0",
   // 注记图2
   // url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297",
}))

天地图

// 添加天地图影像注记底图
this.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=自己申请的key",
    layer: "cia",
    style: "default",
    tileMatrixSetID: "w",
    format: "tiles",
    maximumLevel: 18
}));

天地图官方：http://lbs.tianditu.gov.cn/server/MapService.html

谷歌影像

// 添加谷歌影像图
imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
});

百度地图

由于百度地图使用的坐标系是BD-09，在火星坐标系的基础上进行了二次加密，即二次偏移。所以需要将其纠正偏移到常用的WGS84坐标系。

这里直接使用github上的cesium-map插件加载百度地图，在加载的同时实现偏移纠正。

github插件地址：纠偏插件
（1）引入插件
直接引入下载的插件打包好的cesium.map.min.js即可。
或者通过CDN方式引入：
// 添加百度地图并使用插件纠正偏移
 viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
     style: 'normal',
     crs: 'WGS84'
 }));

cesium纠偏插件cesium-map

地址
:https://gitcode.com/gh_mirrors/ce/cesium-map/overview?utm_source=csdn_github_accelerator&isLogin=1

npm install @cesium-china/cesium-map

高德地图
var options = {
  style: 'img', // style: img、elec、cva
  crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.AMapImageryProvider(options)))

百度地图
var options = {
  style: 'normal', // style: img、vec、normal、dark
  crs: 'WGS84' // 使用84坐标系，默认为：BD09
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.BaiduImageryProvider(options)))

谷歌地图
var options = {
  style: 'elec',//style: img、elec、ter,cva,img_cva
  crs: 'WGS84' // 使用84坐标系，默认为：GCJ02, img除外
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.GoogleImageryProvider(options)))

天地图
var options = {
  style: 'vec', //style: vec、cva、img、cia、ter 
  key:'', // 需去相关地图厂商申请
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.TdtImageryProvider(options)))

腾讯地图
var options = {
  style: 1,//style: img、1：经典
  crs: 'WGS84' // 使用84坐标系，默认为：GCJ02,
}
viewer.imageryLayers.add(new Cesium.ImageryLayer( new Cesium.TencentImageryProvider(options)))