1. 概述

Cesium支持加载影像图层，主要是各种地图服务。这里就通过Cesium实现添加影像地图和中文注记。

2. 实例

2.1. ImageryLayers.html

HTML的代码比较简单，主要还是导入了组件cesium.js及其样式表widgets.css,两者都来自于cesium源代码；然后创建了一个名为cesiumContainer的div图层，并设定其样式；最后是导入了自己写的JS代码ImageryLayers.js。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport"
  8.         content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  9.     <meta name="description" content="Create imagery layers from multiple sources.">
  10.     <meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases">
  11.     <title>Cesium Demo</title>
  12.     <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
  13.     <style>
  14.         @import url(../Build/Cesium/Widgets/widgets.css);
  15.         html,
  16.         body,
  17.         #cesiumContainer {
  18.             width: 100%;
  19.             height: 100%;
  20.             margin: 0;
  21.             padding: 0;
  22.             overflow: hidden;
  23.             font-family: sans-serif;
  24.             background: #000;
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <div id="cesiumContainer" class="fullSize"></div>
  31.     <script src="ImageryLayers.js"></script>
  32. </body>
  34. </html>

2.2. ImageryLayers.js

2.2.1. 代码

  1. //Add your ion access token from cesium.com/ion/
  2. Cesium.Ion.defaultAccessToken = '你申请的key';
  4. 'use strict';
  6. //默认BING影像地图
  7. var viewer = new Cesium.Viewer('cesiumContainer', {
  8.     imageryProvider: Cesium.createWorldImagery({
  9.         style: Cesium.IonWorldImageryStyle.AERIAL
  10.     }),
  11.     baseLayerPicker: false
  12. });
  14. //全球影像中文注记服务
  15. var imageryLayers = viewer.scene.imageryLayers;
  16. var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
  17.     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",
  18.     layer: "tdtAnnoLayer",
  19.     style: "default",
  20.     format: "image/jpeg",
  21.     tileMatrixSetID: "GoogleMapsCompatible"
  22. }));
  24. //tdtAnnoLayer.alpha = 0.5;
  25. //tdtAnnoLayer.brightness = 2.0;
  27. imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
  28.     url : '../images/Cesium_Logo_overlay.png',
  29.     rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
  30. }));

2.2.2. 解析

默认情况下，当创建Cesium.Viewer的时候，就包含了一个在线Bing影像地图图层，显式的创建形式如下：

  1. //默认BING影像地图
  2. var viewer = new Cesium.Viewer('cesiumContainer', {
  3.     imageryProvider: Cesium.createWorldImagery({
  4.         style: Cesium.IonWorldImageryStyle.AERIAL
  5.     }),
  6.     baseLayerPicker: false
  7. });

函数Cesium.createWorldImagery()可以直接创建带标注的图层，只要把这里的AERIAL修改为AERIAL_WITH_LABELS即可。可惜这里的标注是英文标注。

可以通过天地图来实现中文注记功能，天地图采用的是OGC的WMTS标准，Cesium中正好提供了相应的接口Cesium.WebMapTileServiceImageryProvider():

  1. //全球影像中文注记服务
  2. var imageryLayers = viewer.scene.imageryLayers;
  3. var tdtAnnoLayer = imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
  4.     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=您的密钥",
  5.     layer: "tdtAnnoLayer",
  6.     style: "default",
  7.     format: "image/jpeg",
  8.     tileMatrixSetID: "GoogleMapsCompatible"
  9. }));
  11. //tdtAnnoLayer.alpha = 0.5;
  12. //tdtAnnoLayer.brightness = 2.0;

可以看到新建的图层被添加到当前场景scene的图层集合对象readonlyimageryLayers中，它是一个Cesium.ImageryLayerCollection对象，用来管理图层对象Cesium.ImageryLayer。通过这个对象，可以设置当前图层的透明度、亮度、对比度等，对于图层的融合特别有用：

图1：Cesium.ImageryLayer参数

除此之外，还可以直接把一张本地（域内）的图片作为图层添加到特定的位置，是通过另外一个创建Cesium.ImageryLayer的接口Cesium.SingleTileImageryProvider()实现的：

  1. imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({
  2.     url : '../images/Cesium_Logo_overlay.png',
  3.     rectangle : Cesium.Rectangle.fromDegrees(113.6833, 29.99667, 115.0833, 31.51667)
  4. }));

3. 结果

在浏览器运行，得到影像地图和中文标注：

图2：中文标注

本地的图片被放到特定的位置，我这里放到了武汉市附近：

图3：加载本地图片

