<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cesium App</title>
<script src="./scripts/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding:0;
}
#baseLayerPickerContainers{
position: absolute;
right: 30px;
top: 20px;
z-index: 666;
}
</style>
</head>
<body>
<!-- 整個渲染視圖 -->
<div id="cesiumContainer" style="height:100%">
<!-- 自定義控件 -->
<div id="baseLayerPickerContainers"></div>
</div>
<script>
//影像底圖切換
var img_tdt_yx = new Cesium.ProviderViewModel({
name: "影像底圖",
tooltip: "影像底圖",
//顯示切換的圖標
iconUrl: "./images/img_tdt_yx.png",
creationFunction: function () {
var esri = 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=7711a24780452f03bb7c02fba98183b9'
});
//影像標注
addImageryProvider("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&format=tiles&tk=7711a24780452f03bb7c02fba98183b9");
return esri;
}
});
//矢量底圖切換
var img_tdt_sl = new Cesium.ProviderViewModel({
name: "矢量底圖",
tooltip: "矢量底圖",
iconUrl: "./images/img_tdt_sl.png",
creationFunction: function () {
var esri = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.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=7711a24780452f03bb7c02fba98183b9'
});
addImageryProvider("http://t0.tianditu.gov.cn/cva_w/wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7711a24780452f03bb7c02fba98183b9")
return esri;
}
});
//地形底圖切換
var img_tdt_dx = new Cesium.ProviderViewModel({
name: "地形底圖",
tooltip: "地形底圖",
iconUrl: "./images/img_tdt_dx.png",
creationFunction: function () {
var esri = new Cesium.WebMapTileServiceImageryProvider({
url: 'http://t0.tianditu.gov.cn/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=7711a24780452f03bb7c02fba98183b9'
});
addImageryProvider("http://t0.tianditu.gov.cn/cta_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7711a24780452f03bb7c02fba98183b9")
return esri;
}
});
//ui入口
let viewer = new Cesium.Viewer('cesiumContainer',{
animation:false,//是否創建動畫小器件，左下角儀表
timeline: false,//是否顯示時間軸
sceneModePicker: false,//是否顯示3D/2D選擇器
baseLayerPicker: false,//是否顯示圖層選擇器
geocoder: false,//是否顯示geocoder小器件，右上角查詢按鈕
scene3DOnly: true,//如果設置為true，則所有幾何圖形以3D模式繪制以節約GPU資源
navigationHelpButton: false,//是否顯示右上角的幫助按鈕
homeButton: false,//是否顯示Home按鈕
infoBox: true,//是否顯示信息框
showRenderLoopErrors: false//如果設為true，將在一個HTML面板中顯示錯誤信息
});
//影像標注加載
let addImageryProvider = function(url){
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: url,
layer: "tdtImgAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
show: false
}))
}
//隱藏cesium左下角logo
viewer._cesiumWidget._creditContainer.style.display = 'none';
//自定義圖層切換
let baseLayerPicker = new Cesium.BaseLayerPicker("baseLayerPickerContainers",{
globe:viewer.scene.globe,//傳入全局地球對象
imageryProviderViewModels:[img_tdt_yx, img_tdt_dx, img_tdt_sl],//需要進行切換的幾個圖層
})
//更改地圖切換的標題
document.querySelector('.cesium-baseLayerPicker-sectionTitle').innerText = "底圖切換"
</script>
</body>
</html>
希望對你們有幫助……