一、简介
现代JavaScript在使用和编写模块时工作得最好。推荐的使用OpenLayers的方法是安装ol包。本教程将指导您设置一个简单的开发环境,该环境需要node来完成所有工作。
本教程,我们将使用parcel来打包我们的应用,这里有其他几种选择,你可以点击readme进行了解
1、初始化阶段
通过运行mkdir new-project && cd new-project
为你的项目创建一个新的空的文件夹,输入以下代码进行初始化。
npm init
这将在你的工程文件下创建一个package.json
文件。将OpenLayers作为依赖项添加到应用程序。
npm install ol
此时,您可以通过运行NPM来添加所需的开发依赖项
npm install --save-dev parcel-bundler
二、程序代码和index.html文件
将你的程序代码放在index.js
文件中,这里有个简单的案例:
import 'ol/ol.css'; //引入样式和核心类
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
const map = new Map({ //创建一个地图容器
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({ //创建一个地图视图
center: [0, 0], //中心点
zoom: 0 //级别
})
});
同时我们也需要一个index.html
文件,与index.js
进行关联如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Parcel with OpenLayers</title>
<style>
#map {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./index.js"></script>
</body>
</html>
建立联系
package.json文件如下:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
},
"author": "",
"license": "ISC"
}
应用npm run build
和 npm start
来创建联系和监督变化。
npm start //运行程序
在控制台测试应用程序,在浏览器中打开http://localhost:1234/。每当更改某些内容时,页面将自动重新加载以显示更改的结果。
请注意,已经创建了一个包含所有应用程序代码和应用程序中使用的所有依赖项的JavaScript文件。在OpenLayers包中,它只包含所需的组件。
要创建应用程序的生产包,只需输入以下命令:
npm run build
最后将打包好的文件复制到服务器上即可。