Cesium案例解析(二)——ImageryLayers影像图层
1. 概述
Cesium支持加载影像图层，主要是各种地图服务。这里就通过Cesium实现添加影像地图和中文注记。
2. 实例
2.1. ImageryLayers.html
HTML的代码比较简单，主要还是导入了组件cesium.js及其样式表widgets.css,两者都来自于cesium源代码；然后创建了一个名为cesiumContainer的div图层，并设定其样式；最后是导入了自己写的JS代码ImageryLayers.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Create imagery layers from multiple sources.">
<meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases">
<title>Cesium Demo</title>
<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
background: #000;
}
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<script src="ImageryLayers.js"></script>
</body>
</html>
2.2. ImageryLayers.js
2.2.1. 代码
//Add your ion access token from cesium.com/ion/
Cesium.Ion.defaultAccessToken = '你申请的key';
'use strict';
//默认BING影像地图
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
}),
baseLayerPicker: false
});
//全球影像中文注记服务
var imageryLayers = viewer.scene.imageryLayers;
var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=d99ffacb3eeafd378927c060ab39bdab",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}));
//tdtAnnoLayer.alpha = 0.5;
//tdtAnnoLayer.brightness = 2.0;
imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
}));
2.2.2. 解析
默认情况下，当创建Cesium.Viewer的时候，就包含了一个在线Bing影像地图图层，显式的创建形式如下：
//默认BING影像地图
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: Cesium.createWorldImagery({
style: Cesium.IonWorldImageryStyle.AERIAL
}),
baseLayerPicker: false
});
函数Cesium.createWorldImagery()可以直接创建带标注的图层，只要把这里的AERIAL修改为AERIAL_WITH_LABELS即可。可惜这里的标注是英文标注。
可以通过天地图来实现中文注记功能，天地图采用的是OGC的WMTS标准，Cesium中正好提供了相应的接口Cesium.WebMapTileServiceImageryProvider():
//全球影像中文注记服务
var imageryLayers = viewer.scene.imageryLayers;
var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=您的密钥",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible"
}));
//tdtAnnoLayer.alpha = 0.5;
//tdtAnnoLayer.brightness = 2.0;
可以看到新建的图层被添加到当前场景scene的图层集合对象readonlyimageryLayers中，它是一个Cesium.ImageryLayerCollection对象，用来管理图层对象Cesium.ImageryLayer。通过这个对象，可以设置当前图层的透明度、亮度、对比度等，对于图层的融合特别有用：
除此之外，还可以直接把一张本地（域内）的图片作为图层添加到特定的位置，是通过另外一个创建Cesium.ImageryLayer的接口Cesium.SingleTileImageryProvider()实现的：
imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : '../images/Cesium_Logo_overlay.png',
rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
}));
3. 结果
在浏览器运行，得到影像地图和中文标注：
本地的图片被放到特定的位置，我这里放到了武汉市附近：
这个示例一定要注意Cesium自带的Bing地图和天地图都要申请对应的key才能正常显示，这里我把我自己申请的key略去了。
Cesium案例解析(二)——ImageryLayers影像图层的更多相关文章
- Cesium案例解析(三)——Camera相机
目录 1. 概述 2. 实例 2.1. Camera.html 2.2. Camera.js 2.2.1. 飞行至某一点 2.2.2. 飞行至某区域 2.2.3. 两地之间飞行 2.2.4. 设置视图 ...
- Cesium案例解析(一)——HelloWorld
目录 1. 概述 2. 实例 2.1. HelloWorld.html 2.2. HelloWorld.js 3. 结果 1. 概述 感觉网上已经有不少关于cesium的教程了,但是学习一个框架最快的 ...
- Cesium案例解析(六)——3DTilesInspector监视器
目录 1. 概述 2. 案例 1. 概述 3D Tiles作为传输和渲染大规模3D地理空间数据的格式,应对的都是大规模数据的场景,Cesium提供了一个监视3D Tiles数据的监视器,可以通过这个监 ...
- Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据
目录 1. 概述 2. 案例 3. 结果 1. 概述 3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等.与常规的模型文件格式 ...
- Cesium案例解析(四)——3DModels模型加载
目录 1. 概述 2. 代码 3. 解析 4. 参考 1. 概述 Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据.glTF是为WebGL量身定制的数据格式,在网络环境 ...
- sql执行计划解析案例（二）
sql执行计划解析案例(二) 今天是2013-10-09,本来以前自己在专注oracle sga中buffer cache 以及shared pool知识点的研究.但是在研究cache buffe ...
- 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸
类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...
- C#使用zxing，zbar，thoughtworkQRcode解析二维码，附源代码
最近做项目需要解析二维码图片,找了一大圈,发现没有人去整理下开源的几个库案例,花了点时间 做了zxing,zbar和thoughtworkqrcode解析二维码案例,希望大家有帮助. zxing是谷歌 ...
- Hadoop学习笔记—20.网站日志分析项目案例（二）数据清洗
网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...
随机推荐
- Java基础面试题及答案（三）
多线程 35. 并行和并发有什么区别? 并行是指两个或者多个事件在同一时刻发生:而并发是指两个或多个事件在同一时间间隔发生. 并行是在不同实体上的多个事件,并发是在同一实体上的多个事件. 在一台处理器 ...
- Caused by: java.util.zip.ZipException: zip file is empty
1.问题描述:mybranch分支代码和master分支的代码一模一样,mybranch代码部署到服务器上没有任何问题,而master代码部署到服务器上运行不起来. 2.解决办法: (1)登陆服务器启 ...
- MySQL 库、表、记录、相关操作（2）
库.表.记录.相关操作(2) 字段操作 create table tf1( id int primary key auto_increment, x int, y int ); # 修改 alter ...
- C语言I作业09
问题 回答 这个作业属于哪个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/10032 我在 ...
- Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览
本文是Spring Cloud专栏的第一篇文章,了解本篇文章内容有助于更好的理解后面文章 一.网站架构演变过程 1-1.传统架构 传统的SSH架构,分为三层架构 web控制层.业务逻辑层.数 ...
- PHP随机生成中国人姓名的类
PHP随机生成类 <?php /*rndChinaName.class.php*/ Class rndChinaName { private $arrXing,$numbXing; privat ...
- PAT乙级练习（1001）
1001 害死人不偿命的(3n+1)猜想 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n + 1) 砍掉一半.这样一直反复砍下去,最 ...
- java调用webservice，比较简单方便的方法。
首先,请同学们自行了解webservice的基础知识. 个人理解,webservice约等于使用http+xml技术进行跨平台的数据交互. http和xml我们都很熟悉了,把他们两个组合到一起就是we ...
- html汇总
- 共享共建会让中国的5G加速吗？
9月9号,中国联通正式公告,已与中国电信签署<5G网络共建共享框架合作协议书>,将在全国范围内合作共建5G接入网络. 这则消息堪称爆炸性新闻,但却看不到什么深度分析,评论文章除了强调&qu ...