1.简介

Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，Cesium支持2D/3D

2.安装cesium

建议指定1.95.0版本

npm install cesium@1.95.0 -s

2.安装loader

npm install @open-wc/webpack-import-meta-loader

3.安装webpack

npm install copy-webpack-plugin@10.2.4

4.生成Token

4.vue.config.js配置

"use strict";
const { defineConfig } = require("@vue/cli-service");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");

const webpack = require("webpack");
const path = require("path");

const cesiumSource = "node_modules/cesium/Source";
const cesiumWorkers = "Workers";
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  outputDir: "dist",
  // 是否开启eslint保存检测，有效值：ture | false | 'error'
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  // 本地服务器配置
  devServer: {
    port: 8888,
    host: "0.0.0.0",
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: "https://kwyd.hyyun.com/community",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
  },
  configureWebpack: {
    externals: {
      cesium: "Cesium"
    },
    output: {
      sourcePrefix: " ", // 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: {
      toUrlUndefined: true, // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
      alias: {
        "@": path.resolve("src"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
          { from: path.join(cesiumSource, "Assets"), to: "Assets" },
          { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
          {
            from: path.join(cesiumSource, "ThirdParty/Workers"),
            to: "ThirdParty/Workers",
          },
        ],
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
      new CompressionPlugin({
        test: /\.js$|\.html$|\.css/,
        threshold: 10240,
        deleteOriginalAssets: false,
      }),
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp:
        /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
        {
          exclude: /node_modules/,
          include: /src/,
          test: /\.js$/,
          use: "babel-loader",
        },
      ],
    },
  }
});