OpenLayers 6基于Windows的开发环境配置

前言

使用OpenLayers 6开发WebGIS应用，需要先配置其开发环境。OpenLayers 6提供了两种开发方式：

1. 一种是传统开发方式，即载下相应的JS库和CSS样式库，直接在页面中引用即可；
2. 另一种是使用NodeJS的开发方式。

---

一、传统开发方式

 

1.下载OpenLayers 6开发库

可通过以下OpenLayers官网上的下载链接获取相应版本(这里选择v6.15.1)的开发库资源包：https://github.com/openlayers/openlayers/releases/tag/v6.15.1

2.引用OpenLayers 6开发库文件

解压后的开发库文件夹如下图所示：

 

我们只需要引用两个资源文件即可：

• ol.js(ol.js.map)：核心开发库，集成当前OpenLayers 6的所有功能，其中ol.js.map为ol.js的源映射文件，主要作为调试使用，使用时需要和ol.js放在同一目录下；
• ol.css(ol.css.map)：样式类，包括OpenLayers 6所有的默认样式信息。

OpenLayers 6开发库的引用方法非常简单，只需要在HTML页面中直接引入即可，如下所示。

<link href="./static/css/ol.css" rel="stylesheet" type="text/css" />
<script src="./static/libs/ol5/ol.js" type="text/javascript"></script>

---

二、NodeJS开发方式

OpenLayers从版本5开始支持NodeJS开发方式，也是官方推荐的开发方式。这种开发方式的好处是可以有针对性地引入所需要的模块，而不需要将整个库全部导入，并且在完成应用开发后可使用打包工具进行压缩打包，这样不仅可以保护自已的代码不容易被查看或修改，也可以大大地减少程序包的大小。

1.下载并开装NodeJS开发环境和NPM插件

NodeJS的官网下载地为：Node.js

按提示进行安装即可，新版的NodeJS已经集成了NPM，故不需要另外安装NPM，安装完成后，启动命令行窗口，输入以下命令：

npm -v

如果命令返回具体的版本号，则说明NodeJS环境已经安装成功，如下图所示。

 

2.初始化项目

首先，新建项目目录如d:\ol_demo；接着，启动命令行窗口，进行项目目录d:\ol_demo，通过输入以下命令初始化项目目录：

npm init -y

初始化完成后，将会在项目目录下自动生成一个package.json，如下图所示。

 3.安装OpenLayers 6开发库

直接在命令行窗口中的项目目录下运行以下命令进行安装OpenLayers 6开发库即可。

安装最新版本：

npm install ol

 安装指定版本：

npm install ol@6.15.1