Cesium开发基础笔记总结（加载影像、加载地形数据、加载矢量） ...

圆咕噜咕噜  金牌会员 | 2022-6-25 19:16:11 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 817|帖子 817|积分 2451

Cesium开发基础笔记总结

学习总结于GIS李胜老师博客
Cesium开发基础01加载影像数据

加载影像数据
Cesium中的影像图层类：

无论是二维地图还是三维地图，如果缺少了底图影像或电子地图，都是不完整的。**Cesium为我们提供了ImageryLayerCollection、ImageryLayer以及相关的ImageryProvider类来加载不同的影像图层。*虽然Cesium把此类图层叫做Imagery，但并不是特指卫星影像数据，还包括一些互联网地图、TMS、WMS、WMTS、单个图片等。
ImageryLayer类：
Cesium.ImageryLayer类用于表示Cesium中的影像图层。
它就相当于皮毛、衣服，将数据源包裹在内，它需要数据源（imageryProvider）为其提供内在丰富的地理空间信息和属性信息。
同时，通过该类还能设置影像图层相关属性，比如透明度、亮度、对比度、色调等。
ImageryProvider类：
Cesium.ImageryProvider类及其子类封装了加载各种影像图层的方法，其中Cesium.ImageryProvider类是抽象类、基类或者可将其理解为接口，它不能被直接实例化。提供要显示在椭球表面上的图像。此类型描述了接口，不能直接实例化。
我们可以把ImageryProvider看作是影像图层的数据源（包裹在ImageryLayer类内部），我们想使用哪种影像图层数据或服务就用对应的ImageryProvider子类去加载。
目前Cesium提供了以下15种ImageryProvider：
ArcGisMapServerImageryProvider
BingMapsImageryProvider
OpenStreetMapImageryProvider
TileMapServiceImageryProvider
GoogleEarthEnterpriseImageryProvider
GoogleEarthEnterpriseMapsProvider
GridImageryProvider
IonImageryProvider
MapboxImageryProvider
MapboxStyleImageryProvider
SingleTileImageryProvider
TileCoordinatesImageryProvider
UrlTemplateImageryProvider
WebMapServiceImageryProvider
WebMapTileServiceImageryProvider
ImageryLayerCollection类：
Cesium.ImageryLayerCollection类是ImageryLayer类对象的容器，它可以装载、放置多个ImageryLayer或ImageryProvider类对象，而且它内部放置的ImageryLayer或ImageryProvider类对象是有序的。
Cesium.Viewer类对象中包含的imageryLayers属性就是ImageryLayerCollection类的实例，它包含了当前Cesium应用程序所有的ImageryLayer类对象。
Cesium加载不同类型的影像图层
根据上面提供的Provider可知道，目前Cesium支持15种类型的影像图层。
这里主要介绍以下几个：
ArcGisMapServerImageryProvider：
Cesium提供了ArcGisMapServerImageryProvider，可以方便的加载ArcGIS online和Server上的数据。
首先获取该影像服务的地址，下面以ESRI_Imagery_World_2D为例，WGS1984坐标系，全球范围，只需要指定url，就可以在Cesium下快速加载该服务。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码

BingMapsImageryProvider：
Bing地图影像，可以指定mapStyle，详见BingMapsStyle类。
Cesium中提供了BingMapsImageryProvider。使用方式和ArcGIS一样简单，代码如下：
需要Bing地图的free Basic Key
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码
OpenStreetMapImageryProvider：
Cesium中提供了加载OpenStreetMap的Provider，代码如下：
OSM影像服务，根据不同的url选择不同的风格。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码

GridImageryProvider（开发调试）：
展示内部渲染网格划分情况，了解每个瓦片的精细度，便于调试地形和图像渲染问题。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码

SingleTileImageryProvider：
单张图片的影像服务，适合离线数据或对影像数据要求并不高的场景下。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码

TileCoordinatesImageryProvider（开发调试）：
展示内部渲染网格瓦片划分情况，包括网格瓦片等级、X、Y序号，便于调试地形和图像渲染问题。当然也可以和GridImageryProvider一起叠加使用。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码

UrlTemplateImageryProvider：
指定url的format模版，方便用户实现自己的Provider.比如国内的高德，腾讯等影像服务，url都是一个固定的规范，都可以通过该Provider轻松实现。而OSM也是通过该类实现的，以下是使用XYZ方式加载上面加载过的OSM影像服务。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>
复制代码

WebMapTileServiceImageryProvider：
服务WMTS1.0.0规范的影像服务，都可以通过该类实现，比如国内的天地图。
获取天地图TK
获取Cesium Access Tokens
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>   
复制代码

Cesium开发基础02加载地形数据

Cesium中的地形图层类

Cesium提供了TerrainProvider基类，该Provider负责每一个Tile对应的地形数据的构建，定义了一套地形Provider需要实现的接口和规范，但本身并不会参与其中的操作。
基于此类，cesium为我们封装了5个现成的继承类操作地形数据：
ArcGISTiledElevationTerrainProvider
EllipsoidTerrainProvider
CesiumTerrainProvider
VRTheWorldTerrainProvider
GoogleEarthEnterpriseTerrainProvider
terrainProvider不像上一讲介绍的影像图层（有专门的ImageryLayer）那样，Cesium中的地形类是直接通过不同的terrainProvider控制的，然后把某一个实例化的terrainProvider赋值给Viewer.terrainProvider来控制地形数据的显隐。所以Cesium中的地形图层只能有一个。
Cesium加载不同的地形数据

