也许你还不熟悉Openlayers，也许你是一个Openlayers小白，零基础没关系，这篇文章提供最基础的 Openlayers 教程，简单易学，贯穿整个Openlayers 知识体系。读完本文，您将会对 Openlayers 有一个全新的认识。

一、什么是Openlayers？

OpenLayers 是一个用于创建交互式地图的 JavaScript 库。它提供了一系列工具和功能，使得开发者可以在网页上嵌入动态、可交互的地图。

使用 OpenLayers，你可以加载各种地图数据源，如瓦片地图、矢量数据等，并在地图上添加各种元素，如标记、线条、多边形等。它还支持地图缩放、平移、旋转等基本操作，以及图层管理、事件处理等高级功能。

OpenLayers 的优点在于它的灵活性和可扩展性。它可以与其他 JavaScript 库和框架集成，并且有丰富的文档和社区支持。无论是创建简单的地图应用，还是构建复杂的地理信息系统（GIS），OpenLayers 都是一个强大的工具。

---

二、Openlayers 对比 leaflet 和 mapbox

参考： 地图库的三足鼎立：Mapbox、Leaflet 和 OpenLayers 该选谁？

• 如果您的项目需要高度定制化的地图和强大的地理数据处理功能，Mapbox可能是更好的选择。
• 如果您的项目是轻量级的，尤其是面向移动端用户的，Leaflet 可能更适合您的需求。
• 如果您的项目需要兼容老旧的浏览器或者是企业级别的、对稳定性有非常高要求，OpenLayers可能是最佳选择。

---

三、搭建Openlayers 的开发环境

图文参考：Openlayers从0 到1 搭建开发环境

---

四、Openlayers 基础 – map

4.1 map核心API

4.1.1map 属性参数

• target 地图的容器，元素本身或id元素的 。必须指定，不指定无法加载地图。
• view 视图。需要在构造时或通过方法（setView）指定，否则不会加载图层。
• layers 图层。没定义图层，也会加载，显示空白图层。图层是按顺序加载的，想要在最上层需要放在最后面。
• controls 添加到地图上的控件。默认加载 ol/control 下 defaults，默认控件组。
• overlays 覆盖物。默认情况下，不添加任何覆盖物。
• pixelRatio 设备上物理像素与设备无关像素（下降）之间的比率。
• interactions 添加到地图的交互事件。默认加载 ol/interaction 下 defaults，默认交互组。
• keyboardEventTarget 监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例如，如果将此选项设置为 document键盘，则交互将始终触发。如果未指定此选项，则库在其上侦听键盘事件的元素是地图目标（即，用户为地图提供的div）。如果不是 document，则需要重点关注目标元素以发出关键事件，这要求目标元素具有tabindex属性。
• maxTilesLoading 同时加载的最大瓦片数。默认16。
• moveTolerance 光标必须移动的最小距离（以像素为单位）才能被检测为地图移动事件，而不是单击。增大此值可以使单击地图更容易。
• layerGroup 地图中图层的图层组。
• size DOM 中地图的大小（以像素为单位）。

4.1.3 map 的常用方法

• on(type, listener) 侦听某种类型的事件。
• addControl(control) 添加控件。
• addInteraction(interaction) 添加交互。
• addLayer(layer) 添加图层。
• removeLayer(layer) 删除图层。
• addOverlay(overlay) 添加覆盖物。
• dispatchEvent(event) 调度事件并调用所有侦听此类型事件的侦听器。
• getOverlays() 获取所有覆盖物。
• removeOverlay(overlay) 删除指定覆盖物

4.2 map 常见事件示例

map event 指的是地图上的事件，例如鼠标点击、移动、缩放等。 简单的应用方式：

map.events.on(‘click’, function (evt) {
// 在点击事件发生时执行的代码
});

4.2.1 click 示例

示例：鼠标click显示企业名片

4.2.2 singleclick 示例

示例：singleclick点击选择feature，并设置特定的颜色

4.2.3 dblclick 示例

示例： dblclick事件示例-显示品牌代言人信息

4.2.4 pointermove 示例

右键点击定位，获取某一点下多层features信息

4.2.5 右键点击示例

示例：右键点击定位，获取某一点下多层features信息

4.2.6 movestart、moveend 示例

示例：moveend事件获取地图左上和右下的坐标信息

4.2.7 loadstart、loadend 示例

示例：loadstart和loadend 旋转加载显示

4.2.8 modifystart和modifyend 示例

示例：modifystart和modifyend显示提示信息

4.2.9 postrender 示例

示例：postrender地图图像的滤镜处理

---

五、Openlayers 基础 - view

