openlayers5-webpack 入門開發系列一初探篇（附源碼下載）

時間 2019-12-05

標籤 openlayers5 openlayers webpack 入門開發系列初探源碼下載简体版

原文原文鏈接

前言

openlayers5-webpack 入門開發系列環境知識點了解：css

node 安裝包下載
webpack 打包管理工具須要依賴 node 環境，因此 node 安裝包必須安裝，上面連接是官網下載地址

webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學

vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，我的覺的這款工具還不錯

openlayers5 api文檔介紹，詳細介紹 openlayers5 每一個類的函數以及屬性等等

openlayers5 在線例子

我以前寫一系列關於 openlayers4 入門開發文章，可是官網推出來 openlayers5 版本的好一段時間， openlayers5 跟 openlayers4 版本差別不小，改成 import 形式引用 js css 等資源，因此，開始了本篇文章 openlayers5-webpack 入門開發系列一初探篇，對於 webpack 這個管理工具平臺，我也是學習階段，跟你們一塊兒學習交流，寫的很差之處，望見諒。html

環境搭建

安裝 node.js，筆者版本爲：10.15.3
下載安裝 vscode
demo 項目工程文件目錄以及關鍵代碼講解

dist webpack 打包編譯後的文件夾
dist/index.html 地圖主頁
src/map.js 地圖初始化代碼
package.json 記錄了項目的配置信息，包括名稱、版本、許可證等元數據，也會記錄所需的各類模塊，包括執行依賴，和開發依賴
webpack.config.js webpack 的配置文件前端

地圖頁面 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
})
});