Cesium支持两种类型的地形，STK World Terrain和Small Terrain。
下面我们主要介绍Cesium中常用的2个terrainProvider：
​ArcGISTiledElevationTerrainProvider​：
ArcGIS的地形，这个可以说是一个真实的（凹凸的）高度图，原理和EllipsoidTerrainProvider如出一辙，因此同样的不支持法线，水面，但可以选择TileScheme，与EllipsoidTerrainProvider不一样之处在于每一个切片会根据ArcGIS规范请求一张图片，该图片中的像素对应的值就是该像素对应的高度，真的是名副其实的高度图。
  1. var terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
  2.       url:
  3.         "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
  4.       token:
  5.         "KED1aF_I4UzXOHy3BnhwyBHU4l5oY6rO6walkmHoYqGp4XyIWUd5YZUC1ZrLAzvV40pR6gBXQayh0eFA8m6vPg..",
  6.     });
  7.     viewer.terrainProvider = terrainProvider;
复制代码
CesiumTerrainProvider：
Cesium标准地形，在该Provider中支持两种地形格式，一种是高度图（目前Cesium已经废弃 ），另一种则是TIN网格的STK地形。
Cesium厉害的之处就在于目前采用STK的地形服务，并通过QuantizedMeshTerrainData封装了STK地形数据格式，它的优点是支持水面和法线，同时数据量比较小。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>   
复制代码

Cesium开发基础03加载矢量数据

加载矢量数据

一个shapfile必须包含的文件：
主文件（.shp）：存储地理要素的几何信息
索引文件（.shx）：存储要素几何图形的索引信息
dBase表文件（*.dbf）：存储地理要素的属性信息（非几何信息）
除此之外还有可选的文件：
空间参考文件（.prj）：存储空间参考信息，即地理坐标系统信息和投影坐标系统信息，使用well-known文本格式（WKT）进行描述。
几何体的空间索引文件（​.sbn 和 .sbx）、只读的Shapefiles的几何体的空间索引文件（.fbn 和​.fbx）等等。
shapfile如此强大和受欢迎，只可惜Cesium却不能直接加载shp文件，如果想加载shp文件，感兴趣的可以参考这位大牛封装的库CesiumVectorTile。Cesium直接支持的矢量数据格式包括：geojson、topojson、kml以及具有时间特性的czml，并以DataSouce后缀去命名相关的类。
dataSources:DataSourceCollection：
CustomDataSource
CzmlDataSource
GeoJsonDataSource
KmlDataSource
Cesium加载geojson文件：
GeoJSON是用于描述地理空间信息的数据格式，它不是一种新的格式，其语法规范是符合JSON格式的，只不过对其名称进行了规范，专门用于表示地理信息。
GeoJSON的最外层是一个单独的对象（object）。这个对象可表示：
① 几何体（Geometry）；
② 特征（Feature）；
③ 特征集合（FeatureCollection）；
最外层的 GeoJSON 里可能包含有很多子对象，每一个 GeoJSON 对象都有一个 type 属性，表示对象的类型，其type 的值可以是：Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection、Feature、FeatureCollection。下面是一个GeoJSON特征集合示例：
China.json的下载地址：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>   
复制代码

​TopoJSON介绍​：
TopoJSON是 GeoJSON 按拓扑学编码后的扩展形式，是由 D3 的作者 Mike Bostock 制定的。相比 GeoJSON 直接使用Polygon、Point之类的几何体来表示图形的方法，TopoJSON中的每一个几何体都是通过将共享边（被称为arcs）整合后组成的。对比简易图如下：

TopoJSON使用坐标（点）、弧（线、多边形）来表示地理图形，它由transform、objects和arcs三部分组成。transform描述了变换参数；objects描述地理实体包含空间及属性信息；arcs描述了有向弧的空间关系，弧由一系列起点及相对于起点的有向偏移坐标表示。基于这种弧的存储方式可以表达出拓扑关系，由于弧只记录一次及地理坐标使用整数，不使用浮点数，相对于GeoJSON，TopoJSON 消除了冗余，文件大小缩小了 80%。
在线工具推荐​：
JSON在线解析及格式化：​ ​https://www.json.cn/​​
在线生成 GeoJSON：​ ​http://geojson.io/​​
shp数据转 GeoJSON 和 TopoJSON：​ ​http://mapshaper.org/​​
GeoJson和TopopJson在线转换：​ ​http://jeffpaine.github.io/geojson-topojson/
Cesium加载kml文件：
​KML介绍​
KML (keyhole markup language)是一种基于XML语法格式的文件，用来描述和存储地理信息数据（点、线、面、多边形、多面体以及模型等），通常应用于 Google 地球相关软件中（Google Earth，Google Map 等），它跟XML文件最大的不同就是KML描述的是地理信息数据，同时KML已正式被OGC采用，成为OGC众多规范中的一个。KML文件有两个文件扩展名：​.KML 和​.KMZ（一个或几个 KML 文件的压缩集，采用 zip 格式压缩）。Cesium从1.7版开始就支持KML，目前对KML的支持还不完整，但是支持大量的标准以及Google的gx扩展名称空间。
添加Kml示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>   
复制代码

Cesium加载czml文件：
CZML是cesium中很重要的一个概念，也是一个亮点，它使得cesium很酷很炫地展示动态数据成为可能。CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型和其他的一些图形元素，并指明了这些元素如何随时间而变化。Cesium拥有一套富客户端API，通过CZML采用数据驱动的方式，不用写代码我就可以使用通用的Cesium viewer构建出丰富的场景。某种程度上说,，Cesium和CZML的关系就像Google Earth和KML的关系，两者都是用于描述其各自客户端中的场景的数据格式，并且旨在由各种各样的应用程序生成，甚至可能是手工编写的 。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.    
  8.     <title>Hello World</title>
  9.    
  10.     <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  11.    
  12. </head>
  13. <body>
  18. </body>
  19. </html>   
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

圆咕噜咕噜

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表