前言
由于工作需要,最近一直在基于
Openlayers
做一个项目的开发。记得上次用Openlayers
做项目还是16年的时候了,当时用的版本是2.X
,而今天写这篇文章时的版本则是Openlayers
官网最新版Openlayers 6.2.1
。 个人认为这个版本充分体现了ES6
面向对象的模块化编程思想,通过对开发包中不同功能的类的导入进行相关的函数调用。需要注意的是:现在基于Openlayers
做开发,最好是在Node
环境下,这样既能减少错误的发生,也更容易对接官方的API
。(想对没用过Node
开发环境的童鞋说一下,如果只通过Node
环境来做简单的前端功能开发,是非常简单的,完全不用因为不懂而畏惧。)
项目环境搭建
Node
环境的搭建我这里默认各位童鞋已经做好了,那么问题来了,我们应该怎么把最新的 OpenLayers
安装到自己的项目中呢?
1. 在项目根目录下初始化 Node
环境 (如果有童鞋直接用 IDE 创建了 Node
项目这一步可以跳过)
npm init
2. 安装 OpenLayers
最新插件 (这样我们就把最新的 OpenLayers
的库安装进了自己的项目中)
npm install ol
3. 安装 parcel
打包工具 (这是一个新的代码打包工具与 webpack
功能相似,但更简单)
npm install --save-dev parcel-bundler
4. 在 package.json
根节点内配置 script
(注意下面代码里的 index.html
文件,它是打包程序的入口文件,这里大家根据自己的实际情况配置即可)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
5. 安装 parcel
清理工具 (这个工具是为了在项目运行打包命令是能够自动清空 dist
文件夹下的文件)
npm i parcel-plugin-clean-dist
6. 安装 bable
插件 (这个工具是为了将开发过程中用到的部分 ES6
写法转为 ES5
写法,这里强调部分是因为,并不是所有 ES6
写法都可以被 bable
插件转化为 ES5
的)
npm install --save-dev @babel/preset-env
7. 在 package.json
根节点内配置 bable
(既然装了 bable
那就配上呀~!)
"babel": {
"presets": [
"@babel/preset-env"
]
}
8. parcel
配置自定义端口 (端口是一个开发环境中的可选配置,可避免默认的 1234
端口与其它程序出现冲突)
parcel -p 12345 index.html