当前位置: 首页 > news >正文

使用vue3+cesium+earthsdk+supermap实现通视分析(有版本报错问题)

main.js:

这个文件是项目的入口文件,主要进行了以下操作:

  • 使用Vue 3createApp创建应用实例。
  • 加载了element-plus UI 组件库。
  • 加载了routerstore,以及axios用于发送HTTP请求。
  • @turf/turf和自定义的bus.js注册到全局属性中,便于在组件中使用。

环境配置需求:

你需要安装以下依赖环境:

  1. Node.js: 版本为18.18.2
  2. npm: 版本为9.6.7
  3. Webpack: 版本为4.47,但是vue-cli会自动管理它。
  4. 其他通过npm install自动安装的依赖项。
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
import * as turf from '@turf/turf'
import * as bus from './bus.js'// import "cesium/Widgets/widgets.css";
// import * as Cesium from "cesium/Cesium";
// global.Cesium = Cesium;const app = createApp(App);
app.use(ElementPlus);
// app.use(store).use(router).mount('#app')
app.use(store).use(router).use(VueAxios, axios).mount('#app')
app.config.globalProperties.$turf = turf;
app.config.globalProperties.$bus = bus;

vue.config.js:、

这个文件主要用于配置Webpack的打包和开发服务器设置:

  • publicPath: 指定了项目的根路径为/cesium2.0_test,可能会影响到项目的部署。
  • devServer: 配置了开发服务器端口为8081。
  • configureWebpack:
    • source-map: 这个设置便于开发调试代码,在生产环境中应该用none来提升性能。
    • resolve.alias: 使用@代表src文件夹,简化导入路径。
    • externals: 将很多外部库(如Cesium、xbsj-renderer、xbsj-xe2等)设为外部依赖,减少打包体积。
    • plugins: 使用CopyWebpackPlugin将一些依赖包复制到指定位置,主要是xbsj和esobjs插件的Web资源。
    • module.rules: 加载js文件时使用@open-wc/webpack-import-meta-loader,支持import.meta语法。
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')const debug = process.env.NODE_ENV !== 'production'
module.exports = {publicPath:"/cesium2.0_test",devServer: {port: 8081 //修改服务端口号},outputDir: 'cesium2.0_test', //设置 build 输出目录configureWebpack: {devtool:'source-map',//浏览器里调试代码 'source-map',部署用'none'output: {sourcePrefix: ' '},amd: {toUrlUndefined: true},resolve: {alias: {'@': path.resolve('src'),}},externals: {     // @cesiumcesium: 'Cesium', // xr-utils中有cesium相关的函数// @xbsj-renderer'xbsj-renderer/dist-node/xr-base-utils': 'xbsj["xr-base-utils"]','xbsj-renderer/dist-node/xr-math': 'xbsj["xr-math"]','xbsj-renderer/dist-node/xr-utils': 'xbsj["xr-utils"]','xbsj-renderer/dist-node/xr-cesium': 'xbsj["xr-cesium"]',// @xbsj-xe2'xbsj-xe2/dist-node/xe2': 'XE2["xe2"]','xbsj-xe2/dist-node/xe2-base': 'XE2["xe2-base"]','xbsj-xe2/dist-node/xe2-base-utils': 'XE2["xe2-base-utils"]','xbsj-xe2/dist-node/xe2-utils': 'XE2["xe2-utils"]','xbsj-xe2/dist-node/xe2-cesium': 'XE2["xe2-cesium"]','xbsj-xe2/dist-node/xe2-mapbox': 'XE2["xe2-mapbox"]','xbsj-xe2/dist-node/xe2-ue': 'XE2["xe2-ue"]','xbsj-xe2/dist-node/utility-xe2-plugin': 'XE2["utility-xe2-plugin"]','xbsj-xe2/dist-node/xe2-all-in-one': 'XE2["xe2-all-in-one"]','xbsj-xe2/dist-node/xe2-base-objects': 'XE2["xe2-base-objects"]','xbsj-xe2/dist-node/xe2-objects': 'XE2["xe2-objects"]','xbsj-xe2/dist-node/xe2-cesium-objects': 'XE2["xe2-cesium-objects"]','xbsj-xe2/dist-node/xe2-ue-objects': 'XE2["xe2-ue-objects"]','xbsj-xe2/dist-node/xe2-openlayers': 'XE2["xe2-openlayers"]','xbsj-xe2/dist-node/xe2-openlayers-objects': 'XE2["xe2-openlayers-objects"]',// plugins'smplotting-xe2-plugin/dist-node/smplotting-xe2-plugin': 'XE2["smplotting-xe2-plugin"]','smplotting-xe2-plugin/dist-node/smplotting-xe2-plugin-main': 'XE2["smplotting-xe2-plugin-main"]','esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin': 'XE2["esobjs-xe2-plugin"]','esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main': 'XE2["esobjs-xe2-plugin-main"]',},plugins: [new CopyWebpackPlugin([{from: './node_modules/xbsj-xe2/dist-web',to: 'js/xbsj-xe2/dist-web',toType: 'dir'},{from: './node_modules/xbsj-xe2-assets/dist-web',to: 'js/xbsj-xe2-assets/dist-web',toType: 'dir'},{from: './node_modules/smplotting-xe2-plugin/dist-web',to: 'js/smplotting-xe2-plugin/dist-web',toType: 'dir'},{from: './node_modules/esobjs-xe2-plugin/dist-web',
http://www.lryc.cn/news/470089.html

相关文章:

  • python 轮子是什么
  • 农作物大豆病虫害识别分类数据集(猫脸码客第227期)
  • 如何在算家云搭建GPT-SOVITS(语音转换)
  • ThinkPad T480拆机屏幕改装:便携式显示器DIY指南
  • C++ (8) C++11及更新特性:探索魔法新领域
  • 【vue】Mammoth.js的使用:将.docx和doc 文件转换成HTML
  • HarmonyOS介绍 第一课习题答案
  • c/c++ stdcall cdel fastcall等函数调用约定说明
  • 【ROS概述】概念及环境搭建
  • MongoDB Shell 基本命令(三)生成学生脚本信息和简单查询
  • java核心技术点都有哪些
  • 4404 - 提高:二分与三分:曲线(三分)
  • 软件工程--需求分析与用例模型
  • 预测房价学习
  • 电脑无法上网,但是微信、QQ可以正常使用
  • C++11新特性(列表初始化与右值引用折叠与完美转发)
  • 基于SSH的物流运输货运车辆管理系统源码
  • 基于RabbitMQ,Redis,Redisson,RocketMQ四种技术实现订单延时关闭功能及其相关优缺点介绍(以12306为主题)
  • HarmonyOS ArkTS与C++数据类型转换
  • 腾讯云或阿里云centos7安装Redis,并解决端口无法访问的问题
  • 【小问题】距离估计和频率估计的方差下界推导出距离估计的方差下界
  • Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
  • Z-BlogPHP显示错误Undefined array key 0 (set_error_handler)的解决办法
  • java-实例化一个List,然后添加数据的方法详解
  • 【Linux系统】Ubuntu的简单操作
  • 标准日志插件项目【C/C++】
  • SpingBoot原理
  • Cout输出应用举例
  • java的无锁编程和锁机制
  • vue实现富文本编辑器上传(粘贴)图片 + 文字