Cesium 介绍之 安装依赖和 webpack 的相关配置

本文主要介绍如何在 vue 中安装 cesium 相关依赖和一些基础的 webpack 配置。

安装依赖

1. cesium:1.81.0
2. cesium-navigation-es6:3.0.4 (用于展示比例尺的三维地图工具)
3. copy-webpack-plugin:5.0.2 (拷贝 node_moudles 下的 cesium 静态资源到 dist 目录)
4. webpack: 4.42.0 （定义 cesium 获取静态资源的基本路径）

webpack 配置

const publicPath = process.env.NODE_ENV === "development" ? "/" : "/.../";
const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "../Build/Cesium/Workers";
const cesium_output_dir = "static/js/cesium/"; // cesium静态资源的默认打包输出目录
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

configureWebpack:() =>{
    return {
        resolve:{
              "cesium": path.resolve(__dirname, `${cesiumSource}/Cesium.js`),
              "cesiumStyle": path.resolve(__dirname, `${cesiumSource}/Widgets/widgets.css`)
        },
         output: {
            sourcePrefix: " "
        },
        amd: {
            toUrlUndefined: true
        },
        module: {
            unknownContextCritical: false
        },
        plugins: [
            new CopyWebpackPlugin([
                { from: path.join(cesiumSource, cesiumWorkers), to: `${cesium_output_dir}Workers` },
                { from: path.join(cesiumSource, "Assets"), to: `${cesium_output_dir}Assets` },
                { from: path.join(cesiumSource, "Widgets"), to: `${cesium_output_dir}Widgets` },
                { from: path.join(cesiumSource, "ThirdParty/Workers"), to: `${cesium_output_dir}ThirdParty/Workers` }
            ]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify(`${publicPath}${cesium_output_dir}`)
            })
        ]
    }
}