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 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...
随机推荐
- 阿里云：uwsgi--配置出错 bind(): Address already in use [core/socket.c line 769]
按照网上配置nginx+uwsgi+django的文章,nginx启动成功,django启动也成功,单独用uwsgi --http :8000 命令启动uwsgi也成功.使用uwsgi --sock ...
- python3 之 匿名函数
一.语法: lambda 参数:方法(或三元运算) #最多支持3元运算 二.实例1:基础 #函数1: a = lambda x:x*x print(a(2)) #函数2: def myfun(x): ...
- 【NHOI2018】字符串变换
[题目描述] 给你一个全部由大小写字母组成的字符串,你每次可以将一个小写字母变换成对应的大写字母,或把一个大写字母变换成对应的小写字母.请问:至少要进行多少次变换才可以使整个字符串全部由大写字母或全部 ...
- 【CPLUSOJ】【动态规划】最短回文串
题目链接 [问题描述] 如果一个字符串正过来读和倒过来读是一样的,那么这个字符串就被称作回文串.例如abcdcba,abcddbca就是回文串,而abcdabcd不是. 你要解决的问题是:对于任意一个 ...
- 批量更新Linux文件后缀名
#!/bin/bash#Create_Time 2019-08-06#use: small_wei #查找并,批量修改文件后缀 #后缀为 .txt 修改为 .log find /opt -name & ...
- 【RN - 基础】之View使用简介
简介 View是一个容器,支持FlexBox布局. View既可以作为容器容纳其他组件,也可以作为一个组件包含进另一个容器中. 无论运行在哪个平台上,View都会直接对应这个平台的原生视图,如iOS中 ...
- CentOS 7 安装 dnsmasq 服务 实现内网DNS
目录 安装 配置 服务管理 测试解析 安装 废话不多述,上来就安装 yum install -y bind-utils dnsmasq 配置 [root@jenkins ~]# rpm -ql dns ...
- yarn和npm的对比以及yarn的使用
0--前言 为什么要使用yarn,如果你从事前端开发有些年头了,那你肯定对npm又爱又恨,爱就不说了,恨嘛,就是NPM经常奇慢和卡顿,这还能忍,经常各种错误就没法忍了,尤其是他人创建的项目,自己在安装 ...
- jquery列表操作
<span> <button>全选</button> <button>不选</button> <button>反选</bu ...
- libnl的移植
libnl简介 libnl是为了方便应用程序使用netlink接口而开发的一个库.这个库为原始netlink消息传递以及不同的netlink,family专用接口提供了一个统一的接口.libnl2.0 ...