Openlayers简介|体系架构|主要API|

最新推荐文章于 2025-02-27 20:29:26 发布
最新推荐文章于 2025-02-27 20:29:26 发布
阅读量2.8k 收藏 39
点赞数 9
分类专栏： OpenLayers学习笔记 文章标签： OpenLayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45213317/article/details/140573402
版权

openlayers版本：9.2.4(latest)

OpenLayers简介

OpenLayers是最早的WebGIS开源库之一，迭代开发的历史较长，目前是WebGIS中功能齐全、资料和教程丰富的框架，同时其学习曲线比较平缓，很容易上手。OpenLayers采用了Canvas、WebGL和HTML5中最新的技术来构建框架，可以在移动设备上运行。
OpenLayers支持多种地图来源，包括天地图(Tianditu)、百度地图(Baidu Map)、谷歌地图(Google Map)、必应地图(Bing Map)、OpenStreetMap(OSM)等在线地图，可以对图片地图进行叠加，可对接OGC制定的各种标准服务，如WMS、WFS和WMTS等Web服务，能通过远程服务的方式将地图数据加载到浏览器中并进行显示。另外，OpenLayers还提供了丰富的图形、空间交互、地图渲染和投影转换的API。

OpenLayers体系架构

OpenLayers将抽象事物具体化为类，其核心类是Map、Layer、Source、View，几乎所有的动作都是围绕这几个核心类展开的，以实现地图加载和相关操作。(这几个核心概念详见：核心概念教程)

image.png

把整个地图看作一个地图容器（Map），核心部分为地图表现相关的视图（View）、地图图层（Layer）、对应图层的数据源（Source）与矢量图层样式（Style）。底层是OpenLayers的数据源，即Image、GML、KML、JSON、OGC服务资源等。

OpenLayers的地图数据是通过地图图层(Layer)组织渲染的，且通过数据源(Source)设置具体的地图数据来源。
image.png

除此之外容器中还有地图交互（Interaction）、操作控件（Control）、覆盖层（Overlay），以及绑定在Map和Layer上的一系列待请求的事件（MapEvent）。

OpenLayers的几何数据

OpenLayers的空间数据是由点、线、面要素构成的，以ol/geom/Geometry类为基本类，扩展出简单图形和图形集合，其中简单图形又派生出了点、线、面、圆、多线、多面等图形。
image.png
更多：

OpenLayers主要特点

  • OpenLayers将地图图层(Layer)与数据源(Source)分离，并将地图视图相关类（如投影、分辨率、中心点设置等）抽离为视图(View)，地图数据的加载和显示更为灵活。
  • OpenLayers将地图交互操作的相关内容抽离，封装为各种交互(Interaction)类，如涉及地图交互的要素选择、绘图，以及图形要素编辑的操作、缩放、拖动、旋转等。
  • )OpenLayers在地图容器中用覆盖层(Overlay)来承载和表现诸如地图标注(Marker、Popup)等HTML元素内容。
  • OpenLayers优化了空间几何对象(Geometry)类，专注于管理空间图形，更简便、易用。
  • OpenLayers在矢量图层中叠加了矢量要素(Feature)，由图形(geometry)、属性(properties)、样式(style)组成。

OpenLayers API

OpenLayers的常用接口可参考官网文档：https://openlayers.org/en/latest/apidoc/
image.png

核心模块

  1. **ol/Map**
    • 用于创建和管理地图实例。
    • 主要功能：地图初始化、层管理、视图设置等。
  2. **ol/View**
    • 用于管理地图视图的类。
    • 主要功能：设置地图中心、缩放级别、旋转等。
  3. **ol/Layer**
    • 用于管理地图上的图层。
    • 主要类型：
      • **ol/layer/Tile**: 瓦片图层。
      • **ol/layer/Vector**: 矢量图层。
      • **ol/layer/Image**: 图像图层。
  4. **ol/Source**
    • 用于管理图层的数据源。
    • 主要类型：
      • **ol/source/OSM**: OpenStreetMap 瓦片源。
      • **ol/source/Vector**: 矢量数据源。
      • **ol/source/XYZ**: XYZ 瓦片源。
      • **ol/source/TileWMS**: WMS 瓦片源。
  5. **ol/Geom**
    • 用于表示和操作几何图形。
    • 主要类型：
      • **ol/geom/Point**: 点。
      • **ol/geom/LineString**: 线。
      • **ol/geom/Polygon**: 多边形。
      • **ol/geom/MultiPoint**: 多点。
      • **ol/geom/MultiLineString**: 多线。
      • **ol/geom/MultiPolygon**: 多多边形。
  6. **ol/Feature**
    • 用于表示地图上的特征。
    • 主要功能：包含几何图形和属性数据，支持样式设置。

