柿子树备忘录

vuePress-theme-reco 柿子树    2023
柿子树备忘录

Choose mode

  • dark
  • auto
  • light
首页
个人笔记
  • Web
  • GIS
  • Database
  • DevOps
  • 可视化
地图故事
生活点滴
归档
关于我
author-avatar

柿子树

109

Article

73

Tag

首页
个人笔记
  • Web
  • GIS
  • Database
  • DevOps
  • 可视化
地图故事
生活点滴
归档
关于我
  • GIS理论基础

    • GIS基础知识
    • 地图坐标系统
  • GeoServer笔记

    • 思维导图
    • 一、OGC简述

    • 二、基本使用

    • 三、服务标准

    • 四、图层加载

    • 五、服务端开发

  • Openlayers

    • 思维导图
    • 一、快速起步

    • 二、ol结构体系

    • 三、数据源加载

    • 四、常用控件

    • 五、几何对象与Style样式

    • 六、事件交互

    • 七、OGC服务

    • 八、常用示例

  • CesiumJS

    • 思维导图
  • WorldWind

    • WorldWindJava 学习笔记
    • OpenGL中的坐标系

加载矢量数据

vuePress-theme-reco 柿子树    2023

加载矢量数据

ac 2022-03-01 CesiumEntity

# 加载矢量数据

地理数据分为栅格数据和矢量数据,之前的地形和影像都是栅格数据(图片),是服务端渲染好的,只需要在客户端将图片嵌入到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 核心类中的:

image-20220324214123212

Viewer 中的 dataSources 属性是一个数据源集合( DataSourceCollection )实例,用于加载和显示几何实体数据,实例会将数据源转换为 Entity 集合。

GeoJsonDataSource

GeoJsonDataSource可以用来加载 GeoJSON (opens new window) 和TopoJSON (opens new window) 数据。核心方法是load 函数:

# load(data, options) → Promise

其中data参数可以是geojson对象、topojosn对象或是数据源的url 。

常用的options配置参数有:

  • markerSymbol:
  • markerSize:
  • stroke:线要素和面要素的轮廓线的颜色
  • strokeWidth:线宽
  • fill:填充色
  • clampToGround:是否贴紧地形

示例:

image-20220325120535657

// 加载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);
1
2
3
4
5
6
7
8
9

我们将load函数中返回的promise。

# 参考文章

[1] Cesium 加载数据 【面向三维GIS的Cesium开发与应用】