<!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. datastream解析

    在EOS的eosiolib模块中有一个datasteam.hpp文件,它几乎实现了所有类型对字节流的转换,是一个非常强大的工具类,在这里对它的做一个简单的提取,也加强一下自己对它的理解.在下面的工程中 ...

  2. kettle的使用（ETL，数据仓库技术）

    本周项目上用到了kettle并且需要做任务调度,听老师说用kettle自带的调度不大稳定于是便baidu了下,参照这篇文章完成了通过kitchen的调度,简单说就是通过windows的计划任务来调用. ...

  3. 熔断 降级（polly）

    熔断 降级(polly) https://www.cnblogs.com/szlblog/p/9300845.html1.熔断降级的概念: 熔断:我这里有一根长度一米的钢铁,钢铁的熔点1000度(假设 ...

  4. NSSM把.Net Core部署至 Windows 服务

    NSSM把.Net Core部署至 Windows 服务 https://www.cnblogs.com/emrys5/p/nssm-netcore.html 为什么部署至Windows Servic ...

  5. NET Core 防止跨站请求

    ASP.NET Core 防止跨站请求伪造(XSRF/CSRF)攻击 什么是反伪造攻击? 跨站点请求伪造(也称为XSRF或CSRF,发音为see-surf)是对Web托管应用程序的攻击,因为恶意网站可 ...

  6. net core分块上传文件

    net core分块上传文件   写完asp.net多文件上传(http://www.cnblogs.com/bestckk/p/5987383.html)后,感觉这种上传还是有很多缺陷,于是...( ...

  7. 050 Pow(x, n)

    实现 pow(x, n).示例 1:输入: 2.00000, 10输出: 1024.00000示例 2:输入: 2.10000, 3输出: 9.26100详见:https://leetcode.com ...

  8. PIX 防火墙

    ---恢复内容开始--- 一 , PIX 防火墙的认识 PIX 是cisco 的硬件防火墙 硬件防火墙的工作速度快,使用方便. PIX 有很多型号,并发连接数是PIX防火墙的重要参数   PIX 25 ...

  9. Kendo MVVM (二) ObservableObject 对象

    概述 Kendo MVVM 框架关键的一个部分为 ViewModel,它主要是通过 kendo.data.ObserableObject 来提供支持的.它可以监控改变( UI 变化或是值的变化)并通知 ...

  10. Android自定义组件系列【17】——教你如何高仿微信录音Toast

    一.Toast介绍 平时我们在Android开发中会经常用到一个叫Toast的东西,官方解释如下 A toast is a view containing a quick little message ...