<!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. 如何备份Chrome浏览器收藏夹

    前言:最近,由于工作需要,要卸载当前Chrome版本,并安装最新版Chrome.卸载前,意识到之前收藏在收藏夹里的很多知识链接还未备份,于是有了今天的话题:如何备份Chrome浏览器的收藏夹? 主题: ...

  2. UVA - 1330 City Game

    InputThe rst line of the input le contains an integer K | determining the number of datasets. Next l ...

  3. Solidity 最新 0.5.8 中文文档发布

    本文首发于深入浅出区块链社区 热烈祝贺 Solidity 最新 0.5.8 中文文档发布, 这不单是一份 Solidity 速查手册,更是一份深入以太坊智能合约开发宝典. 翻译说明 Solidity ...

  4. centOS-7.5上安装redis-5.0.0

  5. 基于角色权限管理：rbac设计分析以及具体细节

    权限管理---设计分析以及具体细节 说起权限我们大家都知道,不一样的角色会有不一样的权限. 比如就像学生管理系统一样,管理员,老师,学生之间的权限都是不一样的,那么展示的页面也是不一样的. 所以,我们 ...

  6. 【手撸一个ORM】第九步、orm默认配置类 MyDbConfiguration，一次配置，简化实例化流程

    这个实现比较简单,事实上可配置的项目很多,如有需要,请读者自行扩展 using System; namespace MyOrm { public class MyDbConfiguration { p ...

  7. Rebus消息总线

    这里主要讲一下我基于Rebus写的一个ABP框架的模块   目录结构 对于Rebus网上的资料很少,其实我对于服务总线也不是很理解 ..个人理解的就是像ABP中的EventBus那样的,但是集成了一些 ...

  8. MiniProfiler NET Core

    MiniProfiler 来分析 ASP.NET Core 应用 它会把结果直接放在页面的左下角,随时可以点击查看:这样的话就可以感知出你的程序运行的怎么样:同时这也意味着,在你开发新功能的同时,可以 ...

  9. java中存储金额

    很早之前, 记得一次面试, 面试官问存储金钱用什么数据类型? 当时只知道8种数据类型(boolean, byte, short, int, long, float, double, char)的我, ...

  10. notepad++添加到运行

    1. 点击开始,输入regedit,点击回车2.在注册表中找到 HKEY_CLASSES_ROOT 下面的 Applications3.修改注册表 1).在Applications下面找到对应的程序名 ...