Cesium加载影像图层(ArcGIS、Bing、Mapbox、高德地图、腾讯地图、天地图等各类影像图)

代码复制而来,仅作为个人笔记,如有侵权,请联系本人删除。

const imageLayers = viewer.imageryLayers 
  console.log(imageLayers);
  imageLayers.remove(imageLayers.get(0)) //清楚Cesium默认加载的影像地图数据(默认是加载的bing地图)
// ArcGIS地图 1.104之前版本的调用方法
// const esri = new Cesium.ArcGisMapServerImageryProvider({
// url: //'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
// })
const esri = await Cesium.ArcGisMapServerImageryProvider.fromUrl(      'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
)
imageLayers.addImageryProvider(esri) 
// Bing地图
const bing = await Cesium.BingMapsImageryProvider.fromUrl(
  "https://dev.virtualearth.net", {
  key: "YOUR KEY",
  mapStyle: Cesium.BingMapsStyle.AERIAL//可选参数,指定地图样式
})
imageLayers.addImageryProvider(bing) 
const Ion = await Cesium.IonImageryProvider.fromAssetId(3812);
imageLayers.addImageryProvider(Ion)
var gridImagery = new Cesium.GridImageryProvider({
   color: Cesium.Color.fromCssColorString('#ff0000'), // 可选参数,指定网格线颜色
   glowFactor: 0.2, // 可选参数,指定网格线辉光系数
});
imageLayers.addImageryProvider(gridImagery)
const mapbox = new Cesium.MapboxImageryProvider({
  mapId: 'mapbox.mapbox-terrain-v2',
  accessToken: 'YOUR KEY'
});
imageLayers.addImageryProvider(mapbox)
var tileCoordinates = new Cesium.TileCoordinatesImageryProvider()
imageLayers.addImageryProvider(tileCoordinates)
var gaodeImageryProvider = new Cesium.UrlTemplateImageryProvider({
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  maximumLevel: 18,
  minimumLevel: 1,
  credit: 'Amap'
}); 
imageLayers.addImageryProvider(gaodeImageryProvider);
var tencentImageryProvider = 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 }
    }
});
imageLayers.addImageryProvider(tencentImageryProvider);
var tdtImageryProvider = new Cesium.UrlTemplateImageryProvider({
   url: 'http://{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=YOUR KEY',
   subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
   maximumLevel: 18,
   minimumLevel: 1,
   credit: 'Tianditu'
});
imageLayers.addImageryProvider(tdtImageryProvider);
var arcGIsWebMapTile = new Cesium.WebMapTileServiceImageryProvider({
    url : 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS',
    layer: 'World_Imagery',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'GoogleMapsCompatible',
    maximumLevel: 19,
    credit: new Cesium.Credit('© Esri', 'https://www.esri.com/')
});
imageLayers.addImageryProvider(arcGIsWebMapTile);
const osm = new Cesium.OpenStreetMapImageryProvider({
    url : 'https://a.tile.openstreetmap.org/'
});
imageLayers.addImageryProvider(osm)
var tdtWebMapTile = new Cesium.WebMapTileServiceImageryProvider({
    url : 'http://t0.tianditu.gov.cn/img_w/wmts?tk=YOUR KEY',
    layer: 'img',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'w',
    maximumLevel: 18,
    credit: new Cesium.Credit('© Tianditu', 'http://www.tianditu.gov.cn/')
});
var index = 0;
imageLayers.addImageryProvider(tdtWebMapTile,index);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值