文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d

上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些服务,能够支持天地图,Google Maps等自定义影像服务。

扩展影像服务

天地图影像服务

以国内数据的范畴来看,个人认为最佳,一来是数据内容和完整性,二来是不用许可无偏移,三来浏览速度还是很不错,国内其他影像服务能够满足这三点的并不多。

天地图影像服务都是全球范围,分为墨卡托投影和经纬度两种坐标系,后者标识的是CGCS2000坐标系,对我这样的非专业人士,我等同于WGS84。另外,天地图提供了中英文的注记,也是很不错的。

首先我们看一下墨卡托投影的全球影像图,遵循WMTS规范,服务URL如下:

http://t0.tianditu.com/img_w/wmts

首先,通过天地图的GetCapabilities信息,获取其相关的参数,重要信息如下:

通过红框处,我们可以知道,该WMTS服务的url,Layer的Name,Style,Format以及TileMatrixSet等关键属性的值。有了这些属性,我们就可以通过WebMapTileServiceImageryProvider构造出天地图的Provider,代码如下:

创建天地图不麻烦,但如何更好的创建呢?比如轮询机制,我们知道天地图提供了't0','t1','t2','t3','t4','t5','t6','t7'8个域名,服务端TCP最大链接数是有限制的,轮询机制下瓦片下载的速度更有保证,很可惜,尽管Cesium提供了subdomains的属性,但需要把url按照format的方式来指定参数 ,所以我们需要稍微调整一下构建过程,把我们需要的参数都format到url中 ,代码如下:

尽管这个url确实很长,自己手动拼这样一个url是要花一点时间,不过毕竟在性能上得到了优化,也算是劳有所得。

看上去天地图大功告成了,别着急,还有最后一个地方要交代清楚。刚才我们都是用的墨卡托投影,而Cesium大多也是默认Provider是按照墨卡托投影的,但天地图也提供了经纬度的影像服务,虽然叠到地球上都一个样子,但空穴不回来风的,肯定有它存在的价值(经纬度的价值稍后再说),那我们看看经纬度的天地图如何加载?

和前面的思路完全一样,但在创建Provider时需要同时构建tilingScheme,指定其为经纬度坐标系即可,代码如下:

创建经纬度的天地图需要注意两个地方,一个是tilingScheme,指定为经纬度,另一个就是tileMatrixLabels,因为level是从1开始(而不是0),所以需要指定每一层级的索引号。

Google Map影像服务

坦白说,GoogleMap的影像服务有些不实用,国内限制多,需要申请key,而且,关键是水印太多,每一个Tile都会有水印,但我们还是再次提供一下。创建GM和创建ArcGIS比较类似。

首先,GM的url格式如下:

http://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center={y},{x}&zoom={level}&size=256x256&key={key}

指定中心点和级别,以及key。Key需要个人申请,而中心点和级别则需要根据xyz的行列号自己来计算,在googlemap的范例里面已经实现,此处不介绍实现思路,有兴趣的可以看代码注释。基于这个类,可以很简单的加载Google Map影像服务,当然,你要申请自己的Key:

通过Cesium自带的Provider以及扩展的Provider,基本上涵盖了所有的Provider,至于没有涵盖的,其实现思路也都如出一辙,但除了百度地图。因为其行列号是从经纬度(0,0)开始的,所以存在一个墨卡托xyz到百度xyz的映射过程,我在baidu.html中也实现了该Provider,不过你可以看到,没法用,所以一笔带过。

除此之外,Cesium在新版本中还提供了TileCoordinatesImageryProvider和GridImageryProvider两个Provider,个人认为这两个主要为开发人员提供的,如果有兴趣可以参考Cesium自带范例,也提醒一下TileCoordinatesImageryProvider默认是按照墨卡托投影的,如果你需要经纬度的瓦片切分方式,则需要指定tilingScheme属性,和经纬度的天地图属于同一个问题。而其实现看上去很专业,其实是在Canvas中绘制成一个Image,然后作为Tile贴到球上去的,也算是二维和三维一个很好的结合效果展现,让我想起了风向图。

常见问题

多个Provider叠加

这是一个非常基本的功能,毕竟很难用一个Provider满足用户的业务要求,比如有一个全球影像,但同时有一副全美人口密度专题图,是否能够叠加上去?

看似简单,其实里面涉及到很多细节问题,叠加顺序涉及到渲染队列的优先级,两幅影像的投影不一致怎么办?如果全美人口密度专题图不是全球范围,只是美国范围,这样叠加是否能够准确?

Cesium很好的解决了这些实际中的问题,简单说每一个Provider都对应一个tilingScheme,支持经纬度和墨卡托两种投影方式,默认是全球范围,用户也可以指定其范围,Cesium内部会根据这些参数来实现叠加效果。可以指定每一个ImagerLayer的Style。

ImageryLayerCollection类是一个图层管理器,可以调整多个图层之间的顺序,添加和删除等。详细内容可以查看Cesium接口文档或本章的MultiProvider.html范例。

性能