这个示例一定要注意Cesium自带的Bing地图和天地图都要申请对应的key才能正常显示，这里我把我自己申请的key略去了。

Cesium案例解析(二)——ImageryLayers影像图层的更多相关文章

  1. Cesium案例解析(三)——Camera相机

    目录 1. 概述 2. 实例 2.1. Camera.html 2.2. Camera.js 2.2.1. 飞行至某一点 2.2.2. 飞行至某区域 2.2.3. 两地之间飞行 2.2.4. 设置视图 ...

  2. Cesium案例解析(一)——HelloWorld

    目录 1. 概述 2. 实例 2.1. HelloWorld.html 2.2. HelloWorld.js 3. 结果 1. 概述 感觉网上已经有不少关于cesium的教程了,但是学习一个框架最快的 ...

  3. Cesium案例解析(六)——3DTilesInspector监视器

    目录 1. 概述 2. 案例 1. 概述 3D Tiles作为传输和渲染大规模3D地理空间数据的格式,应对的都是大规模数据的场景,Cesium提供了一个监视3D Tiles数据的监视器,可以通过这个监 ...

  4. Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    目录 1. 概述 2. 案例 3. 结果 1. 概述 3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等.与常规的模型文件格式 ...

  5. Cesium案例解析(四)——3DModels模型加载

    目录 1. 概述 2. 代码 3. 解析 4. 参考 1. 概述 Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据.glTF是为WebGL量身定制的数据格式,在网络环境 ...

  6. sql执行计划解析案例（二）

    sql执行计划解析案例(二)   今天是2013-10-09,本来以前自己在专注oracle sga中buffer cache 以及shared pool知识点的研究.但是在研究cache buffe ...

  7. 【Python五篇慢慢弹（5）】类的继承案例解析，python相关知识延伸

    类的继承案例解析,python相关知识延伸 作者:白宁超 2016年10月10日22:36:57 摘要:继<快速上手学python>一文之后,笔者又将python官方文档认真学习下.官方给 ...

  8. C#使用zxing，zbar，thoughtworkQRcode解析二维码，附源代码

    最近做项目需要解析二维码图片,找了一大圈,发现没有人去整理下开源的几个库案例,花了点时间 做了zxing,zbar和thoughtworkqrcode解析二维码案例,希望大家有帮助. zxing是谷歌 ...

  9. Hadoop学习笔记—20.网站日志分析项目案例（二）数据清洗

    网站日志分析项目案例(一)项目介绍:http://www.cnblogs.com/edisonchou/p/4449082.html 网站日志分析项目案例(二)数据清洗:当前页面 网站日志分析项目案例 ...

随机推荐

  1. Vue——watch监听对象，监听嵌套多次的对象属性

    首先是watch 然后是methods

  2. theano function参数

    train_rbm = theano.function( [index], # inputs cost, # outputs updates=updates, givens={ x: train_se ...

  3. 【翻译】.NET Core3.1发布

    .NET Core3.1发布 我们很高兴宣布.NET Core 3.1的发布.实际上,这只是对我们两个多月前发布的.NET Core 3.0的一小部分修复和完善.最重要的是.NET Core 3.1是 ...

  4. Selenium+Java（九）Selenium键盘与鼠标事件

    一.键盘事件 ctrl+a driver.findElement(By.id("kw")).sendKeys(Keys.CONTROL, "a"); ctrl+ ...

  5. 小白学 Python 爬虫（14）：urllib 基础使用（四）

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  6. 【立即报名】解码AI大杀器：华为云GPU+Tensorflow 容器实战

    导语: 人工智能的火热,带来了一波学习TensorFlow深度学习框架的热潮.聊深度学习免不了要用GPU,但目前GPU费用较高,对于个人学习者和创业公司来讲的话,按需配置的云GPU服务器是一个不错的选 ...

  7. 带着canvas去流浪系列之五 绘制K线图

    [摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  8. zabbix配置

    一:安装zabbix服务端 1.部署准备 命令:iptables -F     #关闭防火墙命令:systemctl stop firewalld    #关闭防火墙 设置解析,自建yum源 命令:c ...

  9. vue 各种打包坑

    1,报错 Refused to load the image 'http://localhost:8080/favicon.ico' because it violates the following ...

  10. [TimLinux] TCL 自定义包

    1. 包 很多功能存放在一起,定义为一个包,在iTcl(Incr TCL)之后,可以定义一个类,类可以放在一个包里面,包为一个独立的文件,可以为TCL文件,也可以为C/C++语言实现的动态库. 2. ...