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

前言

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

我以前寫一系列關於 cesium 入門開發文章,均是採起頁面引用 cesium.js 以及 css 傳統的手段來開發。其實 cesium 官網早已推出 CesiumJS and webpack 形式,我一直沒抽空來嘗試,因此,今天抽空按照官網的教程搭建一套 cesium-webpack形式來開發。html

按照官網教程安裝配置過程當中,有幾處地方須要注意一下,因爲 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');
  • 在 vscode 新建終端,輸入 npm install 或者 npm i, 安裝環境須要的依賴包,若無報錯信息,則進行下一步
  • npm run build,打包編譯web項目
  • npm start,node 啓動 web 項目打包到瀏覽器運行看效果
  • 若是正常出現該頁面,則運行成功

完整demo源碼見小專欄文章尾部GIS之家cesium小專欄github

文章尾部提供源代碼下載,對本專欄感興趣的話,能夠關注一波web

相關文章
相關標籤/搜索