嘿！openlayer（三）

嘿！openlayer（三）

第三章 面向对象的openlayer

---

---

前言

OpenLayers 是一个开源的 JavaScript 库，用于构建丰富的地理信息系统（GIS）应用程序。它提供了多种核心类和功能，用于处理地图、图层、交互、源、视图等。以下是 OpenLayers 的一些类及其关系的详细说明。

---

一、面向对象的openlayer

核心类

---

• ol.Map：地图类，用于实例化一个地图。
• ol.View：视图类，用于定义地图的视图属性，如中心点、缩放级别等。
• ol.layer.Layer：图层基类，所有图层类的基类。
• ol.layer.Tile：瓦片图层类，用于显示瓦片地图。
• ol.layer.Vector：矢量图层类，用于显示矢量数据。
• ol.source.Source：源基类，所有数据源类的基类。
• ol.source.Tile：瓦片源类，用于瓦片图层的数据源。
• ol.source.Vector：矢量源类，用于矢量图层的数据源。
• ol.Feature：要素类，用于表示地理要素。
• ol.geom.Geometry：几何基类，用于表示地理几何形状。
• ol.control.Control：控制基类，用于在地图上添加各种控件。
• ol.interaction.Interaction：交互基类，用于地图交互操作。

渲染类

---

• ol.renderer.Map

这是所有地图渲染器的基类，定义了地图渲染器的基本接口和通用功能。

• ol.renderer.canvas.Map

继承自 ol.renderer.Map，用于基于 Canvas 技术的地图渲染。
负责初始化 Canvas 元素。
管理和调度图层渲染。
处理地图的交互事件。

• ol.renderer.canvas.Layer

这是所有基于 Canvas 渲染的图层的基类，定义了图层渲染的基本接口

• ol.renderer.canvas.TileLayer

继承自 ol.renderer.canvas.Layer，用于渲染瓦片图层（如 OpenStreetMap）。
负责加载和渲染瓦片数据。
管理瓦片缓存和显示。

• ol.renderer.canvas.VectorLayer

继承自 ol.renderer.canvas.Layer，用于渲染矢量图层。
负责渲染矢量数据（如点、线、面）。
处理矢量数据的样式和交互。

• ol.renderer.webgl.Map

继承自 ol.renderer.Map，用于基于 WebGL 技术的地图渲染。
负责初始化 WebGL 上下文。
管理和调度图层渲染。
处理地图的交互事件。

• ol.renderer.webgl.Layer

这是所有基于 WebGL 渲染的图层的基类，定义了图层渲染的基本接口。

• ol.renderer.webgl.TileLayer

继承自 ol.renderer.webgl.Layer，用于渲染瓦片图层（如 OpenStreetMap）。
负责加载和渲染瓦片数据。
管理瓦片缓存和显示。

• ol.renderer.webgl.VectorLayer

继承自 ol.renderer.webgl.Layer，用于渲染矢量图层。
负责渲染矢量数据（如点、线、面）。
处理矢量数据的样式和交互。

事件类

OpenLayers 提供了丰富的事件处理机制，使得用户可以方便地响应地图和图层上的各种交互操作。以下是 OpenLayers 中事件类的详细介绍，包括如何添加、管理和处理事件。

OpenLayers 使用 ol.events 模块来处理事件，主要通过 ol.Observable 类来实现事件的订阅和发布机制。所有可以触发事件的类都继承自 ol.Observable，因此具备事件处理能力。

---

主要事件类和接口

ol.Observable
ol.Map
ol.layer.Base
ol.interaction.Interaction
ol.source.Source
ol.Collection

• ol.Observable

ol.Observable 是事件系统的核心类，所有支持事件的类都继承自它。它提供了事件的基本管理功能，包括添加事件监听、移除事件监听和触发事件。
方法
on(type, listener)：添加事件监听。
un(type, listener)：移除事件监听。
once(type, listener)：添加一次性事件监听。
dispatchEvent(event)：触发事件。

• ol.Map

ol.Map 类是 OpenLayers 的地图对象，支持多种地图事件，如点击、移动、缩放等。
常见事件类型
click：地图被点击时触发。
pointermove：鼠标指针在地图上移动时触发。
movestart：地图开始移动时触发。
moveend：地图移动结束时触发。
zoomstart：地图开始缩放时触发。
zoomend：地图缩放结束时触发。

• ol.layer.Base

ol.layer.Base 是所有图层类的基类，支持图层相关的事件。
常见事件类型
change:source：图层的数据源发生变化时触发。

• ol.interaction.Interaction
  尽管 ol.interaction.Modify、ol.interaction.Draw、ol.interaction.Select、ol.interaction.Translate、ol.interaction.Extent是交互操作类，但它并没有直接继承自 ol.interaction.Interaction。它们的关系是是 ol.interaction.Interaction 的一种具体实现，它实现了交互式修改要素的功能，并通过继承或实现相应的接口来实现其功能，其他同理。

ol.interaction.Interaction 是所有交互操作类的基类，支持交互操作相关的事件。
事件类型
change:active：交互操作的激活状态发生变化时触发。

• ol.source.Source

ol.source.Source 是所有数据源类的基类，支持数据源相关的事件。
常见事件类型
change：数据源发生变化时触发。

• ol.Collection

