Cesium加载在线地图服务

6,905 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

互联网的地图服务一般有天地图,高德地图,百度地图,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

BaiduImageryProvider.js

//百度地图数据图层,自带注记
let baiduImageryLayer = new Cesium.ImageryLayer(new BaiduImageryProvider({ style: 'normal' }),{
  show: true,
  alpha: 1,
});