cesium-webpack 入門開發系列環境知識點了解:css
- node 安裝包下載
webpack 打包管理工具須要依賴 node 環境,因此 node 安裝包必須安裝,上面連接是官網下載地址- webpack 配置介紹文檔
詳細的 webpack 文檔配置介紹,適合新手查看,我也是邊看邊學- vscode 安裝包下載,我這邊用 vscode工具編譯開發前端項目,我的覺的這款工具還不錯
- cesium api文檔介紹,詳細介紹 cesium 每一個類的函數以及屬性等等
- cesium 在線例子
我以前寫一系列關於 cesium 入門開發文章,均是採起頁面引用 cesium.js 以及 css 傳統的手段來開發。其實 cesium 官網早已推出 CesiumJS and webpack 形式,我一直沒抽空來嘗試,因此,今天抽空按照官網的教程搭建一套 cesium-webpack形式來開發。html
按照官網教程安裝配置過程當中,有幾處地方須要注意一下,因爲 npm install 安裝都是默認最新版本的,因此官網教程有些地方不太合適,版本差別性,具體以下:前端
plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'cesium', minChunks: module => module.context && module.context.indexOf('cesium') !== -1 }) ],
改成node
plugins: [ new webpack.optimize.SplitChunksPlugin({ name: 'cesium', minChunks: module => module.context && module.context.indexOf('cesium') !== -1 }) ],
plugins: [ new webpack.optimize.UglifyJsPlugin() ]
改成webpack
optimization: { minimize: true }
dist webpack 打包編譯後的文件夾
dist/index.html 地圖主頁
src/index.js 地圖初始化代碼
package.json 記錄了項目的配置信息,包括名稱、版本、許可證等元數據,也會記錄所需的各類模塊,包括 執行依賴,和開發依賴
webpack.config.js webpack 的配置文件git
<!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>
import Cesium from 'cesium/Cesium'; import "./css/main.css"; import "cesium/Widgets/widgets.css"; var viewer = new Cesium.Viewer('cesiumContainer');
完整demo源碼見小專欄文章尾部:GIS之家cesium小專欄github
文章尾部提供源代碼下載,對本專欄感興趣的話,能夠關注一波web