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 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...
随机推荐
- Acid burn crackme 的第一道分析
1.首先查下壳: 没壳,一个用delphi写的程序. 接下来就直接丢OD看看了,看一下界面, 就是这里需要验证了,然后下个bp MessageBoxA 断点 就直接跳到这来了: 在栈中返回到上一级去, ...
- Deep attention tracking via Reciprocative Learning
文章:Deep attention tracking via Reciprocative Learning 出自NIPS2018 文章链接:https://arxiv.org/pdf/1810.038 ...
- day 24 组合的补充
一.组合的补充: 1.类或对象可以做字典的key 2.对象中到底有什么? # class Foo(object): # # def __init__(self,age): # self.age = a ...
- Streams：深入理解Redis5.0新特性
概述 相较于Redis4.0,Redis5.0增加了很多新的特性,而streams是其中最重要的特性之一.streams是redis 的一种基本数据结构,它是一个新的强大的支持多播的可持久化的消息队列 ...
- Android利用碎片fragment实现底部标题栏(Github模板开源)
在安卓开发当中,一个十分重要的布局则是底部标题栏了,拥有了底部标题栏,我们就拥有了整个软件UI开发的框架,一般而言,整个软件的布局首先就是从底部标题栏开始构建,然后再开始其他模块的编写,组成一个完善的 ...
- ++a与a++、--a与a--
++a 与 a++ public class Demo { public static void main(String[] args) { int a = 1; System.out.println ...
- CSS 了解一下
CSS 认识一下 1.CSS 的那些事 CSS(Cascading Style Sheets)译「层叠样式表」,我的理解是:各种样式叠加的表. 一个网页,如果没有 CSS,就是穿着"国王的新 ...
- socket实现ftp上传下载
socket实现ftp文件的上传和下载 server端代码: import socket import json import struct import os soc = socket.socket ...
- 补习系列(20)-大话 WebSocket 与 "尬聊"的实现
目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参 ...
- 转:Maven的默认中央仓库以及修改默认仓库&配置第三方jar包从私服下载
当构建一个Maven项目时,首先检查pom.xml文件以确定依赖包的下载位置,执行顺序如下: 1.从本地资源库中查找并获得依赖包,如果没有,执行第2步. 2.从Maven默认中央仓库中查找并获得依赖包 ...