一、项目初始化
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>