Cesium基础:设置地图数据,叠加地图图层

在new Viewer时,在配置中添加imageryProvider属性

根据使用的地图来源不同,它的值不固定,详细可以参考你所用的地图文档

需要注意的是,大部分地图都需要token,cesium也需要token,在写damo时别忘了

设置地图数据:

//矢量服务
let tiandituVecMapLayer = 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 tiandituImgMapLayer = 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 tiandituTerMapLayer = 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 tiandituVecLabelMapLayer = 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 tiandituImageLabelLayer = 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 tiandituTerLabelMapLayer = 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"
})

// 加载,此处以天地图矢量服务为例
// 实际使用时需要加token !!
const Viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: tiandituVecMapLayer
})

叠加地图图层===> 将高德地图的矢量图叠加进去:

const Viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: tiandituVecMapLayer
})
     
// 叠加影像服务
const imageryLayers = Viewer.imageryLayers
const layer = imageryLayers.addImageryProvider(tiandituImgMapLayer)

// 别忘记设置透明度,默认为0!
layer.alpha = 0.5