view表示地图的简单 2D 视图。可以用来控制地图在容器中移动，还可以更改地图的中心，分辨率，旋转等。主要会用到两种projection：球面墨卡托 (EPSG:3857)和wgs84（EPSG:4326）

5.1 view 核心API

5.1.1 view 属性参数

• center 视图的初始中心。
• zoom 仅在resolution未定义时使用。缩放级别用于计算视图的初始分辨率。
• projection 投射方式，默认为EPSG:3857
• extent 限制视图的范围。值表示范围的数字数组：[minx, miny, maxx, maxy]。
• constrainRotation 旋转约束。 false意味着没有约束。true意味着没有约束，但在零附近捕捉到零。数字将旋转限制为该数量的值，就是设置90只能旋转90度。
• enableRotation 是否启用旋转。
• constrainOnlyCenter 如果为true，则范围约束将仅适用于视图中心而不是整个范围。
• smoothExtentConstraint 如果为true，范围约束将被平滑地应用，即允许视图稍微超出给定的extent。
• maxResolution 用于确定分辨率约束的最大分辨率。
• minResolution 用于确定分辨率约束的最小分辨率。
• maxZoom 用于确定分辨率约束的最大缩放级别。
• minZoom 用于确定分辨率约束的最小缩放级别。
• constrainResolution 如果为 true，则视图将始终在交互后以最接近的缩放级别进行动画处理；false 表示允许中间缩放级别。
• resolutions决定缩放级别的分辨率。
• rotation 以弧度为单位的视图初始旋转（顺时针旋转，0 表示北）。

5.1.2 view 常见方法

• setCenter 设置当前视图的中心。任何范围限制都将适用。
• setZoom 缩放到特定的缩放级别。任何分辨率限制都将适用。
• getCenter 获取视图中心，返回一个地图中心的坐标。
• getZoom 获取当前的缩放级别。如果视图不限制分辨率，或者正在进行交互或动画，则此方法可能返回非整数缩放级别。
• getMaxZoom 获取视图的最大缩放级别。
• getMinZoom 获取视图的最小缩放级别。
• getProjection 获取地图使用的”投影坐标系统”，如EPSG:4326；
• getMaxResolution 获取视图的最大分辨率。
• getMinResolution 获取视图的最低分辨率
• getRotation 获取视图旋转。
• getZoomForResolution 获取分辨率的缩放级别。
• setConstrainResolution 设置视图是否应允许中间缩放级别。
• setMaxZoom 为视图设置新的最大缩放级别。
• setMinZoom 为视图设置新的最小缩放级别。
• setRotation 设置该视图的旋转角度。任何旋转约束都将适用。

5.2 view 常见使用示例

5.2.1 zoom 示例

示例：设置zoom最大值和最小值

5.2.2 resolution 示例

示例：根据Resolution的不同，显示不同的底图

5.2.3 extent 示例

示例：set extent 和 fit extent功能展示

5.2.4 center 示例

示例： 获取地图的中心点经纬度信息

5.2.5 projection 示例

示例： 非4326,3857的投影方法

5.2.6 rotation 示例

示例：设置地图左右旋转功能

---

六、Openlayers 基础 - layer

图层就像是含有文字或图形等元素的图片，一张张按顺序叠放在一起，组合起来形成页面的最终效果。

在 openlayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型，它们都是继承 Layer 类的。

6.1 加载地图

6.1.1 加载谷歌地图

示例：加载谷歌地图

6.1.2 加载OSM地图

示例：加载OSM地图

6.1.3 加载Bing地图

示例：加载Bing地图

6.1.4 加载Mapbox地图

示例：加载Mapbox地图

6.1.5 加载baidu地图

示例：加载baidu地图

6.1.6 加载Arcgis地图

示例： 加载Arcgis地图

6.1.7 加载高德地图

示例： 加载高德地图

6.1.8 加载天地图

示例：加载天地图

---

七、Openlayers 基础 - source

八、Openlayers 基础 - style

---

九、Control

控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。 它们可以涉及用户输入（按钮），或者仅提供信息； 位置是使用 CSS 确定的。 默认情况下，它们放置在 CSS 类名为 ol-overlaycontainer-stopevent 的容器中，但可以使用任何外部 DOM 元素。

.在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏）。第二类是需要放在Div元素中才能用。第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用。最后一类就是自定义类型的。

9.1 添加删除control

• addControl(control) 将给定的控件添加到地图中
• removeControl(control) 从地图中移除已给定的控件

9.2 control示例

9.2.1 比例尺 - ScaleLine

示例：添加比例尺功能

9.2.2 鹰眼/缩小图 - OverviewMap

示例：添加鹰眼功能

