<!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. C# 主要运算符中的成员访问(?.)

    在开发过程中,我遇到了一种null 条件成员访问的写法,开始不太理解,之后专门查了微软的官方文档,下面是具体内容:   三种成员访问的三种形式 (1)x.y:成员访问. (2)x?.y:null 条件 ...

  2. STP-7-RSTP的BPDU格式和处理方式的改变

    RSTP只使用一种BPDU,协议版本字段为2(STP为0). STP标志字段8位只使用了两位:TC(拓扑变化)和TCA(拓扑变化确认). RSTP也使用了其余6位:提议位,端口角色位,学习位,转发位, ...

  3. [题解]（prufer）明明的烦恼

    https://www.cnblogs.com/noip/archive/2013/03/10/2952520.html 以及高精(抄 #include<iostream> #includ ...

  4. JAVAFX-2 开发应用

    理解javafx 架构 ● 场景图(Scene Graph) ● JavaFX功能的公开API(Java Public APIs for JavaFX Features) ● 图形系统(Graphic ...

  5. 图片旋转js代码

    function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.fi ...

  6. Luogu P3384 【模板】树链剖分

    ...rt...安利一发大佬博客https://www.cnblogs.com/ivanovcraft/p/9019090.html 注意:不要把dfn和rw弄混了... #include<cs ...

  7. 题解 poj1845 Sumdiv (数论) (分治)

    传送门 大意:求A^B的所有因子之和,并对其取模 9901再输出 (这题又调了半天,把n和项数弄混了QAQ) 根据算数基本定理:A=(p1^k1)*(p2^k2)*(p3^k3)*...*(pn^kn ...

  8. 【0 基础学Dojo】第【1】篇 HelloWord

    打开dojo 官网首页 http://dojotoolkit.org/,我们看到 点击get dojo  你将得到下载Dojo 的不同方式 2,点击下面方式下载, 解压后 新建myTest.html, ...

  9. 使用AuthToken架构保护用户帐号验证Cookie的安全性

    在项目或者网站开发中,我们很多人很多时候喜欢使用微软的FormsAuthentication类的GetAuthCookie函数生成需要在访客客户端放置的帐号校验Cookie,这个本身没问题,但是很多人 ...

  10. pt-table-checksum和pt-table-sync

    环境:系统bsd,标准安装,ports安装的mysql. 主172.16.21.126 从172.16.21.128vi /etc/rc.conf 添加 mysql_enable="YES& ...