<!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. wcf双工通信

    一直以为感觉双工没弄懂,着实觉得很惆怅,在网上了解下双工的一些特点,直接上代码,以便以后项目中用的着: service层: 定义一个IDuplexHello服务接口 [ServiceContract( ...

  2. HTTP2 Sampler for JMeter

    今天开发大大说能不能帮忙压一下HTTP2的链接,便去查了一下相关的东西. HTTP 2.0 的出现,相比于 HTTP 1.x ,大幅度的提升了 web 性能.在与 HTTP/1.1 完全语义兼容的基础 ...

  3. redis之使用

    redis之使用  redis ================================= 1.自动分配.你在什么时候用到了自动分配? 答:市场部或运营部招来的新的客户,单条(批量)录入数据的 ...

  4. [SDOI2013]随机数生成器

    Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数. 接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. 注意 ...

  5. GYM 101572A（单调队列优化dp）

    要点 较好的思路解析 \(dp[i]\)为到达\(i\)花费的最短时间,\(dis[i]-dis[j]<=lim1\)的情况其实可以省略,因为就相当于没买咖啡,绝对不优于在那之前的某店买了咖啡并 ...

  6. 获取spring里的bean

    ClassPathXmlApplicationContext applicationContext = new ClassPathXmlApplicationContext("spring. ...

  7. 常用的http网页错误代码表---------495引发的一个简单到爆，但基于国内环境只能呵呵呵的血案

    敲代码敲出了个网页错误代码 495. 然后,正常的跑去百度,看了一堆还是没有完整的网页错误代码,应该说国内的环境的网页错误代码表只有官方的那几个,那么只能FQ了. 去到谷歌,一查全是俄语,乐了,明白是 ...

  8. 如何优化Mysql执行查询数据的速度

    在项目中数据量小的情况下使用like查询速度还行,但是随着数据一天一天增加,再使用like进行模糊查询的时候速度上就会显得比较慢,现提供两套解决方案: 问题: 使用like查询效率很慢 select ...

  9. Swing编程概述

    Swing作为AWT组件的“强化版”,它的产生主要是为了克服AWT构建的GUI,无法在所有平台都通用的问题.允许编程人员跨平台时指定统一的GUI显示风格也是Swing的最大优势.Swing是AWT的补 ...

  10. Burpsuite Professional安装及使用教程

    转自:https://www.jianshu.com/p/edbd68d7c341 1.先从吾爱破解论坛下载工具:https://down.52pojie.cn/Tools/Network_Analy ...