OpenLayers.js 入门教程：打造互动地图的入门指南

本文简介

戴尬猴，我是德育处主任

本文介绍如何使用 OpenLayers.js （后面简称 ol）。ol 是一个开源 JavaScript 库，可用于在Web页面上创建交互式地图。 ol能帮助我们在浏览器轻松地使用地图功能，例如地图缩放、地图拖动、地图标记和地图交互等。

本文适合想有JS基础，又想了解 ol 的工友。

OpenLayers简介

⚡️ OpenLayers官网

ol 使得在任何网页中放置动态地图变得很容易。它可以显示从任何来源加载的地图块、矢量数据和标记。OpenLayers 的开发是为了进一步利用各种地理信息。它是完全免费的，开放源代码 JavaScript，根据包含2个子句的 BSD 许可证(也称为 FreeBSD)发布。

上面这段话来自 ol 官网的简介。

简单来说，ol 能显示和编辑地图。如果你不想用百度、高德、腾讯等地图，如果你需要高度定制地图，那可以试试 ol 。

在某些特定情况（比如内网）要用到地图编辑功能，也可以使用 ol 。

安装 OpenLayers

本文用到的 ol 版本是 7.3.0

如果是用脚手架创建的项目，大概率会用 npm 的方式将 ol 安装到项目里。

不管是 npm 还是 cdn 的方式，都需要引入 ol 的 css 和 js。

本文为了方便，我都会用 cdn 的方式讲解。

npm

安装命令

npm i ol

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

上面的代码看不懂没关系，后面会讲到的。

cdn

1

如果你想使用其他版本，可以在这里找找 ⚡️ ol的其他版本

重点声明！！！

在使用 ol 渲染地图时，需要用到一些底图。

本文会提到 OSM 图源，但 OSM 图源的边界可能不是那么精准，在学习时使用该图源没问题，但切勿在真实项目中使用OSM图源！！！切记！切记！

起步

学习 ol 会接触到很多地图相关的概念，但作为入门阶段，我不打算一上来就把所有概念过一遍，这样太打机学习热情了。我打算学到哪个功能就讲那个功能的概念。

起步阶段，先了解一下用 ol 怎么在页面创建地图。

1. 引入 ol.js 和 ol.css。
2. 创建地图容器（一个 HTML 标签，通常使用 div ）。
3. 设置地图容器宽高（必须做的一项！！！）。
4. 使用 ol 绑定地图容器。
5. 创建地图底图。
6. 设置地图中心点。

先来看看效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

根据前面提到的流程创建出一个地图。

ol.Map() 是地图的容器，它返回一个 ol 地图对象。它可以配置各种图层、加载各种控件。

上面的例子中，ol.Map() 中有3个核心要素：

• target：绑定地图容器的属性，传入容器的 id 即可。
• layers：底图图层。ol 支持多图层配置，所以 layers 的值是一个数组。
• view：地图视图。可以配置地图的缩放、投影坐标系、中心点、旋转角度等配置项。

视图常用配置

视图指的是 ol.View 这个类，这是一个很重要的类，它拥有设置地图的中心点、缩放级别、旋转角度等功能。

ol.View 也是我认为初学者比较容易掌握的一个知识点