首先安裝cesium
npm install?cesium --save-dev
然后需要修改webpack配置
以下內容僅做備忘使用,當前項目測試沒問題
下面詳細解說
webpack.base.conf.js
添加代碼
const CopyWebpackPlugin = require('copy-webpack-plugin')
// The path to the Cesium source code
const cesiumSource = path.resolve(__dirname, '../node_modules/cesium/Source')
const cesiumWorkers = '../Build/Cesium/Workers'
output: {
? ??// Needed to compile multiline strings in Cesium
????sourcePrefix: '',
}
alias: {
// Cesium module name
'cesium': path.resolve(__dirname, cesiumSource),
}
module: {
unknownContextCritical: false,
rules: [
????{
????test: /\.js$/,
????loader: 'babel-loader',
? ? ?include: [resolve('src'), resolve('test'),resolve('node_modules/webpack-dev-server/client')]
????}
?]
}
plugins: [
????// Copy Cesium Assets, Widgets, and Workers to a static directory
????new CopyWebpackPlugin([ {
????????//from: path.join(cesiumSource, 'Workers'),
????????from: path.join(cesiumSource, cesiumWorkers),
????????to: 'Workers' } ]),
????new CopyWebpackPlugin([ {
????????from: path.join(cesiumSource, 'Assets'),
? ? ? ? to: 'Assets' } ]),
????new CopyWebpackPlugin([ {
????????from: path.join(cesiumSource, 'Widgets'),
????????to: 'Widgets' } ]),
]
webpack.dev.conf.js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
devServer: {
? ? //?historyApiFallback: true
? ?? historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], },
? ?? contentBase: config.build.assetsRoot, // for Cesium
}
plugins: [
? ??new webpack.DefinePlugin({
????'process.env': require('../config/dev.env'),
????// Define relative base path in cesium for loading assets ???
?????CESIUM_BASE_URL: JSON.stringify('/') }),
????// copy custom static assets
????new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]),
]
webpack.prod.conf.js
plugins: [
? ??new webpack.DefinePlugin({
????????'process.env': env,
????????// Define relative base path in cesium for loading assets
????????CESIUM_BASE_URL: JSON.stringify('/') }),
]
用法
地圖模塊
const Cesium = require('cesium/Cesium')
require('cesium/Widgets/widgets.css')