ol.Collection 类用于管理一组对象，支持集合相关的事件。
常见事件类型
add：对象被添加到集合时触发。
remove：对象从集合中移除时触发。

openlayer 主要工作原理

---

数据组织

OpenLayers 支持多种数据格式和数据源，并通过一系列类和模块来组织和管理这些数据。

数据源 (ol.source)
ol.source 包含了各种数据源的实现，包括瓦片数据源、矢量数据源、图像数据源等。
ol.source.Tile：用于瓦片图层的数据源。
ol.source.Vector：用于矢量图层的数据源。
ol.source.Image：用于图像图层的数据源。

图层 (ol.layer)
ol.layer 定义了地图中的不同图层，每个图层对应一个数据源。
ol.layer.Tile：用于展示瓦片地图。
ol.layer.Vector：用于展示矢量数据。
ol.layer.Image：用于展示图像数据。

数据解析

格式 (ol.format)
ol.format 包含了数据解析和序列化的类，用于处理各种地理数据格式，如 GeoJSON、KML、GML、GPX 等。
ol.format.GeoJSON：用于解析和生成 GeoJSON 格式的数据。
ol.format.KML：用于解析和生成 KML 格式的数据。
ol.format.GML：用于解析和生成 GML 格式的数据。
ol.format.GPX：用于解析和生成 GPX 格式的数据。

数据渲染

OpenLayers 的渲染类是地图渲染过程中的核心组件，负责将地图图层和其内容渲染到屏幕上。下面详细介绍 OpenLayers 的渲染流程。

1. 地图初始化：创建 ol.Map 对象，配置视图、图层和控件。
2. 创建 HTML 容器：生成主 div容器和子容器（div.ol-viewport、div.ol-overlaycontainer-stopevent、div.ol-overlaycontainer、canvas.ol-unselectable）。
3. 设置视图：初始化 ol.View 对象，根据中心点、缩放级别等参数配置视图。 添加图层：创建图层对象（如ol.layer.Tile），并设置数据源。
4. 渲染引擎初始化：根据浏览器，创建合适的渲染器（如 CanvasRenderer或WebGLRenderer）。
5. 渲染循环：使用 requestAnimationFrame启动渲染循环，确保地图在每一帧都能重新渲染。
6. 图层渲染：遍历所有图层，调用每个图层的 render 方法，将图层内容绘制到 canvas上。
7. 处理事件：监听和处理用户交互事件（如点击、拖动、缩放等），并更新视图和图层状态。

二、直击深处

OpenLayers 在创建地图应用时，内部会生成一系列的 HTML 元素（如 div 和 canvas），用于呈现地图和其上的图层、控件等。以下是对这些内部生成的元素及其作用的详细说明。

OpenLayers 内部生成的 HTML 元素

主容器 div.ol-viewport
这是 OpenLayers 创建的地图容器的主 div 元素，所有的其他元素都在这个 div 中。
作用：主地图容器，所有的地图元素都在这个容器内。
样式：通常设置 position: relative 以便其内部元素能够正确定位。

<div class="ol-viewport" style="position: relative;">
  ...
</div>

1
2
3
4

覆盖物容器 div.ol-overlaycontainer-stopevent 和 div.ol-overlaycontainer
这两个 div 元素用于存放地图的覆盖物（如弹出窗口、工具提示等）。div.ol-overlaycontainer-stopevent 用于那些需要停止事件传播的覆盖物，而 div.ol-overlaycontainer 则用于不需要停止事件传播的覆盖物。

<canvas class="ol-unselectable" width="800" height="600" style="position: absolute; width: 100%; height: 100%;">
  ...
</canvas>
1
2
3

渲染图层的 canvas 元素 canvas.ol-unselectable
每个图层通常都会有一个 canvas 元素，这些 canvas 元素用于渲染地图图层。canvas.ol-unselectable 是一个类名，用于防止用户选择 canvas 内容。

<canvas class="ol-unselectable" width="800" height="600" style="position: absolute; width: 100%; height: 100%;">
  ...
</canvas>

1
2
3
4

控件容器 div.ol-control
地图控件（如缩放控件、比例尺控件等）会被添加到一个 div.ol-control 元素中。每个控件都有其自己的 div 元素，用于组织和样式化控件。

<div class="ol-control">
  <div class="ol-zoom" style="position: absolute; top: 1em; left: 1em;">
    ...
  </div>
</div>

1
2
3
4
5
6

为了更好地理解 OpenLayers 内部生成的元素及其层次结构，下面是一个详细的结构图

<div id="map" class="map">
  <div class="ol-viewport" style="position: relative;">
    <div class="ol-overlaycontainer-stopevent" style="position: absolute; left: 0; top: 0;">
      <!-- Overlays that stop event propagation -->
    </div>
    <div class="ol-overlaycontainer" style="position: absolute; left: 0; top: 0;">
      <!-- Overlays that do not stop event propagation -->
    </div>
    <canvas class="ol-unselectable" width="800" height="600" style="position: absolute; width: 100%; height: 100%;">
      <!-- Layer content -->
    </canvas>
    <div class="ol-control">
      <div class="ol-zoom" style="position: absolute; top: 1em; left: 1em;">
        <!-- Zoom control -->
      </div>
      <div class="ol-scale-line" style="position: absolute; bottom: 1em; left: 1em;">
        <!-- Scale line control -->
      </div>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22