当前位置：首页 > news >正文

vue3-openlayers基础知识简介

news 2026/5/12 0:30:04

vue3-openlayers基础知识简介

OpenLayers 3 Primer
openlayers6：入门基础（一）
openlayers 入门教程

一、基础概念介绍

地图(Map)

OpenLayers 的核心部件是 Map（ol.Map）。它被呈现到对象 target 容器（例如，网页上的 div 元素）。所有地图的属性可以在构造时进行配置。ol/Map 类是 OpenLayers API 中的核心组件之一，它负责创建和管理整个地图实例。

视图(View)

ol.View 负责地图的中心点，放大，投影之类的设置。一个 ol.View 实例包含投影 projection，该投影决定中心 center 的坐标系以及分辨率的单位，如果没有指定，默认的投影是球墨卡托（EPSG：3857），以米为地图单位。放大 zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由 maxZoom（默认值为 28）、zoomFactor（默认值为 2）、maxResolution（默认由投影在 256×256 像素瓦片的有效程度来计算）决定。起始缩放级别 0，以每像素 maxResolution 的单位为分辨率，后续的缩放级别是通过 zoomFactor 区分之前的缩放级别的分辨率来计算的，直到缩放级别达到 maxZoom。

图层(Layer)

一个图层是资源中数据的可视化显示，OpenLayers 包含几种基本图层类型：

ol.layer.Tile 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分辨率的缩放级别组织的瓦片图片网格组成。
ol.layer.Image 用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。
ol.layer.Vector 用于显示在客户端渲染的矢量数据。
ol.layer.VectorTile 用于显示在客户端渲染的矢量瓦片数据。
ol.layer.WebGLTile 用于提供预渲染、平铺的瓦片图像，按特定分辨率的缩放级别组织。

数据源(Source)

OpenLayers 使用 ol.source.Source 子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如 OpenStreetMap、Bing、OGC 资源（WMS 与 WMTS）、矢量数据（GeoJSON 格式、 KML 格式…）等。当资源(source)与地图视图(view)的坐标系相同时，无需再次设置投影projection（默认与view坐标系一致），只有在资源与视图的投影不同的情况下，才需要在资源中明确指定 projection 属性来表示要素缓存的投影。

控件(Control)

控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。它们可以涉及用户输入（按钮），或者仅提供信息；位置是使用 CSS 确定的。默认情况下，它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中，但可以使用任何外部 DOM 元素。在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用。最后一类就是自定义类型的。

交互(Interaction)

Interaction是用来控制地图的，和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等，而交互功能不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。

几何(Geoms)

OpenLayers中的Geoms实际上指的是Geometry（几何对象），它是地图要素（Features）的核心部分，表示了空间数据的具体形状和位置。在OpenLayers中并没有直接名为Geoms的模块或类，而是通过ol/geom模块提供了一系列几何类型，如点（Point）、线（LineString）、多边形（Polygon）、多点集合（MultiPoint）、多线串（MultiLineString）、多边形集合（MultiPolygon）等。几何对象不仅用于构造要素，还可以用于各种空间分析和交互操作，如计算面积、长度、进行交集、缓冲区分析等。同时，它们也是OpenLayers中渲染的基础数据结构。

覆盖物(Overlay)

Overlay这个组件在Openlayers 项目中是经常要用到的，使用的场景通常是作为弹窗，显示某点或者某区域的信息。它不是根据屏幕位置固定的，而是与地理坐标相关联，因此平移地图将移动 Overlay。常用的大致有三类，弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素，所以我们也可以使用css来修改去样式。一个覆盖物最少需要一个元素，当数据量大时，元素节点过多会导致页面加载卡顿，不流畅。大数据量的绘制图还是使用图层最好。

样式(Style)

OpenLayers 提供了一种强大且灵活的方式来自定义地图上的矢量要素（如点、线、面）的样式，这些样式是通过 ol/style 模块中的 ol.style.Style 类和其他相关子类（如 ol.style.Icon、ol.style.Stroke、ol.style.Fill、ol.style.Text 等）来实现的。