刚才说了,支持经纬度和墨卡托两种方式,而且效率都很不错,那我们该如何选择呢?当然是有什么就用什么了,但相比而言,经纬度的效率要快一些。可惜墨卡托的影像更丰富一些。为什么经纬度的效率高,这要牵扯到地形数据,以及动态投影的计算,后面在介绍Cesium地形原理时,会详细的阐述,这里我们只需要知道这个性能考虑因素就可以了。

水印

有很多人希望去掉这个,很简单,在js中添加这句话即可(可参考MultiProvider.html范例):

Cesium应用篇:2影像服务(下)的更多相关文章

  1. 影像服务——加载CESIUM自带的影像服务

    1.加载arcgis数据——ArcGisMapServerImageryProvider var viewer = new Cesium.Viewer("cesiumDiv",{ ...

  2. Cesium应用篇:2影像服务(上)

    文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d        Cesium中提供了多种ImageryProvider方式,来满足用户的实际需 ...

  3. Cesium原理篇:5最长的一帧之影像

    如果把地球比做一个人,地形就相当于这个人的骨骼,而影像就相当于这个人的外表了.之前的几个系列,我们全面的介绍了Cesium的地形内容,详见: Cesium原理篇:1最长的一帧之渲染调度 Cesium原 ...

  4. Cesium原理篇:7最长的一帧之Entity(下)

    上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...

  5. Cesium原理篇:3最长的一帧之地形(1)

    前面我们从宏观上分析了Cesium的整体调度以及网格方面的内容,通过前两篇,读者应该可以比较清楚的明白一个Tile是怎么来的吧(如果还不明白全是我的错).接下来,在前两篇的基础上,我们着重讨论一下地形 ...

  6. Cesium原理篇:3最长的一帧之地形(2:高度图)

           这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维 ...

  7. Cesium原理篇:7最长的一帧之Entity(上)

    之前的最长的一帧系列,我们主要集中在地形和影像服务方面.简单说,之前我们都集中在地球是怎么造出来的,从这一系列开始,我们的目光从GLOBE上解放出来,看看球面上的地物是如何渲染的.本篇也是先开一个头, ...

  8. Cesium原理篇:2最长的一帧之网格划分

    上一篇我们从宏观上介绍了Cesium的渲染过程,本章延续上一章的内容,详细介绍一下Cesium网格划分的一些细节,包括如下几个方面: 流程 Tile四叉树的构建 LOD 流程 首先,通过上篇的类关系描 ...

  9. cesium原理篇(三)--地形(1)【转】

    转自:http://www.cnblogs.com/fuckgiser/p/5824743.html 简述 前面我们从宏观上分析了Cesium的整体调度以及网格方面的内容,通过前两篇,读者应该可以比较 ...

随机推荐

  1. 代码编辑器Sublime Text 3 免费使用方法与简体中文汉化包下载

    Sublime Text这款代码编辑器是Jeff 一直都在使用的,前段时间转用到版本3,因为感觉Sublime Text 3 启动速度更加快,运行更加流畅——虽然3 还是在Beta 阶段.下面就直接分 ...

  2. 打造AngularJs2.0开发环境

    angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...

  3. 微信支付:JSAPI支付一直提示URL未注册

    今天意外碰上了这个问题,想想微信的坑真多…… 解决办法: 首先要看微信公众号里的 支付授权目录 是否已正确填写,还要验证 url大小写 必须相同 其次查看一下自己请求的地址是否与上面填写的是否一样!u ...

  4. SharePoint 2010中一些必须知道的限制

    最大文件名长度是123个字符. 一个文档库(library)里最多可以存放10000个文档 一个视图(view)里最多显示5000个条目(item) 推荐的单个内容数据库(content databa ...

  5. nmea协议

    NMEA协议 信息类型为: GPGSV:可见卫星信息 GPGLL:地理定位信息 GPRMC:推荐最小定位信息 GPVTG:地面速度信息 GPGGA:GPS定位信息 GPGSA:当前卫星信息 1. Gl ...

  6. Hadoop 和 HDInsight:Windows Azure 中的大数据

    世界的大数据包含一个庞大而充满活力的生态系统,但一个开放源码项目上面有这一切,那就是 Hadoop 的王朝. Hadoop 是事实上的标准的分布式的数据运算.Hadoop 提供了一个 MapReduc ...

  7. 解读ASP.NET 5 & MVC6系列(5):Configuration配置信息管理

    在前面的章节中,我们知道新版的MVC程序抛弃了原来的web.config文件机制,取而代替的是config.json,今天我们就来深入研究一下配置文件的相关内容. 基本用法 新版的配置信息机制在Mic ...

  8. AngularJS基础入门初探

    一.AngularJS简介 1.1 什么是AngularJS (1)一款非常优秀的前端JS框架,可以方便实现MVC/MVVM模式 (2)由Misko Hevery 等人创建,2009年被Google所 ...

  9. 常用RGB色值表

      R G B 值   R G B 值   R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 象牙黑 41 ...

  10. HTML5_02之视频、音频、Canvas

    1.HTML5新特性之视频播放--video: ①例:<video src=""></video> ②video标签默认为300*150的inline-bl ...