互联网的地图服务一般有天地图,高德地图,百度地图,ArcGIS地图,OSM地图,这里就给大家一一列举出来如何使用Cesium加载这些在线的地图服务。
天地图
天地图服务需要tk,国家地理信息公共服务平台 天地图
//矢量服务
let tiandituVecMapLayer = new Cesium.ImageryLayer(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"
}), {
show: true,
alpha: 1
});
//影像服务
let tiandituImgMapLayer = new Cesium.ImageryLayer(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"
}), {
show: true,
alpha: 1
});
//天地图全球地形渲染数据图层
let tiandituTerMapLayer = new Cesium.ImageryLayer(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"
}), {
show: true,
alpha: 1
});
//天地图矢量注记数据图层
let tiandituVecLabelMapLayer = new Cesium.ImageryLayer(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"
}),{
show: true,
alpha: 1
});
//天地图全球影像注记数据
let tiandituImageLabelLayer = new Cesium.ImageryLayer(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"
}),{
show: true,
alpha: 1
});
//天地图全球渲染地形注记数据图层
let tiandituTerLabelMapLayer = new Cesium.ImageryLayer(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"
}),{
show: true,
alpha: 1
});
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
});
百度地图
百度地图由于切片中心点位于地理坐标的(0, 0)点,所以百度地图的加载需要使用自定义的provider,这里是自定义的provider「链接」
//百度地图数据图层,自带注记
let bAIduImageryLayer = new Cesium.ImageryLayer(new BaiduImageryProvider({ style: 'normal' }),{
show: true,
alpha: 1,
});