辅助模块

  1. **ol/style**
    • 用于设置特征的样式。
    • 主要类型：
      • **ol/style/Style**: 样式。
      • **ol/style/Icon**: 图标样式。
      • **ol/style/Fill**: 填充样式。
      • **ol/style/Stroke**: 线样式。
      • **ol/style/Text**: 文本样式。
  2. **ol/control**
    • 用于添加地图控件。
    • 主要类型：
      • **ol/control/Zoom**: 缩放控件。
      • **ol/control/FullScreen**: 全屏控件。
      • **ol/control/ScaleLine**: 比例尺控件。
      • **ol/control/OverviewMap**: 概览地图控件。
  3. **ol/interaction**
    • 用于添加地图交互功能。
    • 主要类型：
      • **ol/interaction/Draw**: 绘制交互。
      • **ol/interaction/Modify**: 修改交互。
      • **ol/interaction/Select**: 选择交互。
      • **ol/interaction/DragPan**: 拖动平移交互。
      • **ol/interaction/MouseWheelZoom**: 滚轮缩放交互。
  4. **ol/overlay**
    • 用于在地图上添加覆盖物。
    • 主要类型：
      • **ol/Overlay**: 覆盖物，用于显示 HTML 元素。

数据处理模块

  1. **ol/format**
    • 用于解析和写入各种地理数据格式。
    • 主要类型：
      • **ol/format/GeoJSON**: GeoJSON 格式。
      • **ol/format/WKT**: WKT 格式。
      • **ol/format/GML**: GML 格式。
      • **ol/format/KML**: KML 格式。
  2. **ol/proj**
    • 用于处理地图投影。
    • 主要功能：坐标转换、投影定义等。

渲染模块

  1. **ol/render**
    • 用于地图的渲染。
    • 主要功能：支持矢量图形的绘制和样式应用。

其他实用模块

  1. **ol/loadingstrategy**
    • 用于定义矢量数据的加载策略。
    • 主要类型：all（加载所有数据）、bbox（按边界框加载数据）等。
  2. **ol/events**
    • 用于事件处理。
    • 主要功能：添加、删除和触发事件。

3.**ol/MapEvent**

  • ol/MapEvent 是专门用于处理地图事件的类，继承自 ol/events/Event。
  • 主要功能：封装与地图相关的事件数据，比如地图点击、移动、缩放等事件。

OpenLayers 学习内容

参考资料

1、《WebGIS原理及开发：基于开源框架的WebGIS技术》
2、https://openlayers.org/en/latest/apidoc/

