先看效果
1.準備工作
申請天地圖密鑰（註冊天地圖賬號-選擇控制檯）
天地圖地圖服務採用OGC WMTS標準，服務列表見
http://lbs.tianditu.gov.cn/server/MapService.htmlWMTS服務接口說明見： http://tdt.fuzhou.gov.cn/help/apipfs/3.htm
2.上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加載天地圖dom</title>
<link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
<script src="../Cesium/Cesium.js"></script>
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
let viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain()
});
var TDU_Key = "a89df02c93e5474e9ebeb81a32fcb487"//天地圖申請的密鑰
//在線天地圖影像服務地址(墨卡託投影)
var TDT_IMG_W = "http://{s}.tianditu.gov.cn/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=" + TDU_Key;
//在線天地圖矢量地圖服務(墨卡託投影)
var TDT_VEC_W = "http://{s}.tianditu.gov.cn/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=" + TDU_Key;
//在線天地圖影像中文標記服務(墨卡託投影)
var TDT_CIA_W = "http://{s}.tianditu.gov.cn/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=" + TDU_Key
//在線天地圖矢量中文標記服務(墨卡託投影)
var TDT_CVA_W = "http://{s}.tianditu.gov.cn/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=" + TDU_Key;
let Img = new Cesium.WebMapTileServiceImageryProvider({ //調用影響中文服務
url: TDT_IMG_W,//url地址
layer: "img_w", //WMTS請求的層名稱
style: "default",//WMTS請求的樣式名稱
format: "tiles",//MIME類型，用於從服務器檢索圖像
tileMatrixSetID: "GoogleMapsCompatible",// 用於WMTS請求的TileMatrixSet的標識符
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地圖8個服務器
minimumLevel: 0,//最小層級
maximumLevel: 18,//最大層級
})
viewer.imageryLayers.addImageryProvider(Img)//添加到cesium圖層上
let cia = new Cesium.WebMapTileServiceImageryProvider({ //調用影響中文註記服務
url: TDT_CIA_W,
layer: "cia_w",
style: "default",
format: "tiles",
tileMatrixSetID: "GoogleMapsCompatible",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],//天地圖8個服務器
minimumLevel: 0,
maximumLevel: 18,
})
viewer.imageryLayers.addImageryProvider(cia)//添加到cesium圖層上
</script>
</body>
</html>
代碼放在：https://github.com/weshmily/cesiumPDG
歡迎各位大佬點星星