嘿！openlayer（三）

嘿！openlayer（三）

第三章 面向对象的openlayer

文章目录

  • 嘿！openlayer（三）
  • 前言
  • 一、面向对象的openlayer
    • 核心类
    • 渲染类
    • 事件类
    • openlayer 主要工作原理
      • 数据组织
      • 数据解析
      • 数据渲染
  • 二、直击深处
    • OpenLayers 内部生成的 HTML 元素

前言

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>

覆盖物容器 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>

渲染图层的 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>

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

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

为了更好地理解 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/47586.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Vue3 ts】echars图表展示统计的月份数据

【Vue3 ts】echars图表展示统计的月份数据

图片展示 此处内容为展示24年各个月份产品的创建数量。在后端统计24年各个月份产品数量后&#xff0c;以数组的格式发送给前端&#xff0c;前端负责展示。 后端 entity层&#xff1a; Data Schema(description "月份统计")public class MonthCount {private Stri…
阅读更多...
处理uniapp刷新后，点击返回按钮跳转到登录页的问题

处理uniapp刷新后，点击返回按钮跳转到登录页的问题

在使用uniapp的原生返回的按钮时&#xff0c;如果没有刷新会正常返回到对应的页面&#xff0c;如果刷新后会在当前页反复横跳&#xff0c;或者跳转到登录页。那个时候我第一个想法时&#xff1a;使用浏览器的history.back()方法。因为浏览器刷新后还是可以通过右上角的返回按钮…
阅读更多...
01认识Java（介绍安装调试）

01认识Java（介绍安装调试）

单元概述 本章主要介绍Java语言的发展历史&#xff0c;了解Java的运行原理及Java编程语言的特点&#xff0c;通过搭建Eclipse集成开发环境来运行Java应用程序。 1.1 Java简介 1.1.1 什么是Java 计算机语言是人与计算机之间的通讯语言&#xff0c;分为机器语言、汇编语言、高…
阅读更多...
短视频是如何一步步“蚕食”我们大脑的？

短视频是如何一步步“蚕食”我们大脑的？

点击上方△腾阳 关注 转载请联系授权 你好&#xff0c;我是腾阳。 今天我们将深入探讨短视频是如何「蚕食」我们的大脑。 首先问下自己&#xff0c;你有多久没有看完一篇长文了&#xff1f; 你是否曾在清晨阳光中&#xff0c;被手机屏幕上短视频图标吸引&#xff0c;而忘记…
阅读更多...
ArrayList.subList的踩坑

ArrayList.subList的踩坑

需求描述&#xff1a;跳过list中的第一个元素&#xff0c;获取list中的其他元素 原始代码如下&#xff1a; List<FddxxEnterpriseVerify> companyList fddxxEnterpriseVerifyMapper.selectList(companyQueryWrapper);log.info("获取多个法大大公司数据量为&#…
阅读更多...
Qt篇——QSqlQueryModel内容居中显示

Qt篇——QSqlQueryModel内容居中显示

QSqlQueryModel 本身不提供直接的内容居中显示功能。要实现这一功能&#xff0c;你需要子类化 QSqlQueryModel 并重新实现数据显示的部分。 代码如下&#xff1a; #include <QSqlQueryModel> #include <QVariant>class CenteredSqlQueryModel : public QSqlQueryM…
阅读更多...
【Vue】快速入门：构建你的第一个Vue 3应用

【Vue】快速入门：构建你的第一个Vue 3应用

文章目录 一、Vue简介二、环境搭建1. 安装Node.js和npm2. 安装Vue CLI 三、创建Vue项目四、项目结构介绍五、组件基础创建一个组件使用组件 六、模板语法插值指令v-bindv-ifv-for 七、事件处理八、状态管理安装Vuex创建Store使用Store 九、路由基础安装Vue Router配置路由使用路…
阅读更多...
科普文：详解23种设计模式

科普文：详解23种设计模式

概叙 设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结&#xff0c;其中最出名的当属 Gang of Four&#xff08;GoF&#xff09;的分类了&#xff0c;他们将设计模式分类为 23 种经典的模式&#xff0c;根据用途我们又可以分为三大类&#xff0c;分别为创建型模式…
阅读更多...
vim+cscope+ctags

vim+cscope+ctags

一、简单安装 1.安装cscope # apt install cscope 2.安装ctags # apt install ctags 3.taglist安装 下载Vim source code browser plugin - Browse /vim-taglist at SourceForge.net&#xff0c;解压和复制文件 # unzip taglist_46.zip# cp doc/taglist.txt /usr/share/…
阅读更多...
《Python数据科学之四：建模与机器学习基础》

《Python数据科学之四：建模与机器学习基础》

