脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue2中配置Cesium

Vue2中配置Cesium全过程

 更新时间：2023年05月19日 10:16:47   作者：愿为浪漫渡此劫  
这篇文章主要介绍了Vue2中配置Cesium全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

基于Vue2配置Cesium

本文是关于基于Vue2，对Cesium，进行在线使用和离线（内网）使用配置

一、安装Cesium依赖

npm i Cesium

二、在线Cesimu配置（在vue.config.js文件中进行如下配置）

const path = require("path");
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 = {
  // 基本路径
  // publicPath: "./portal", // 打包
  publicPath: "./",
  runtimeCompiler: true,
  // 输出文件目录
  outputDir: "dist",
  configureWebpack: {
    output: {
      sourcePrefix: "", // 1 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: {
      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: [
      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({
        CESIUM_BASE_URL: JSON.stringify("./"),  // 本地
        //CESIUM_BASE_URL: JSON.stringify("./portal"),  // 打包后
      }),
    ],
    // 导致打包出现length undefined
    // // webpack在cesium中能友好的使用import.meta 
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
      ],
    }
  },
  assetsDir: "assets",
  filenameHashing: false,
  lintOnSave: process.env.NODE_ENV !== "production",
  // lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    proxy: {
      "/pre": {
        target: "http://192.168.102.54:8733/",
        changeOrigin: true, 
        pathRewrite: {
          "^/pre": "",
        },
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目录文件
      },
    },
  },
};

三、离线Cesium配置

1、将Cesium资源文件夹

放在public/libs/Cesium，如图所示

这个Cesium文件夹来源于，node-modules下的，如图所示

2、单页面 public/index.html引入

<script src="./libs/Cesium/Cesium.js" type="text/javascript"></script>

3、vue.config.js 如下配置

const path = require("path");
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 = {
  // 基本路径
  // publicPath: "./portal", // 打包
  publicPath: "./",
  runtimeCompiler: true,
  // 输出文件目录
  outputDir: "dist",
  configureWebpack: {
    output: {
      sourcePrefix: "", // 1 让webpack 正确处理多行字符串配置 amd参数
    },
    amd: {
      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: [
      new CopyWebpackPlugin([
        {
          from: 'node_modules/cesium/Build/Cesium',
          to: 'libs/Cesium',
          filter: (resourcePath) => {
            if (/cesium[\\/]Build[\\/]Cesium[\\/]Cesium.js$/.test(resourcePath)) {
              return false;
            } else if (/cesium[\\/]Build[\\/]Cesium[\\/]Cesium.d.ts$/.test(resourcePath)) {
              return false;
            }
            return true;
          },
        },
      ]),
      new webpack.DefinePlugin({
        // CESIUM_BASE_URL: JSON.stringify("./"),  // 本地
        CESIUM_BASE_URL: JSON.stringify('libs/Cesium'),
        //CESIUM_BASE_URL: JSON.stringify("./portal"),  // 打包后
      }),
    ],
    optimization : {
      splitChunks : {
        chunks : "all",
        cacheGroups : {
          cesium: {
            name: 'Cesium',
            priority: 30,
            test: /[\\/]node_modules[\\/]@smart[\\/]cesium[\\/]Build[\\/]Cesium[\\/]Cesium.js/
          },
        }
      }
    },
    // 导致打包出现length undefined
    // // webpack在cesium中能友好的使用import.meta 
    module: {
      rules: [
        {
          test: /\.js$/,
          use: {
            loader: "@open-wc/webpack-import-meta-loader",
          },
        },
      ],
    }
  },
  assetsDir: "assets",
  filenameHashing: false,
  lintOnSave: process.env.NODE_ENV !== "production",
  // lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    host: "0.0.0.0",
    port: 8080, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    proxy: {
      "/sso": {
        target: "http://192.168.102.194:8098/",
        changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          "^/sso": "", //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
        },
      },
      // 共享中心
      "/pre": {
        target: "http://192.168.102.54:8733/",   // zk
        // target: "http://192.168.102.43:8733/",   // s
        changeOrigin: true, 
        pathRewrite: {
          "^/pre": "", 
        },
      },
      "/zk": {
        target: "http://192.168.102.54:8736/",
        changeOrigin: true,
        pathRewrite: {
          "^/zk": "", 
        },
      },
      "/scene": {
        target: "http://192.168.102.43:8070/",
        changeOrigin: true, 
        pathRewrite: {
          "^/scene": "",
        },
      },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/css/theme.scss";`, // scss 的目录文件
      },
    },
  },
};

