Cesium接入在线地图

Cesium接入在线地图只需在创建时将imageryProvider属性换为在线地图的地址即可

创建：

const viewer = new Cesium.Viewer("cesiumContainer", {

        terrainProvider: Cesium.createWorldTerrain(),

　　 imageryProvider：imageryProvider，//地图贴片

        geocoder: false, //搜索框

        homeButton: false, //home按钮

        sceneModePicker: false, //3d/2d 模式切换按钮

        baseLayerPicker: false, //图层选择按钮

        navigationHelpButton: false, //右上角的帮助按钮

        animation: false, //左下角的动画控件的显示

        shouldAnimate: false, //控制模型动画

        timeline: false, //底部的时间轴

        fullscreenButton: false, //右下角的全屏按钮

        selectionIndicator: true, //选择指示器

        infoBox: true, //信息面板

　　 contextOptions:{

　　　　webgl:{

　　　　　　alpha:true

　　　　}

　　}

    });

以下为一些在线地图地址：

//矢量服务
let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: "http://t0.tianditu.com/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=30d07720fa76f07732d83c748bb84211",
    layer: "tdtBasicLayer",
    style: "default",
    format: "image/jpeg",
    tileMatrixSetID: "googleMapsCompatible"
})

//影像服务
let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/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=30d07720fa76f07732d83c748bb84211",
  layer: "tdtBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
})

//天地图全球地形渲染数据图层
let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/ter_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=30d07720fa76f07732d83c748bb84211",
  layer: "tdtBasicLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
})

//天地图矢量注记数据图层
let imageryProvider =new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=ebf64362215c081f8317203220f133eb",
  layer: "tdtAnnoLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
})

//天地图全球影像注记数据
let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/cia_w/wmts?  service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=30d07720fa76f07732d83c748bb84211",
  layer: "tdtAnnoLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
})

//天地图全球渲染地形注记数据图层
let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
  url: "http://t0.tianditu.com/cta_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=ebf64362215c081f8317203220f133eb",
  layer: "tdtAnnoLayer",
  style: "default",
  format: "image/jpeg",
  tileMatrixSetID: "GoogleMapsCompatible"
})

ArcGIS 地图(以下没试过，不保证正确，仅供参考)

//使用arcgis全球影像，不含注记
let esriMapLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({
  url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
}), {
  show: true,
  alpha: 1
});

//使用arcgis全球影像和交通数据图层
let esriMapandTrafficLayer = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({
  url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
}), {
  show: true,
  alpha: 1
});

//arcgis全球地形数据图层,带英文注记
let esriMapTerrian = new Cesium.ImageryLayer(new Cesium.ArcGisMapServerImageryProvider({
  url: "http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer",
}), {
  show: true,
  alpha: 1
});

OSM地图

let osmMapLayer = new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
  url : 'https://a.tile.openstreetmap.org/'
}), {
  show: false,
  alpha: 1
});

高德地图

//高德矢量地图数据图层，自带注记
let gaodeVecBaseMapLayer = new Cesium.ImageryLayer(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}",
    layer: "tdtVecBasicLayer",
    style: "default",
    format: "image/png",
    tileMatrixSetID: "GoogleMapsCompatible"
}),{
  show: true,
  alpha: 1
});

//高德影像地图数据图层，自带注记
let gaodeImgBaseMapLayer = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
  url: "https://webst02.is.autonavi.com/appmaptile?lang=zh_cn&size=10&scale=10&style=8&x={x}&y={y}&z={z}",
  layer: "tdtVecBasicLayer",
  style: "default",
  format: "image/png",
  tileMatrixSetID: "GoogleMapsCompatible"
}),{
  show: true,
  alpha: 1
});