前言

我之前写一系列关于 openlayers4 入门开发文章，但是官网推出来 openlayers5 版本的好一段时间， openlayers5 跟 openlayers4 版本差异不小，改为 import 形式引用 js css 等资源，所以，开始了本篇文章 openlayers5-webpack 入门开发系列一初探篇，对于 webpack 这个管理工具平台，我也是学习阶段，跟大家一起学习交流，写的不好之处，望见谅。

环境搭建

安装 node.js，笔者版本为：10.15.3
下载安装 vscode
demo 项目工程文件目录以及关键代码讲解

地图页面 index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>openlayers5入门开发系列Demo</title>

<!-- <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css"> -->

<style>

html, body {

margin: 0;

height: 100%;

}

#map {

position: absolute;

top: 0;

bottom: 0;

width: 100%;

}

</style>

</head>

<body>

<div id="map"></div>

<script src="bundle.js"></script>

</body>

</html>

地图初始化加载 map.js

import {Map, View} from 'ol';

import TileLayer from 'ol/layer/Tile';

import XYZ from 'ol/source/XYZ';

import 'ol/ol.css';

new Map({

target: 'map',

layers: [

new TileLayer({

source: new XYZ({

url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'

})

})

],

view: new View({

center: [0, 0],

zoom: 2

})

});

在 vscode 新建终端，输入 npm install 或者 npm i, 安装环境需要的依赖包，若无报错信息，则进行下一步
npm run build，打包编译web项目
npm start，node 启动 web 项目打包到浏览器运行看效果
如果正常出现该页面，则运行成功

openlayers5

openlayers5-webpack 入门开发系列一初探篇（附源码下载）

前言

环境搭建