3.3 OpenLayers 5开发环境的配置
使用OpenLayers 5开发WebGIS应用，前提是要配置其开发环境，这也是进行开发的必备步骤。OpenLayers 5提供了两种开发方式，一种是传统开发方式，即下载相应的JS库和CSS样式库，直接在页面中添加即可；另一种是NodeJS开发方式。
3.3.1 传统开发方式
首先，要获取OpenLayers 5的开发库。开发库是开源的，可通过OpenLayers官网上的资源链接http://openlayers.org/download/获取最新的开发库资源包，如图3-10所示。
图3-10 下载OpenLayers 5的开发库
OpenLayers 5提供当前最新版本的两个开发库资源包，一个仅包括开发库（开发与调试的js库、css样式），另外一个则包括开发库、开发库代码、示例、API等所有的开发资源。如图3-11所示，完整的开发库资源包包括开发库（build、css目录内容）、API（apidoc目录内容）、示例（examples目录内容）等。在进行具体开发时，引用OpenLayers 5开发库即可，其他为辅助资源，在开发的过程中供查看、参考。OpenLayers 5开发库如下：
图3-11 完整的开发库资源包
● ol.js（ol.js.map）：核心开发库，集成当前OpenLayers 5的所有功能，其中ol.js.map为ol.js的源映射文件，主要作为调试使用，在使用时需要和ol.js放置在同一目录下。
● ol.css（ol.css.map）：样式类，包含OpenLayers 5的所有默认样式信息。其中ol.css.map为ol.css的源映射文件，其主要作为调试使用，在使用时需要和ol.css放置在同一目录下。
注：本书所有的示例均使用OpenLayers的v5.3.0开发库，其官网会及时发布当前最新版本的开发库。
其次，要选定一个用于开发应用程序的工具。OpenLayers 5是基于JavaScript的WebGIS客户端开发库，本质就是HTML+JavaScript脚本的Web客户端开发，可以使用Dreamweaver等工具开发网页，当然可以直接用文本编辑器编写网页。但在便捷工具时代，谁都不愿意浪费宝贵的时间，都会选择高效的开发工具开发应用程序。目前，除了Dreamweaver工具，开发Web应用有很多集成开发环境（Integrated Development Environment, IDE）可供选择。.NET体系就是微软的Visual S tudio，包括2010、2012、2015、2019等多个版本；Java IDE则包括Eclipse、JBuilder、NetBeans等，这些都是主流的Web应用开发IDE。
由于OpenLayers 5是纯客户端的开发库，用户可以根据自己的喜好选择适合的开发工具。但如果涉及后台开发，则建议根据．NET或Java体系类别选择相应的集成开发环境。本书使用MS Visual Studio 2015（VS2015），部分功能示例涉及的后台开发采用．NET实现。可从微软官方网站下载VS2015的安装程序，安装后打开此开发工具，其页面如图3-12所示。
图3-12 MS Visual Studio 2015页面
3.3.2 NodeJS开发方式
OpenLayers从5.x版本开始，对于项目开发过程，官方建议将应用程序与其依赖项捆绑在一起，即使用NodeJS的开发方式。在开发过程中，开发者可以按照自己的开发需求，有针对性地导入自己使用到的模块，而不需要将整个库全部导入项目中，并且在完成应用开发之后可使用打包工具将自己的应用打包，形成一个静态的、轻量的工程，这样做不仅可保护自己的代码不被查看或修改，而且可减小应用程序包的大小。下文将设置一个简单的OpenLayers 5 For NodeJS开发环境，并且在应用程序编写完成之后，使用Parcel进行打包。
（1）安装NodeJS环境以及NPM插件。由于开发环境需要NodeJS环境才可以正常使用，因此要首先安装NodeJS环境。可以根据自己计算机或服务器的配置下载并安装对应的NodeJS环境，官网下载地址为https://nodejs.org/en/download/。NodeJS官网下载页面如图3-13所示。
图3-13 NodeJS官网下载页面
新版的NodeJS已经集成了NPM，故不需要另外安装NPM。NodeJS环境安装完成之后，启动命令行窗口，此处以Windows系统为例介绍，在命令行窗口中输入命令“npm -v”，如果命令行返回具体版本号，则说明NodeJS环境已经安装成功，如图3-14所示。
图3-14 查看NPM版本号
（2）初始化项目目录。通过运行命令“mkdir e:\ol5Test && e: && cd e:\ol5Test”可创建一个新的空目录并进入该目录，执行命令“npm init -y”初始化项目目录。初始化项目目录页面如图3-15所示。
图3-15 初始化项目目录页面
项目目录初始化完成之后，将会在项目目录下生成一个package.json配置文件，如图3-16所示。
图3-16 项目目录初始化完成后生成的package.json配置文件
（3）安装Parcel插件（OpenLayers官网推荐）。该插件用于应用程序打包，当然也可以使用其他的打包工具，如WebPack等。运行命令“npm install --save-dev parcel-bundler”可安装Parcel插件，如图3-17所示。安装完成之后会在项目目录下生成node_modules文件夹和package-lock.json文件，如图3-18所示。
图3-17 安装Parcel插件
图3-18 安装Parcel插件后生成的文件
（4）安装最新的OpenLayers 5开发环境。直接在命令行窗口中的项目目录下运行命令“npm install ol”即可。需要注意的是，在环境配置的过程中需要在线下载相应的插件，因此需要保持网络的连接状态。
（5）编写应用程序代码。首先在项目目录下新建index.js脚本文件，添加如下代码。
import ′ol/ol.css′；
import {Map, View} from ′ol′；
import TileLayer from ′ol/layer/Tile′；
import XYZ from ′ol/source/XYZ′；
var map = new Map（{
targe t:′map′，
layers: [
new TileLayer（{
source: new XYZ（{
url: ″http://t0.tianditu.com/DataServer? T=vec_w&x={x}&y={y}&l={z}&tk=您的天地图密钥″
}）
}）
]，
view: new View（{
//地图初始中心点
center： [114.2905, 30.5607]，
projection： ″EPSG:4326″，
minZoom: 2，
zoom: 12
}）
}）；
然后在项目目录下新建index.html文件，将index.js脚本文件引入，代码如下所示。
＜! DOCTYPE html＞
＜html＞
＜head＞
＜meta charset=″utf-8″＞
＜titl e＞Using Parcel with OpenLayers＜/title＞
＜style＞
#map {
width: 100%；
height： 100%；
}
＜/style＞
＜/head＞
＜body＞
＜div id=″map″＞＜/div＞
＜script src=″./index.js″＞＜/script＞
＜/body＞
＜/html＞
最后修改package.json配置文件，将以下代码添加到package.json文件中。
″scripts″: {
″test″: ″echo \″Error: no test specified\″ && exit 1″，
″start″: ″parcel index.html″，
″build″: ″parcel build--public-url . index.html″
}
（6）启动应用程序。在命令行窗口中的项目目录下运行命令“npm start”可启动应用程序，如图3-19所示。
图3-19 启动应用程序
在浏览器中打开“localhost:1234”，在应用程序中修改某些内容时，页面都会自动重新加载并显示修改后结果。
（7）应用程序打包。在命令行窗口中的项目目录下运行命令“npm run build”即可在目录dist生成应用程序打包文件，如图3-20所示。
图3-20 应用程序打包