第三天 ：打开第一个页面

创建一个vue项目

安装cesium

    npm i cesium --save

vue.config.js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
 
const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
const cesiumSource = "./node_modules/cesium/Source";
 
function resolve(dir) {
  return path.join(__dirname, dir);
}
 
module.exports = {
  devServer: {
    port: 8080,
    open: true,
    proxy: {
      //配置代理服务器来解决跨域问题
      "/api": {
        target: "http://localhost:80/api/", //配置要替换的后台接口地址
        changOrigin: true, //配置允许改变Origin
        pathRewrite: {
          "^/api/": "/",
        },
      },
    },
  },
  lintOnSave: false,
  configureWebpack: {
    output: {
      sourcePrefix: " ", // 1 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: {
      // 2
      toUrlUndefined: true, // webpack在cesium中能友好的使用require
    },
    resolve: {
      extensions: [".js", ".vue", ".json"],
      alias: {
        //'vue$': 'vue/dist/vue.esm.js',
        "@": path.resolve("src"),
        components: path.resolve("src/components"),
        assets: path.resolve("src/assets"),
        views: path.resolve("src/views"),
        cesium: path.resolve(__dirname, cesiumSource),
      },
    },
    plugins: [
      // 4
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Workers"), to: "Workers" },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Assets"), to: "Assets" },
      ]),
      new CopyWebpackPlugin([
        { from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
      ]),
      new CopyWebpackPlugin([
        {
          from: path.join(cesiumSource, "ThirdParty/Workers"),
          to: "ThirdParty/Workers",
        },
      ]),
      new webpack.DefinePlugin({
        // 5
        CESIUM_BASE_URL: JSON.stringify("./"),
      }),
    ],
    module: {
        unknownContextCritical:false,  
      rules: [
        {
          test: /\.js$/,
          include: path.resolve(__dirname, 'node_modules/cesium/Source'), // 重点,打包使用
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
        {
          test: /\.(glb|gltf)?$/,
          use: {
            loader: "url-loader",
          },
        },
      ],
    },
  },
};

安装loader

此时会报错 Failed to resolve loader: @open-wc/webpack-import-meta-loader

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

组件内引用打开一个纯净版本加载天地图的地球

<template>
  <div id="container"></div>
</template>
<script>
import * as Cesium from "cesium/Cesium";
import * as widgets from "cesium/Widgets/widgets.css";
export default {
  name: "HelloCesium",
  mounted() {
    const viewer = new Cesium.Viewer('container', {
    // terrainProvider: Cesium.createWorldTerrain(),
    selectionIndicator: false,
    infoBox: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    animation: false,
    shouldAnimate: true,
    //imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        //影像底图此处为天地图
        //url: "http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=tk",
        //subdomains: ['0','1','2','3','4','5','6','7'],
        //layer: "tdtImgLayer",
        //style: "default",
        //format: "image/jpeg",
        //tileMatrixSetID: "GoogleMapsCompatible",//使用谷歌的瓦片切片方式
        //show: true
        })
      // 这里先使用高德影像地形地图
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
    }),
 })
    
    //隐藏版权控件
    viewer._cesiumWidget.creditContainer.style.display = "none"
    
    // 再加上高德影像注记地图
    this.viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
        url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
        })
    );
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>

配置 unknownContextCritical:false,

此时会警告 warning in ./node_modules/cesium/Source/Core/buildModuleUrl.js Critical dependency: require function is used in a way in which dependencies cannot be statically extracted 关键依赖关系:require函数的使用方式不能静态提取依赖关系

   在rules前加 unknownContextCritical:false, 然后重新运行项目，此时就可以打开了

一个新的错误

今天在之前的项目中引入时发现需要将new CopyWebpackPlugin修改为下可以运行，可能是版本原因，暂不清楚

   new CopyWebpackPlugin({
    patterns:[
      {
        from: path.join(cesiumSource, "ThirdParty/Workers"),
        to: "ThirdParty/Workers",
      },
    ]
  }),