《Python数据科学之四&#xff1a;建模与机器学习基础》 在数据科学项目中&#xff0c;经过数据清洗、探索性数据分析&#xff08;EDA&#xff09;和数据可视化之后&#xff0c;下一个重要步骤是建立数据模型并应用机器学习技术。本文将深入探讨如何使用 Python 进行建模和机器…
阅读更多...
Qt之基础体系

Qt之基础体系

基础体系 信号与槽字符串类应用1. 操作字符串2. 查询字符串 QMap & QHash & QVectorQMapQHashQVector QVariant 信号与槽 1、信号(signal):所谓信号槽(观察者模式)&#xff0c;信号本质是事件。信号展现方式就是函数。当某一个事件发生之后&#xff0c;则发出一个信号…
阅读更多...
webpack配置代理请求

webpack配置代理请求

在 Webpack 中&#xff0c;可以通过配置devServer中的proxy选项来设置代理请求&#xff0c;以解决开发环境中的跨域问题或实现特定的请求转发逻辑。以下是一个常见的 Webpack 配置示例&#xff0c;展示了如何设置代理&#xff1a; module.exports {// 其他配置项...devServer…
阅读更多...
Java异常抛出与处理方法

Java异常抛出与处理方法

在Java编程中&#xff0c;异常处理是一个非常重要的部分。通过正确的异常处理&#xff0c;我们可以提高程序的健壮性和可靠性&#xff0c;避免程序在运行过程中出现意外的崩溃。本文将详细讲述Java异常的抛出与处理方法&#xff0c;并通过示例代码进行说明。 一、Java异常的分…
阅读更多...
11 网络编程、反射

11 网络编程、反射

文章目录 网络编程1、网络的相关概念2、InetAddress 类3、Socket4、TCP 网络通信编程5、UDP 网络通信编程 反射1、反射机制2、Class 类3、类加载4、通过反射获取类的结构信息5、通过反射创建对象6、通过反射访问类中的成员 网络编程 1、网络的相关概念 网络通信 网络 ip 地…
阅读更多...
安全防御：智能选路

安全防御：智能选路

目录 一、智能选路 1.1 就近选路 1.2 策略路由 1.3 虚拟系统---VRF 二、全局选路策略 1&#xff0c;基于链路带宽进行负载分担 2&#xff0c;基于链路质量进行负载分担 3&#xff0c;基于链路权重的负载分担 4&#xff0c;根据链路优先级的主备备份 DNS透明代理 一、…
阅读更多...
在 Ubuntu上安装 Docker

在 Ubuntu上安装 Docker

支持的平台 Docker 提供来自以下 Linux 发行版的软件包 和架构&#xff1a;.deb.rpm 平台x86_64 / amd64Ubuntu的✅Debian 的✅红帽企业 Linux &#xff08;RHEL&#xff09;✅软呢帽✅ Docker 在上述发行版的当前 LTS 版本和最新版本上支持 Docker Desktop。随着新版本的推…
阅读更多...
Codeforces Round 895 (Div. 3)（A~G）

Codeforces Round 895 (Div. 3)（A~G）

A. Two Vessels Problem - A - Codeforces 要我们找到最少操作多少次&#xff0c;a和b内的水一样多&#xff0c;从a拿出i克放到b中&#xff0c;之间的差距减少2i&#xff0c;数据范围不大&#xff0c;循环解决即可。 #include<iostream> #include<algorithm> #in…
阅读更多...
推荐算法——MRR

推荐算法——MRR

定义&#xff1a; MRR计算的是第一个正确答案的排名的倒数&#xff0c;并对所有查询取平均值。它衡量了模型在排序结果中快速找到正确答案的能力。 其中&#xff1a; Q 是查询的总数。ranki​ 是第 i 个查询中第一个正确答案的排名&#xff08;位置&#xff09;。如果第一个正…
阅读更多...
Django定时任务框架django-apscheduler的使用

Django定时任务框架django-apscheduler的使用

1.安装库 pip install django-apscheduler 2.添加 install_app django_apscheduler 3.在app下添加一个task.py文件&#xff0c;用来实现具体的定时任务 task.pydef my_scheduled_job():print("这个任务每3秒执行一次", time.time()) 4.在app下创建一个manag…
阅读更多...
我在哪里可以找到Vim速查表备忘单？

我在哪里可以找到Vim速查表备忘单？

以下是一些适合初学者和高级用户的Vim速查表推荐&#xff1a; aral的Vim速查表 这是一个空间感强且易于理解的速查表&#xff0c;帮助你理解每个命令将跳转到的位置。aral的Vim速查表 Vim速查表 如果你需要一个全面且用户友好的速查表&#xff0c;可以访问Vim速查表。这个资源…
阅读更多...
最新文章

Copyright @ 2022~2023