<!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>

希望对你们有帮助……

cesium 基于天地图服务 完成底图标注渲染加切换的更多相关文章

  1. cesium底图加载底图切换 基于天地图服务

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. cesium调用天地图服务

    全球矢量地图服务 var viewer = new Cesium.Viewer("cesiumContainer", { animation: false, //是否显示动画控件 ...

  3. 基于Rest服务实现的RPC

    前言:现在RPC成熟的框架已经很多了,比喻Motan和Dubbo,但是今天我这里提供一种基于Rest服务的Rpc.和上一篇连着的http://www.cnblogs.com/LipeiNet/p/58 ...

  4. 基于RMI服务传输大文件的完整解决方案

    基于RMI服务传输大文件,分为上传和下载两种操作,需要注意的技术点主要有三方面,第一,RMI服务中传输的数据必须是可序列化的.第二,在传输大文件的过程中应该有进度提醒机制,对于大文件传输来说,这点很重 ...

  5. Glue4Net简单部署基于win服务的Socket程序

    smark 专注于高并发网络和大型网站架规划设计,提供.NET平台下高吞吐的网络通讯应用技术咨询和支持 Glue4Net简单部署基于win服务的Socket程序 在写一些服务应用的时候经常把要它部署到 ...

  6. 微服务架构：基于微服务和Docker容器技术的PaaS云平台架构设计（微服务架构实施原理）

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 基于微服务架构和Docker容器技术的PaaS云平台建设目标是给我们的开发人员提供一套服务快速开发.部署.运维管理.持续开发持续集成的流程 ...

  7. 基于微服务的DevOps落地指南 交付效率提升40%

    基于微服务的DevOps落地指南 交付效率提升40% 2015-2016年,珍爱线下门店已新增覆盖城市9个,与此同时,CRM系统大小故障却发生了数十起... ... 珍爱网是以“网络征选+人工红娘”模 ...

  8. 27 ArcMap加载天地图服务一片空白怎么办

    在ArcMap中添加WMTS Server,连接上了,但是不显示 天地图升级向导:http://lbs.tianditu.gov.cn/authorization/authorization.html ...

  9. 一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

随机推荐

  1. if-else判断语句中经常犯的一个错误

    假设题目为:随便给定一个数,三种情况:(1)若小于0,输出为“小于0”:(2)若在0-50之间,则输出“在0-50之间”.(3)若大于50,则输出“大于50”. 解法:如果我这么写,运行一下看看. i ...

  2. oracle merge 目标表以及源表存在重复列的问题（转）

    SQL> select * from t_source;                                                                      ...

  3. oracle view and MATERIALIZED VIEW

    View http://blog.csdn.net/tianlesoftware/article/details/5530618 MATERIALIZED VIEW http://blog.csdn. ...

  4. eclipse svn 忽略target .project .classpath等目录文件

    这个build失败的解决方案就是不要把你项目的 target目录放在src repository 里面,还有 .project 和 .classpath 最好也别放到src repository 里. ...

  5. .NET 基础 一步步 一幕幕[Winform应用程序]

    时隔半载,重回博客园,一切从头再来,今天只是开始,原谅我这一生放荡不羁爱自由. 进入今天得主题曲:Winform应用程序(简介) 1.      winform应用程序是一种智能客户端技术,我们可以使 ...

  6. puthon-进程间通信-队列和管道

    ********进程间通信-队列和管道******** ****进程间通信-队列和管道 IPC(Inter-Process Communication) ****队列 **概念介绍 创建贡献的进程队列 ...

  7. 命令行下载工具 wget

    wget 是一个简单而强大的跨平台命令行下载工具,包括 Windows 也有对应的版本.全称 GNU Wget,属于 GNU 计划的一部分,自由软件.支持 HTTP.HTTPS 和 FTP 协议,可在 ...

  8. SocLib的安装

    一.soclib的安装 1.安装g++,一般Ubuntu系统都自带了,所以无需安装.后面这两个软件需要提前安装,不然后面执行相关操作是会报错:sudo apt-get install automake ...

  9. Jenkins执行yarn install报错：error An unexpected error occurred:"... ... :Unexpected end of JSON input"

    解决方式: # cd /usr/local/n/versions/node/11.6.0/lib/(node的安装目录下) # rm -rf node_modules # yarn cache cle ...

  10. 转 DataGuard环境搭建 （一主一备一级联）

    DataGuard环境搭建 (一主一备一级联) http://blog.itpub.net/30130773/viewspace-2116985/ 1.--------- primary_role / ...