4、在Cesium初始化时

如下使用

 init() {
      const Cesium = this.cesium;
      this.highlightColor = Cesium.Color.GREEN.withAlpha(0.6);
      this.normalColor = Cesium.Color.YELLOW.withAlpha(0.6);
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        //先行禁止infoBox弹出
        selectionIndicator: false,
        infoBox: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        fullscreenButton: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fulllscreenButtond: false,
        vrButton: false,
        // 加载本地离线Cesium资源
        imageryProvider: new Cesium.TileMapServiceImageryProvider({
          url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII'),
        }),
      });
      this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3实现全局公共函数的完整方案(创建、挂载、引用、使用)

    Vue3实现全局公共函数的完整方案(创建、挂载、引用、使用)

    本文详细介绍了如何在Vue3项目中创建、挂载、引用和使用全局公共函数,包括标准目录结构、创建公共函数、全局注册、页面使用以及规范,通过本文,新手开发者可以快速搭建企业级规范工具库,需要的朋友可以参考下
    2026-03-03
  • Vue 3中的defineEmits()和defineProps()使用小结

    Vue 3中的defineEmits()和defineProps()使用小结

    defineProps()和defineEmits()是Vue 3中Composition API的重要组成部分,它们分别用于定义组件接收的属性和触发的事件,本文给大家介绍Vue 3中的defineEmits()和defineProps()解析,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • Vue前端高效分包指南

    Vue前端高效分包指南

    在 Vue 项目中,随着业务迭代,代码体积会像冬天的羽绒服一样越来越膨胀,如果不加以控制,单个体积过大的JS文件会导致页面加载缓慢、用户体验下降,甚至影响转化率,今天就带大家走进前端分包的奇妙世界,用实战经验告诉你如何优雅地拆分代码包,需要的朋友可以参考下
    2025-08-08
  • 公共Hooks封装文件下载useDownloadFile实例详解

    公共Hooks封装文件下载useDownloadFile实例详解

    这篇文章主要为大家介绍了公共Hooks封装文件下载useDownloadFile实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • vue watch自动检测数据变化实时渲染的方法

    vue watch自动检测数据变化实时渲染的方法

    本篇文章主要介绍了vue watch自动检测数据变化实时渲染的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • vue-video-player视频播放器使用配置详解

    vue-video-player视频播放器使用配置详解

    这篇文章主要为大家详细介绍了vue-video-player视频播放器的使用和配置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • vue+elementui实现点击table中的单元格触发事件--弹框

    vue+elementui实现点击table中的单元格触发事件--弹框

    这篇文章主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue利用AJAX请求获取XML文件数据的操作方法

    Vue利用AJAX请求获取XML文件数据的操作方法

    在现代Web开发中,从前端框架到后端API的交互是必不可少的一部分,Vue.js作为一个轻量级且功能强大的前端框架,支持多种方式与服务器通信,从而获取或发送数据,本文将详细介绍如何在Vue.js项目中使用AJAX请求来获取XML格式的数据,需要的朋友可以参考下
    2024-09-09
  • 详解在vue开发中如何利用.env文件

    详解在vue开发中如何利用.env文件

    我们在 vue 项目的目录中经常看到 env 开头的文件,在文件内声明一些变量,这些变量就是一些配置变量,在不同环境下可使用的变量,本文我们将给大家介绍在vue开发中如何利用.env文件,需要的朋友可以参考下
    2023-10-10
  • Vue3中v-model双向绑定的避坑指南(2026最新)

    Vue3中v-model双向绑定的避坑指南(2026最新)

    这篇文章主要为大家详细介绍了Vue3中v-model双向绑定的正确用法和避坑指南,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2026-04-04

最新评论