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

時間 2019-12-05

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

原文原文鏈接

前言

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

參照 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
})
],

改成node

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()
]

改成webpack

optimization: {
minimize: true
}

建立好的cesium-webpack 目錄，vscode 打開以下：

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

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