nuxt2使用cesium

配置文件

import CopyWebpackPlugin from "copy-webpack-plugin";
import { DefinePlugin } from "webpack";
import path from "path";

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "testNuxt2Cesium",
    htmlAttrs: {
      lang: "ch",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["cesium"],
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(
              __dirname,
              "node_modules/cesium/Build/Cesium/Workers"
            ),
            to: "./Cesium/Workers",
          },
          {
            from: path.join(
              __dirname,
              "node_modules/cesium/Build/Cesium/ThirdParty"
            ),
            to: "./Cesium/ThirdParty",
          },
          {
            from: path.join(
              __dirname,
              "node_modules/cesium/Build/Cesium/Assets"
            ),
            to: "./Cesium/Assets",
          },
          {
            from: path.join(
              __dirname,
              "node_modules/cesium/Build/Cesium/Widgets"
            ),
            to: "./Cesium/Widgets",
          },
        ],
      }),
      new DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify("./_nuxt/Cesium/"),
      }),
    ],
    extend(config) {
      //#region 解决 Webpack4 打包 CesiumWorker 的问题
      config.module.rules.push({
        test: /\.js$/,
        use: { loader: require.resolve("@open-wc/webpack-import-meta-loader") },
      });
      //#endregion

      //#region 解决 Webpack 打包 Cesium 在控制台报警告的问题
      config.module["unknownContextRegExp"] = /^('|')\.\/.*?\1$/;
      config.module["unknownContextCritical"] = false;
      config.amd = {
        ...config.amd,
        toUrlUndefined: true,
      };
      //#endregion
    },
  },
};

cesium初始化

<template>
  <div id="map" ref="sceneRef" style="width: 100%;height: 100%;">

  </div>
</template>

<script>
import { Viewer, ArcGisMapServerImageryProvider, BingMapsStyle, BingMapsImageryProvider, WebMapTileServiceImageryProvider } from "cesium";
import '../node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css'
export default {
  name: 'IndexPage',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const that = this
      const refDiv = that.$refs.sceneRef;
      const viewer = new Viewer(refDiv, {
        animation: false,

      })

      viewer.imageryLayers.addImageryProvider(new WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=540466cbf895a7d4836ca8a8d3a26bbe`,
        layer: "img",
        style: "default",
        tileMatrixSetID: "w",
        format: "tiles",
        maximumLevel: 18
      }));
    }
  }
}
</script>