103 lines
3.6 KiB
Markdown
103 lines
3.6 KiB
Markdown
|
---
|
|||
|
|
title: 加载矢量数据
|
|||
|
|
date: 2022-3-15
|
|||
|
|
author: ac
|
|||
|
|
tags:
|
|||
|
|
- Cesium
|
|||
|
|
- Entity
|
|||
|
|
categories:
|
|||
|
|
- GIS
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 加载矢量数据
|
|||
|
|
|
|||
|
|
> 地理数据分为栅格数据和矢量数据，之前的地形和影像都是栅格数据(图片)，是服务端渲染好的，只需要在客户端将图片嵌入到Canvas中即可。而矢量数据是由离散的顶点组成的，常以要素集的方式返回客户端，在客户端绘制和渲染图层。
|
|||
|
|
|
|||
|
|
### 1. 简述
|
|||
|
|
|
|||
|
|
`Cesium`将矢量数据扩展到三维空间，将其划分为三大类：
|
|||
|
|
|
|||
|
|
- 几何形体（点线面体）
|
|||
|
|
- 三维模型
|
|||
|
|
- 标签（文字和图标）
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 2.几何形体
|
|||
|
|
|
|||
|
|
在 `Cesium` 中添加矢量数据有三种方式：
|
|||
|
|
|
|||
|
|
1. 使用 `Primitive API` 绘制
|
|||
|
|
2. 使用 `Entity API` 绘制
|
|||
|
|
3. 以数据源(`DataSource`)的方式，加载几何形体的矢量文件，如 `GeoJSON` 、`KML` 、`CZML` 等。
|
|||
|
|
|
|||
|
|
`Cesium` 为矢量空间数据提供了丰富的`API` ，可以分为两类：
|
|||
|
|
|
|||
|
|
- `Primitive API` ：面向图形开发人员的底层次`API`。它更加灵活，更贴近底层开发，图形绘制和加载数据的效率较高，但难度也较大。
|
|||
|
|
- `Entity API` ：用于驱动数据可视化的高层次 `API` 。它是基于 `Primitive API` 封装而来，具有固定的格式，调用方便，上手快。
|
|||
|
|
|
|||
|
|
> 数据量较少时，可以选用 Entity API，当数据量较大时可以选用 Primitive API 提高性能。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.1 Primitive API
|
|||
|
|
|
|||
|
|
`Primitive API` 通常有两部分组成：
|
|||
|
|
|
|||
|
|
- 几何形状（`Geometry`）：定义了实体的外形结构。
|
|||
|
|
- 外观（`Appearance`）：定义实体的着色（Shading），包括OpemGL着色语言顶点着色器和`片段着色器`（vertex and fragment shaders），以及`渲染状态`（render state）。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 2.3 矢量文件
|
|||
|
|
|
|||
|
|
矢量数据的文件格式有很多，如 `ESRI` 公司的 `shapefile` 、`CAD` 的 `DWG`、谷歌的 `KML/KMZ` 还有 `GeoJSON`等。但由于 `Shapefile` 文件结构复杂不利于网络传输，所以`Cesium` 主要采用 `GeoJSON` 和 `KML/KMZ` 两种适合网络传输的数据格式存储几何形体。另外 `Cesium` 在 `JSON` 的基础上定义了 `CZML` 格式，专门用于大数据流传输。对应 `Cesium` 核心类中的：
|
|||
|
|
|
|||
|
|
<img src="./images/image-20220324214123212.png" alt="image-20220324214123212" style="zoom:67%;" />
|
|||
|
|
|
|||
|
|
`Viewer` 中的 `dataSources` 属性是一个数据源集合（ `DataSourceCollection` ）实例，用于加载和显示几何实体数据，实例会将数据源转换为 `Entity` 集合。
|
|||
|
|
|
|||
|
|
**GeoJsonDataSource**
|
|||
|
|
|
|||
|
|
`GeoJsonDataSource`可以用来加载 [GeoJSON](http://www.geojson.org/) 和[TopoJSON](https://github.com/mbostock/topojson) 数据。核心方法是`load` 函数：
|
|||
|
|
|
|||
|
|
#### load(data, options) → Promise
|
|||
|
|
|
|||
|
|
其中data参数可以是`geojson`对象、`topojosn`对象或是数据源的`url` 。
|
|||
|
|
|
|||
|
|
常用的options配置参数有：
|
|||
|
|
|
|||
|
|
- markerSymbol：
|
|||
|
|
- markerSize：
|
|||
|
|
- stroke：线要素和面要素的轮廓线的颜色
|
|||
|
|
- strokeWidth：线宽
|
|||
|
|
- fill：填充色
|
|||
|
|
- clampToGround：是否贴紧地形
|
|||
|
|
|
|||
|
|
示例：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 加载GeoJSON或TopoJSON数据
|
|||
|
|
let tpSource = Cesium.GeoJsonDataSource.load("./SampleData/world.json", {
|
|||
|
|
stroke: Cesium.Color.HOTPINK.withAlpha(0.6),//配置轮廓线的颜色和透明度
|
|||
|
|
fill: Cesium.Color.PINK.withAlpha(0.3), //填充色
|
|||
|
|
strokeWidth: 3,// 边界宽度
|
|||
|
|
clampToGround: true,// 设置贴地
|
|||
|
|
});
|
|||
|
|
//将数据添加到Viewer中
|
|||
|
|
viewer.dataSources.add(tpSource);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
我们将`load`函数中返回的`promise`。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 参考文章
|
|||
|
|
|
|||
|
|
[1] Cesium 加载数据 【面向三维GIS的Cesium开发与应用】
|