openlayer3第一个网页地图

一、项目初始化

1、创建项目文件夹，并切换到当前目录下

mkdir （文件名） && cd （文件名）

2、使用以下代码进行项目初始化，-y表示也是，默认默认选项，不用一个信息一个信息的填写修改。

npm init -y   //相关目录下会创建一个package.json文件

也可以使用 npm init 进行初始化。
3、安装依赖
ol模块，提供网络地图所需要的各种对象

npm install ol     

parcel模块，一个快速零配置的打包工具

npm install parcel-bundler --save-dev

注
使用 --save 或不写，都会把信息记录到dependencies中；–运行依赖
使用 --save-dev 则会把信息记录到 devdependencies 中；–开发依赖
dependencies 中记录的是项目运行时需要的文件； devdependencies 中记录的是项目在开发过程中需要使用的一些文件,最终项目运行时不需要。
parcel仅用于项目打包，在项目运行时不需要所以使用的是：–save-dev
ol中包含了网络地图所需的各种对象，是开发和运行中必不可少的，所以是–save(可省略)。
package.json文件的使用
4、编辑index.html、index.js
5、运行程序

npm start

6、创建应用程序生产包

npm start

7、将dist/下的文件拷贝到服务器中，即可在 http://localhost:1234/ 中查看。
实例数据

二、无需下载模块的情况

简易的网页编写，在head中添加链接。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>