使用按钮＜button＞完成Cesium底图切换

最新推荐文章于 2024-03-01 14:08:28 发布

shq@zhu

最新推荐文章于 2024-03-01 14:08:28 发布

阅读量568

点赞数

分类专栏： Cesium 文章标签： javascript html5 其他 Powered by 金山文档

本文链接：https://blog.csdn.net/wenxinzhu/article/details/128753668

版权

Cesium 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前提：完成最基础的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框架，主要是样式设计