9.2.3 全屏 - FullScreen

示例：添加全屏显示功能

9.2.4 版权信息 - Attribution

示例：修改自定义地图版权信息

9.2.5 旋转地图 - Rotate

示例：添加旋转地图功能

9.2.6 放大缩小 - Zoom

示例：自定义地图放大缩小按钮功能

9.2.7 缩放滑块控件 - ZoomSlider

示例： 添加缩放滑块控件

9.2.8 鼠标位置 - MousePosition

示例： 显示鼠标经纬度信息

9.2.9 ZoomToExtent

示例： ZoomToExtent

9.2.10 清除所有控件

示例： 清除所有控件，按需添加Control

---

十、Interaction

在Openlayers中，需要用到一些设备行为来进行交互，这里面就惨生了一个概念Interaction。 它是用来控制地图的。和控件一样的作用。不过它们的区别是控件触发都是一些可见的 HTML元素触发，如按钮、链接等，而交互功能不可见的，如鼠标双击、滚轮滑动，手机设备的手指缩放等。

10.1示例

10.1.1 draw 示例

示例：使用draw画点、线、圆、多边形
示例：使用draw画正方形、矩形、六芒星

10.1.2 modify 示例

示例： 绘制draw多边形，并modify编辑图形

10.1.3 select 示例

示例： select选择feature，显示信息

10.1.4 Drag-and-Drop 示例

示例： Drag-and-Drop拖拽文件解析显示图形

10.1.5 DragPan示例

示例： 拖拽放大所选区域

10.1.6 DragZoom 示例

示例： 拖拽实现放大所选区域

---

十一、Overlay

Overlay这个组件在Openlayers 项目中是经常要用到的，使用的场景通常是作为弹窗，显示某点或者某区域的信息。它不是根据屏幕位置固定的，而是与地理坐标相关联，因此平移地图将移动 Overlay。常用的大致有三类，弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素，所以我们也可以使用css来修改去样式。

11.1 核心API

11.1.1 常用属性

• id，覆盖物的唯一标识 ，便于 getOverlayById 方法取得相应的 overlay。
• element ， 要添加到覆盖物元素。
• offset， 偏移量，像素为单位。overlay 相对于放置位置（position）的偏移量，默认值是 [0, 0]，正值分别向右和向下偏移。
• position，在地图所在的坐标系框架下，overlay 放置的位置。
• positioning，overlay 对于 position 的相对位置，可能的值是’bottom-left’，‘bottom-center’，‘bottom-right’， ‘center-left’，‘center-center’，‘center-right’，‘top-left’， ‘top-center’，和’top-right’。
• stopEvent，是否应停止事件传播到地图视口。
• autoPanAnimation，用于将叠加层平移到视图中的动画选项。此动画仅在autoPan启用时使用。可以提供Aduration和easing来自定义动画。如果autoPan作为对象提供，则弃用并忽略。
• className，CSS 类名。

11.1.2 overlay 常用方法

• setPosition，设置 position 属性。
• getElement，获取传入的元素节点。
• getId，获取 overlay 的 id。
• getMap，获取与 overlay 关联的 map对象。
• getOffset，获取 offset 属性。
• getPosition，获取 position 属性。
• getPositioning，获取 positioning 属性。
• setElement, 设置元素节点。
• setMap，设置map对象。
• setOffset，设置 offset。
• setPositioning，设置 positioning 属性。

11.2 overlay 示例

11.2.1 弹窗中显示经纬度信息

示例：弹窗中显示经纬度

11.2.2 弹窗中播放mp4视频

示例：弹窗中播放mp4视频

11.2.3 弹窗中显示地点详情

示例：弹窗中显示地点详情

---

十二、Geom 几何图形

几何类型包括： “Point”、“LineString”、“LinearRing”、“Polygon”、“MultiPoint”、“MultiLineString”、“MultiPolygon”、“GeometryCollection”和“Circle”。

12.1 示例

12.1.1 Point 示例

示例：显示点

12.1.2 LineString 示例

示例：显示线段

12.1.3 LinearRing示例

示例：

12.1.4 Polygon 示例

示例： 显示多边形

12.1.5 MultiPoint 示例

示例：显示多个点

12.1.6 MultiLineString 示例

示例：显示多个线段

12.1.7 MultiPolygon示例

示例：显示多个多边形

12.1.8 GeometryCollection 示例

示例：显示几何图形集合

12.1.9 Circle 示例

示例：显示圆

---

十三、Openlayers 学习资料

13.1 Openlayers 官方网站

网址：https://openlayers.org/

13.2 Openlayers示例大全

参考：openlayers 常用示例大全