openLayers-API中文版
10-07
openLayers-API中文版
openlayers入门教程
Admans的专栏
05-11 3448
平铺图层。对于提供预呈现、平铺的网格图像的层源，这些网格按特定分辨率的缩放级别组织。图像图层。服务器呈现的映像，可用于任意范围和分辨率。(3)ol.layer.Vector()很常用矢量图层。矢量平铺图层。图层用于客户端呈现矢量平铺数据。
OpenLayers介绍及使用示例
qq_29579625的博客
02-27 552
OpenLayers是一个强大的、开源的JavaScript地图库，专门用于在网页上显示和操作地图。它提供了丰富的功能来处理各种地图数据源，包括但不限于瓦片地图（如OpenStreetMap、Google Maps瓦片格式等）和矢量数据（如GeoJSON格式的点、线、面数据）。通过OpenLayers，开发者可以轻松地在网页上实现地图的缩放、平移、旋转等基本操作，还能够添加各种图层（如影像图层、标注图层等），并支持自定义地图样式。支持多种地图源。
OpenLayers教程一：OpenLayers概述
热门推荐
不睡觉的怪叔叔的博客
05-30 10万+
目录 一、OpenLayers简介 二、OpenLayers的特征 三、OpenLayers的框架结构 一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。 OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机...
OpenLayers介绍
weixin_30613727的博客
09-24 240
OpenLayers是一个用于开发WebGIS客户端的JavaScript包 [转载]OpenLayers项目分析——（一）项目介绍{感谢原作者为大家的贡献！} (OpenLayersJavaScriptMappingLibrary) 网址：http://www.openlayers.org/ 　　OpenLayers是由MetaCarta公司开发的，用于WebGIS客户端的 Jav...
OpenLayers API整理
diaoyanbian8143的博客
05-07 2727
整理的Openlayers 的知识笔记，随着运用不断加深理解，也会不断更新。 本文链接：Openlayers API整理 作者：狐狸家的鱼 GitHub：八至 一、创建地图 1、地图Map 创建地图底图：需要用new ol.Map({}) 地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI...
OpenLayers简介
Shelter
08-15 3679
对OpenLayers学习进行总结
OpenLayers 3 入门教程
10-31
OpenLayers 3 的架构设计考虑了模块化和可扩展性。它由多个组件构成，如地图(Map)、视图(View)、源(Source)、图层(Layer)等，每个组件都有明确的职责，使得开发者可以根据需求灵活组合和定制。 **基本概念** 1. **...
在Vue和OpenLayers中使用移动传感器实现飞机航线飞行模拟
百锦再的博客
11-05 1万+
该项目的目标是使用Vue.js作为前端框架，结合OpenLayers用于地图显示，实时获取来自手机传感器的数据（如经纬度、高度、速度）来模拟飞机在地图上的飞行轨迹。
OpenLayers中文API
03-06
Openlayers地图开发相关框架 中文API资源包
openLayers-API中文版.zip
11-20
openLayers-API中文版资源下载
介绍openlayers基本功能及案例地址
05-24
介绍openlayers基本功能及案例地址，对初学者有帮助
openlayers中文api.zip
07-29
openLayers中文版api全翻译
船舶AIS监控网络-船位信息查询：实时查询船舶动态，服务于船舶安全航行管理、港口调度计划、物流、船代、货代。【AIS动态信息编写船舶轨迹】
专注于计算机研发知识和资讯分享
03-10 1089
国家地理信息公共服务平台“天地图”（以下简称“天地图“）是国家基础地理信息中心建设的网络化地理信息共享与服务门户，集成了来自国家、省、市（县）各级测绘地理信息部门，以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源，向各类用户提供权威、标准、统一的在线地理信息综合服务。卫星AIS是一种船舶定位技术，通过低轨道的卫星接收船舶发送的AIS报文信息，卫星将接收和解码AIS报文信息转发给相应的地球站，从而让陆地管理机构掌握船舶的相关动态信息，实现对远海海域航行船舶的监控。
天地图API调试与排错：常见问题分析及解决方案速查手册
本文首先介绍了天地图API的基础知识，为使用前的准备和环境搭建提供指导，包括API的注册认证流程和开发环境配置。接着，文章深入探讨了API调试的基本技巧，包括请求构造、发送及响应数据的解析方法。随后，本文分析...
Using OpenLayers to develop a WebGIS Client
classicning的专栏
02-06 166
OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。要使用OpenLayers，您可以到它的官方网站http://www.openlayers.org...
项目是一个前后端分离的项目，前端（vue2，openlayers、echarts、datav），后端（springboot、geotools、mybatis-plus），地图服务（geoserevr），数据库（postgis）
最新发布
04-03
### 前后端分离项目集成与配置 #### 1. 技术栈概述 Vue2 是前端框架，用于构建用户界面；OpenLayers 和 ECharts 提供地图可视化和数据图表功能；Datav 可能是一个自定义的数据展示组件库。Spring Boot 是 Java 后端开发框架，GeoTools 提供地理空间处理能力，MyBatis-Plus 是 ORM 工具增强版，GeoServer 负责发布地理信息服务，PostGIS 则是 PostgreSQL 的扩展模块，支持存储和查询地理空间数据。 这些技术可以组合在一起实现一个完整的 GIS 应用系统[^1]。 --- #### 2. 配置与集成方案 ##### (1) **前后端通信** 在前后端分离架构下，通常通过 RESTful API 或 GraphQL 实现前后端交互。Spring Boot 提供了强大的 HTTP 接口支持，可以通过 `@RestController` 注解创建接口服务[^2]。 以下是简单的 Spring Boot 控制器示例： ```java @RestController @RequestMapping("/api") public class MapController { @GetMapping("/features") public List<Feature> getFeatures() { // 查询数据库中的地理特征并返回 JSON 数据 return featureService.getAllFeatures(); } } ``` 前端 Vue2 使用 Axios 进行请求调用： ```javascript axios.get('/api/features') .then(response => { this.features = response.data; }) .catch(error => console.error('Error fetching features:', error)); ``` --- ##### (2) **OpenLayers 地图集成** OpenLayers 支持加载矢量瓦片、WMS/WFS 图层以及 GeoJSON 数据源。结合 GeoServer 发布的地图服务，可以在前端动态渲染地图内容[^3]。 以下是一个 OpenLayers 加载 WMS 层的例子： ```javascript import 'ol/ol.css'; import {Map, View} from 'ol'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OGC.WMTS({ url: 'http://localhost:8080/geoserver/gwc/service/wmts', layer: 'topp:states' }) }) ], view: new View({ center: [0, 0], zoom: 2 }) }); ``` --- ##### (3) **ECharts 数据可视化** ECharts 是一款优秀的数据可视化工具，适合绘制折线图、柱状图、饼图等复杂图形。它可以直接嵌入到 Vue 组件中使用[^4]。 下面是一个简单的时间序列折线图示例： ```html <div id="chart" style="width: 600px; height: 400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script> var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; myChart.setOption(option); </script> ``` --- ##### (4) **GeoTools 处理地理数据** GeoTools 是一个开源的 Java 库，能够读取多种格式的空间数据文件（如 Shapefile），并对它们执行几何运算或转换操作[^5]。 例如，读取 Shapefile 文件并将其中的内容转为 GeoJSON 格式： ```java File file = new File("path/to/file.shp"); ShapefileDataStore store = new ShapefileDataStore(file.toURI().toURL()); SimpleFeatureSource featureSource = store.getFeatureSource(); // 将 FeatureCollection 转换为 GeoJSON 字符串 SimpleFeatureCollection collection = featureSource.getFeatures(); String geojson = new GeoJsonEncoder().encode(collection); store.dispose(); System.out.println(geojson); ``` --- ##### (5) **MyBatis-Plus 数据持久化** MyBatis-Plus 是 MyBatis 的增强版本，提供了更简洁的操作方式来完成 CRUD 功能。它可以轻松连接 PostGIS 数据库，并管理复杂的地理实体关系表结构[^6]。 假设有一个名为 `feature` 的表，其字段包括 ID、名称和 Geometry 类型列，则对应的 Mapper 定义如下所示： ```java @Mapper public interface FeatureMapper extends BaseMapper<FeatureEntity> {} @Data @Entity @Table(name = "feature") public class FeatureEntity implements Serializable { private Long id; private String name; private PGgeometry geometry; // 对应 PostGIS 中的 Geometry 类型 } ``` --- ##### (6) **GeoServer 郾布地理信息** GeoServer 主要负责将 PostGIS 存储的地理数据对外提供标准的服务协议访问入口，比如 WMS、WFS 等。开发者只需按照既定模板设置好样式 SLD 即可快速部署地图资源[^7]。 --- #### 总结 以上介绍了如何基于 Vue2、OpenLayers、ECharts、Datav、Spring Boot、GeoTools、MyBatis-Plus、GeoServer 和 PostGIS 构建一套完整的前后端分离应用体系。每部分都有明确职责范围，在实际工程实践中需注意各子系统的兼容性和性能优化问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值