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

        }

    </style>

</head>

<body>

    <div id="cesiumContainer" style="height:100%"></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'

            });

            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'

            });

            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'

                });

                return esri;

            }

        });

        //影像底图加载

        let imageryProvider = 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',

                layer: 'img',

                style: 'default',

                format: 'tiles',

                tileMatrixSetID: 'w',

                credit: new Cesium.Credit('天地图全球影像服务'),

                // maximumLevel:7,

                show:false,

        });

        let viewer = new Cesium.Viewer('cesiumContainer',{

            //隐藏底图切换

            baseLayerPicker:true,

            //影像底图加载

            imageryProvider: imageryProvider,

            //地形加载

            //terrainProvider:terrainProvider

            animation:false,//是否创建动画小器件，左下角仪表

            timeline: false,//是否显示时间轴

            sceneModePicker: false,//是否显示3D/2D选择器

            baseLayerPicker: true,//是否显示图层选择器

            geocoder: false,//是否显示geocoder小器件，右上角查询按钮

            imageryProviderViewModels: [img_tdt_yx, img_tdt_dx, img_tdt_sl],//可供BaseLayerPicker选择的图像图层ProviderViewModel数组

            selectedImageryProviderViewModel: img_tdt_yx,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义

            scene3DOnly: true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源

            navigationHelpButton: false,//是否显示右上角的帮助按钮

            homeButton: false,//是否显示Home按钮

            infoBox: true,//是否显示信息框

            showRenderLoopErrors: false//如果设为true，将在一个HTML面板中显示错误信息 

        });

        //影像标注加载

        viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({

            url: "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",

            layer: "tdtImgAnnoLayer",

            style: "default",

            format: "image/jpeg",

            tileMatrixSetID: "GoogleMapsCompatible",

            show: false

        }))

        //隐藏cesium左下角logo

        viewer._cesiumWidget._creditContainer.style.display = 'none';

    </script>

</body>

</html>

这样就ok了

cesium底图加载底图切换 基于天地图服务的更多相关文章

  1. cesium 基于天地图服务 完成底图标注渲染加切换

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

  2. Cesium 基于MapBox底图加载3DTiles 模型

    3DTiles 模型采用   CATIA V5 R22 --->3dxml --->GLB--->B3DM var extent = Cesium.Rectangle.fromDeg ...

  3. Cesium专栏-百度地图加载（附源码下载）

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  4. arcgis 瓦片图加载规则（转载）

    arcgis 瓦片图加载规则 最近需要做地图离线的功能,要能下载指定区域的瓦片图,我们都知道如何加载谷歌和天地图的加载规则,但是网上貌似没有找到如何加载arcgis自己发布的瓦片图规则,好不容易找到一 ...

  5. arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api for javascript - 最基本的地图加载

    为大家贴贴最基本的地图加载: 一. API 根据Dom树上节点的 ID 确定 Map 的显示位置; 二. setBasemap 方法可得到一些ArcGIS制作好的底图,例如: "street ...

  7. 在idesktop中加载天地图服务并叠加矢量数据

    在天地图中加载天地图在线服务,然后叠加上我们制作的专题图,可以查看制图效果. 以加载山东省天地图矢量地图服务为例: 服务地址: http://www.sdmap.gov.cn/tileservice/ ...

  8. AMap地图加载完成事件

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Openlayers+Geoserver（一）：项目介绍以及地图加载

           项目验收完,趁着事情不是很多,对这个项目进行梳理.我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题.另一个是数据的校验,就是 ...

随机推荐

  1. 阿里云(centos)下svn 服务器搭建

    安装说明 系统环境:阿里云centos安装方式:yum install subversion 检查已安装版本 #检查是否安装了低版本的SVN[root@localhost /]# rpm -qa su ...

  2. 新的JSON / YAML插件：在JMeter中使用YAML

    在JMS插件从jmeter-plugins.org捐赠给核心JMeter之后,JSON插件在Apache JMeter™版本4中被弃用.现在,我已更新此插件以支持新功能和新功能.在这个新版本中,两个插 ...

  3. NET Core 2.0 自定义

    ASP.NET Core 2.0 自定义 _ViewStart 和 _ViewImports 的目录位置 在 ASP.NET Core 里扩展 Razor 查找视图目录不是什么新鲜和困难的事情,但 _ ...

  4. C# 序列化与反序列化json

    与合作伙伴讨论问题,说到的c++与c#数据的转换调用,正好就说到了序列化与反序列化,同样也可用于不同语言间的调用,做了基础示例,作以下整理: using System.Data; using Syst ...

  5. 使用Zeppelin时出现at org.apache.zeppelin.interpreter.thrift.RemoteInterpreterService$Client.recv_getFormType(RemoteInterpreterService.java:288)错误的解决办法（图文详解）

    不多说,直接上干货! 问题详解 org.apache.thrift.TApplicationException: Internal error processing getFormType at or ...

  6. 实现Sublime Text3中vue文件高亮显示的最有效的方法

    今天第一次使用Sublime Text3软件,在实现vue文件高亮显示的过程中一直报错,经过了半天时间的不停尝试终于找到了最有效的一种解决方法!错误提示如下: 刚开始尝试了很多方法都不行,只要打开in ...

  7. 从一个LocalDateTime引发的疑问

    一 公司有同事部署出错,然后查日志,找时间,从k8s得到的时间是  2017-06-16T09:38:48.580 +0000,然后他就纳闷了,因为他根本不会在9点部署好吧,而且9点大多数程序员都没开 ...

  8. 开发中遇到的Cause: java.sql.SQLException: connection holder is null的异常

    异常的出现是属于获取连接超时,从而找不到持有者. 项目中的配置体现: <property name="removeAbandoned" value="true&qu ...

  9. 从零开始的Lua宅[1]：编译Lua解释器

    Lua是一门神奇的脚本语言,游戏宅必备,懒人必备.Lua差多不是学起来用起来最简单的语言了,以至于简单到自身就是文档,自身就是配置文件.但是Lua的运行效率却是众多脚本中非常高的,据说仅次于V8爹下的 ...

  10. vim的命令

    下面是从一个博客里摘抄出来的, 供自己学习使用.   在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n= ...