前提:完成最基础的cesium运行,能够运行出cesium自带底图。
初始图
高德地图
天地图
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>cesium实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="libs/Cesium/Widgets/widgets.css">
<script src="js/bootstrap.min.js"></script>
<script src="libs/Cesium/Cesium.js"></script>
<script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
</head>
<body>
<div id="cesium" class="vh-100"></div>
<div class="fixed-top text-white">
<button class="btn btn-success" onclick="btn1()">
高德地图
</button>
<button class="btn btn-success" onclick="btn2()">
天地图
</button>
</div>
<script src="js/jsstudy01.js"></script>
</body>
</html>
js代码
//初始化界面
var viewer = new Cesium.Viewer("cesium");
viewer.cesiumWidget.creditContainer.style.display = 'none';//去掉cesium的logo
function btn1(){
viewer.imageryLayers.get(0).show = false;//删除底图
var imagelyser = new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider(//用ImageryLayer添加一个新的底图
{
url:" http://webrd01.is.autonavi.com/appmaptile?&scale=1&lang=zh_cn&style=8&x={x}&y={y}&z={z}"
}
));
viewer.imageryLayers.add(imagelyser);//将底图加到原来的球体上
}
function btn2(){
viewer.imageryLayers.get(0).show = false;//删除底图
var token = 'b679e53c0eca7f1f302d4336b6e21b2c';//天地图秘钥
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];
var imagelyser2 = new Cesium.ImageryLayer(new Cesium.WebMapServiceImageryProvider(//用ImageryLayer添加一个新的底图
{
url:tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
subdomains: subdomains,
layer: "tdtImgLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
}
));
viewer.imageryLayers.add(imagelyser2);//将底图加到原来的球体上
}
引用了bootstrap框架,主要是样式设计