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 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...
随机推荐
- Python-beautifulsoup库
#beautifulsoup库的安装 pip install beautifulsoup4 python -m pip install --upgrage pip from bs4 import Be ...
- 内核升级在线安装报错：Could not retrieve mirrorlist http://mirrors.elrepo.org/mirrors-elrepo-kernel.el7 error was14: curl#6 - "Could not resolve host: mirrors.elrepo.org; 未知的错误"
修改网卡配置 [root@localhost ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens32 BOOTPROTO="none" ...
- JVM的类加载机制全面解析
什么是类加载机制 JVM把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被JVM直接使用的Java类型,这就是JVM的类加载机制. 如果你对Class文件的结 ...
- Flink中的CEP复杂事件处理 (源码分析)
其实CEP复杂事件处理,简单来说你可以用通过类似正则表达式的方式去表示你的逻辑,表现能力非常的强,用过的人都知道 开篇先偷一张图,整体了解Flink中的CEP中的 一种重要的图 NFA非确定有限状 ...
- mybatis源码学习(三)-一级缓存二级缓存
本文主要是个人学习mybatis缓存的学习笔记,主要有以下几个知识点 1.一级缓存配置信息 2.一级缓存源码学习笔记 3.二级缓存配置信息 4.二级缓存源码 5.一级缓存.二级缓存总结 1.一级缓存配 ...
- react中简单倒计时跳转
其实在react中实现倒计时的跳转方法有很多中,其中我认为较为好用的就是通过定时器更改state中的时间值. 首先在constructor中设置10秒的时间值: constructor () { su ...
- C语言I作业08
C语言I作业08 这个作业属于哪个课程 C语言程序设计ll 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/9981 ...
- php方法注释
注释格式 <?php /** * @method 发送邮件 * @url email/send?token=xxx * @http POST * @param token string [必填] ...
- FastAdmin的基本使用
FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架. 1.在线命名管理 (1)菜单的生成 (2)一键 crud 首先要安装在线命名 在翡翠分类生成菜单,如下: 它的 ...
- docker镜像、docker容器导入导出命令
一.docker镜像导入导出命令 导出命令: docker save -o <保存路径> <镜像名称:标签> docker save -o ./test.tar test:la ...