78 lines
3.5 KiB
Markdown
78 lines
3.5 KiB
Markdown
---
|
||
title: 工作原理
|
||
date: 2021-09-11
|
||
author: ac
|
||
tags:
|
||
- OpenLayers
|
||
categories:
|
||
- GIS
|
||
---
|
||
|
||
## OpenLayers工作原理
|
||
|
||
### 1.渲染过程
|
||
|
||
当在向地图服务器请求服务数据时，根据响应回来的数据类型选择相应的数据源（`source`）类型及对应的解析器（`format`）来加载和解析数据，若是矢量数据会解析生成`ol.geom`空间下的几何类型对象，结合样式（`Style`），再经过`Renderer`渲染，显示在地图容器中的图层（`Laye`）上。在较高的版本中，地图容器`Map`和图层`Layer`的渲染有`Canvas`、`WebGL`两种类型，分别由`ol.renderer.Map`与`ol.renderer.Layer`实现。
|
||
|
||
<img src="./images/image-20201029162333237.png" alt="image-20201029162333237" style="zoom: 80%;" />
|
||
|
||
<div style="text-align:center">图层Layer与数据源Source</div>
|
||
|
||
与其他地图`API`不同，`ol`将图层的加载、解析和渲染分离开来，由`Source`负责配置地图数据源的信息，`Format`负责解析数据源，`Layer`作为图层的容器负责渲染和在Map中显示地图。其中图层Layer的渲染，是以数据源`Source`指定的数据为基础的，`Layer`与`Source`是有密切相关的对应关系的。
|
||
|
||
|
||
|
||
### 2. Layer图层
|
||
|
||
<img src="./images/image-20210428232412366.png" alt="image-20210428232412366" style="zoom: 67%;" />
|
||
|
||
|
||
|
||
`ol`有四种基本类型的`layer`:
|
||
|
||
- `ol/layer/Tile` - 渲染瓦片数据的layer。
|
||
- `ol/layer/Image` - 渲染地图图像的数据源，通常是单张图片。
|
||
- `ol/layer/Vector` - 渲染矢量数据，是一种客户端图层。
|
||
- `ol/layer/VectorTile` - 渲染矢量瓦片数据的layer。
|
||
|
||
|
||
|
||
### 3. Source 数据源
|
||
|
||
地图数据源可以分为Image、Tile、Vector三大类：
|
||
|
||
- `ol.source.Image`：单一图像基类，用于指定服务端返回单张栅格图片类型的数据源。
|
||
- `ol.source.Tile`：瓦片基类，用于指定瓦片类型的地图服务数据源。
|
||
- `ol.source.Vector`：矢量基类，可以直接实例化创建矢量数据的数据源（支持多种格式的矢量数据）
|
||
- `ol.source.VectorTile`：矢量瓦片的数据源，需要较高版本的ol才支持。
|
||
|
||
数据源Image和Tile，两者本质基本相同，都是图片，Image是单张图片，tile则是按照特定规则裁剪的图片集。
|
||
|
||
Vector矢量数据可以直接组织（创建几何对象，用`ol.Feature`组织）或读取Features矢量数据；同时也可以通过`url`设置数据源地址来指定数据源，但这需要指定相应的解析器`Format`来解析矢量数据。常见的数据格式有XML、WKT、JSON、GeoJSON、KML、GML、GPS等。
|
||
|
||
|
||
|
||
### 4. Format解析器
|
||
|
||
对上述三种数据源的解析可以分为两类：
|
||
|
||
- 栅格图片，将Image和Tile解析为图片或图片集；
|
||
- 要素集（Features），不同的Vector 矢量类型数据，由`ol`提供的format解析器进行解析，生成几何要素对象。
|
||
|
||
<img src="./images/image-20201030143209644.png" alt="image-20201030143611298" style="zoom: 67%;" />
|
||
|
||
除了上述的解析器还有用于解析`GML`格式的`ol.format.GML`和用于`WFS`服务属性过滤筛选的`ol.format.filter`等。
|
||
|
||
|
||
|
||
### 5. Renderer
|
||
|
||
渲染功能由渲染器（Renderer）实现。图层数据主要由`ol.renderer.layer`类及相关的子类负责渲染，即分别通过`Canvas`、`WebGL`两大渲染类型的相关子类实现。在较旧的版本中支持`DOM`渲染。
|
||
|
||
- `ol.layer.Image`子类的图像数据由`ImageLayer`渲染器渲染；
|
||
- `ol.layer.Tile`子类的瓦片数据由`TileLayer`渲染器渲染；
|
||
- `ol.layer.Vector`子类的矢量数据由`VectorLayer`渲染器渲染。
|
||
|
||
|
||
|