前言
openlayers5-webpack 入門開發系列環境知識點了解：
- node 安裝包下載
webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址- webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學- vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
- openlayers5 api文檔介紹，詳細介紹 openlayers5 每個類的函數以及屬性等等
- openlayers5 在線例子
我之前寫一系列關於 openlayers4 入門開發文章，但是官網推出來 openlayers5 版本的好一段時間， openlayers5 跟 openlayers4 版本差異不小，改為 import 形式引用 js css 等資源，所以，開始了本篇文章 openlayers5-webpack 入門開發系列一初探篇，對於 webpack 這個管理工具平台，我也是學習階段，跟大家一起學習交流，寫的不好之處，望見諒。
環境搭建
- 安裝 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
})
});
- 在 vscode 新建終端，輸入 npm install 或者 npm i, 安裝環境需要的依賴包，若無報錯信息，則進行下一步
- npm run build，打包編譯web項目
- npm start，node 啟動 web 項目打包到瀏覽器運行看效果
- 如果正常出現該頁面，則運行成功
完整demo源碼見小專欄文章尾部：GIS之家openlayers小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波