前言
cesium-webpack 入門開發系列環境知識點了解：
- node 安裝包下載
webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址- webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學- vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
- cesium api文檔介紹，詳細介紹 cesium 每個類的函數以及屬性等等
- cesium 在線例子
我之前寫一系列關於 cesium 入門開發文章，均是采取頁面引用 cesium.js 以及 css 傳統的手段來開發。其實 cesium 官網早已推出 CesiumJS and webpack 形式，我一直沒抽空來嘗試，所以，今天抽空按照官網的教程搭建一套 cesium-webpack形式來開發。
- 參照 cesium 的教程如下：
CesiumJS and webpack - cesium-webpack-example github例子地址如下：
cesium-webpack-example
按照官網教程安裝配置過程中，有幾處地方需要注意一下，由於 npm install 安裝都是默認最新版本的，所以官網教程有些地方不太合適，版本差異性，具體如下：
- webpack.config.js 配置文件里面的 webpack.optimize.CommonsChunkPlugin 識別不到
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'cesium', minChunks: module => module.context && module.context.indexOf('cesium') !== -1 }) ],
改為
plugins: [ new webpack.optimize.SplitChunksPlugin({ name: 'cesium', minChunks: module => module.context && module.context.indexOf('cesium') !== -1 }) ],
- webpack.config.js 配置文件里面的 new webpack.optimize.UglifyJsPlugin() 已經被棄用
plugins: [ new webpack.optimize.UglifyJsPlugin() ]
改為
optimization: { minimize: true }
創建好的cesium-webpack 目錄，vscode 打開如下：
dist webpack 打包編譯后的文件夾
dist/index.html 地圖主頁
src/index.js 地圖初始化代碼
package.json 記錄了項目的配置信息，包括名稱、版本、許可證等元數據，也會記錄所需的各種模塊，包括 執行依賴，和開發依賴
webpack.config.js webpack 的配置文件
- 地圖頁面 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium + Webpack</title>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
- 地圖初始化加載 index.js
import Cesium from 'cesium/Cesium'; import "./css/main.css"; import "cesium/Widgets/widgets.css"; var viewer = new Cesium.Viewer('cesiumContainer');
- 在 vscode 新建終端，輸入 npm install 或者 npm i, 安裝環境需要的依賴包，若無報錯信息，則進行下一步
- npm run build，打包編譯web項目
- npm start，node 啟動 web 項目打包到瀏覽器運行看效果
- 如果正常出現該頁面，則運行成功
完整demo源碼見小專欄文章尾部：GIS之家cesium小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波