Cesium整合Webpack
2022-05-04 本文已影响0人
WebGiser
参考：
https://cesium.com/learn/cesiumjs-learn/cesiumjs-webpack/
https://github.com/CesiumGS/cesium-webpack-example#cesium-webpack-example
https://cesium.com/blog/2019/10/31/cesiumjs-es6/
https://www.jianshu.com/p/85917bcc023f
创建项目
新建空文件夹webpack-cesium，执行 npm init 命令，生成 package.json 文件。
image.png
安装相关依赖
cnpm i webpack@5.50.0 webpack-cli@4.7.2 copy-webpack-plugin@9.1.0 html-webpack-plugin@5.3.2 jsdoc@3.6.10 --save-dev
cnpm i css-loader@6.2.0 style-loader@3.2.1 url-loader@4.1.1 --save-dev
cnpm i cesium@1.88 --save
创建 webpack-config.js 文件，代码如下：
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
module.exports = {
context: __dirname,
entry: {
app: './src/index.js'
},
output: {
filename: 'static/[name].js',
path: path.resolve(__dirname, 'build/dist')
},
amd: {
toUrlUndefined: true
},
resolve: {
alias: {
cesium: path.resolve(__dirname, cesiumSource)
},
mainFiles: ['index', 'Cesium']
},
module: {
rules: [{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}, {
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: [ 'url-loader' ]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
inject: 'head',
scriptLoading: 'blocking'
}),
new CopyWebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
]
}),
new webpack.DefinePlugin({
CESIUM_BASE_URL: JSON.stringify('./')
})
],
mode: 'development',
devtool: 'eval',
};
package.json 代码如下：
{
"name": "webpack-cesium",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"copy-webpack-plugin": "^9.1.0",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"jsdoc": "^3.6.10",
"style-loader": "^3.2.1",
"url-loader": "^4.1.1",
"webpack": "^5.50.0",
"webpack-cli": "^4.7.2"
},
"dependencies": {
"cesium": "^1.88.0"
}
}
src/index.js 代码如下：
import * as cesium from 'cesium'
import 'cesium/Widgets/widgets.css'
window.EarthSDK = cesium;
src/index.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack-cesium</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
window.viewer = new EarthSDK.Viewer("container",{
imageryProvider: new EarthSDK.UrlTemplateImageryProvider({
url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
})
})
</script>
</body>
</html>
测试
执行 npm run build 命令，即可在 build/dist 下生成打包后的静态文件以及测试的index.html。使用 live server 插件打开 index.html 文件，即可看到三维地球。
