当前位置: 首页 > 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',

相关文章:

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

main.js: 这个文件是项目的入口文件,主要进行了以下操作: 使用Vue 3的createApp创建应用实例。加载了element-plus UI 组件库。加载了router和store,以及axios用于发送HTTP请求。将@turf/turf和自定义的bus.js注册到全局属性中,便于在组件中使用。环境配置需求: 你需要安…...

python 轮子是什么

此一词语的由来是因为轮子由人类所发明,且在各方面都带来许多便利。既然轮子已被发明,而且在使用上没有什么缺陷,重新再发明一次轮子是没有意义的,只是浪费时间,分散研究者的资源,使其无法投入更有意义及价…...

农作物大豆病虫害识别分类数据集(猫脸码客第227期)

农作物大豆病虫害识别分类数据集 大豆,作为全球重要的粮食作物之一,不仅承载着人类饮食中的重要角色,还深刻影响着农业经济的发展。然而,大豆的生长过程中,常常面临着来自病害和虫害的双重威胁。这些病虫害不仅会影响…...

如何在算家云搭建GPT-SOVITS(语音转换)

一、模型介绍 GPT-SOVITS是一款强大的小样本语音转换和文本转语音 WebUI工具。它集成了声音伴奏分离、自动训练集分割、中文ASR和文本标注等辅助工具。 具有以下特征: 零样本 TTS: 输入 5 秒的声音样本并体验即时文本到语音的转换。少量样本 TTS&…...

ThinkPad T480拆机屏幕改装:便携式显示器DIY指南

ThinkPad T480拆机屏幕改装:便携式显示器DIY指南 本文记录了将旧笔记本电脑 T480 拆机屏幕改装为便携式显示器的全过程。作者在决定升级设备后,选择通过 DIY 方式利用原有的屏幕资源。文章详细介绍了屏幕驱动板的安装、螺丝孔的剪裁、排线连接及固定的步…...

C++ (8) C++11及更新特性:探索魔法新领域

C11及更新特性:探索魔法新领域 随着C语言的不断进化,C11及其后续版本带来了许多激动人心的新特性,它们就像是魔法世界中新发现的领域,充满了无限的可能性。这些新特性不仅提高了编程的效率和灵活性,还为程序员提供了更…...

【vue】Mammoth.js的使用:将.docx和doc 文件转换成HTML

mammoth.convertToHtml(input, options) :把源文档转换为 HTML 文档 mammoth.convertToMarkdown(input, options) :把源文档转换为 Markdown 文档。 mammoth.extractRawText(input) :提取文档的原始文本。这将忽略文档中的所有格式…...

HarmonyOS介绍 第一课习题答案

一、判断题 1. “一次开发,多端部署”指的是一个工程,一次开发上架,多端按需部署。为了实现这一目的,HarmonyOS提供了多端开发环境,多端开发能力以及多端分发机制。 正确(True)错误(False) 正确(True)回答正确 2. 《鸿蒙生态应用开发白皮书》全面阐释了鸿蒙生态下应…...

c/c++ stdcall cdel fastcall等函数调用约定说明

调用约定(Calling Conventions)是编程中定义函数如何接收参数、返回值以及如何管理堆栈的协议。主要的调用约定包括 __cdecl、__stdcall、__fastcall 和 __thiscall 等。下面将详细介绍这些调用约定的特点及其适用场景。 1. __cdecl 调用约定 定义&…...

【ROS概述】概念及环境搭建

学习途径: 教程:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 课程视频:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 机器人体系 要完全实现一个机器人的系统研发,几乎是“全栈”开发,…...

MongoDB Shell 基本命令(三)生成学生脚本信息和简单查询

一、生成学生信息脚本 利用该脚本可以生成任意个学生信息,包括学号、姓名、班级、年级、专业、课程名称、课程成绩等信息,此处生成2万名学生,学生所有信息都是给定范围后随机生成。 生成学生信息后,再来对学生信息进行简单查询。…...

java核心技术点都有哪些

1. 面向对象编程(OOP) 核心概念:类、对象、继承、封装、多态。 比喻:面向对象编程就像是在搭建一个积木城堡。类(Class)是城堡的设计图纸,它定义了城堡的结构和功能;对象&#xff08…...

4404 - 提高:二分与三分:曲线(三分)

明明做作业的时候遇到了n个二次函数Si(x)=ax22+bx+c,他突发奇想设计了一个新的函数F(x)=max(Si(x)), i=1,2...n。 明明现在想求这个函数在[0,10000]的最小值,要求精确到小数点后四位四舍五入。 输入 输入包含T 组数据 (T<10) ,每组第一行一个整数 n(n≤10000) ,之后n行…...

软件工程--需求分析与用例模型

面向对象分析(ObjectOrientedAnalysis&#xff0c;简称OOA) 分析和理解问题域&#xff0c;找出描述问题域所需的类和对象&#xff0c;分析它们的内部构成和外部关系&#xff0c;建立独立于实现的OOA模型&#xff0c;暂时忽略与系统实现有关的问题。 主要使用UML中的以下几种图…...

预测房价学习

1. 实现函数来方便下载数据 import hashlib import os import tarfile import zipfile import requestsDATA_HUB dict() DATA_URL http://d2l-data.s3-accelerate.amazonaws.com/def download(name, cache_diros.path.join(.., data)):"""下载一个DATA_HUB中…...

电脑无法上网,但是微信、QQ可以正常使用

这种情况一般是由于DNS服务器配置错误&#xff0c;或者已有的DNS服务器无法正常解析地址造成的。 按下winR打开运行&#xff0c;输入ncpa.cpl&#xff0c;点击确定。 在打开的网络连接窗口中找到对应的网卡&#xff0c;双击打开。一般有线网是“以太网”&#xff0c;无线网&am…...

C++11新特性(列表初始化与右值引用折叠与完美转发)

c11 列表初始化c98的{}c11的{}std::initializer_list 右值引用和移动语义左值和右值的概念左值引用和右值引用引用延长临时对象生命周期左值和右值的参数匹配左值引用的主要使用场景移动构造和移动赋值引用折叠完美转发 列表初始化 c98的{} 在C98中&#xff0c;大括号 {} 的使…...

基于SSH的物流运输货运车辆管理系统源码

基于经典的ssh&#xff08;Spring Spring MVC Hibernate&#xff09;框架与SaaS&#xff08;软件即服务&#xff09;模式&#xff0c;我们为运输企业与物流公司打造了一款开源且易用的车辆管理系统。 该系统主要包含以下核心模块&#xff1a; 档案管理 财务管理 借款管理 保…...

基于RabbitMQ,Redis,Redisson,RocketMQ四种技术实现订单延时关闭功能及其相关优缺点介绍(以12306为主题)

目录 1. 延迟关闭订单 1.1 订单延时关闭功能技术选型 1.1.1 定时任务 1.1.2 RabbitMQ 1.1.3 Redis 过期监听 1.1.4 Redisson 1.1.5 RocketMQ 1.2 RocketMQ订单延时关闭发送方实现 1.3 RocketMQ订单延时关闭的消费方实现 1. 延迟关闭订单 用户发起订单后&#xff0c;如…...

HarmonyOS ArkTS与C++数据类型转换

1. HarmonyOS ArkTS与C数据类型转换 本文介绍了C与TS各自数据类型与互相之间的数据类型转换&#xff0c;在需要使用C模块时可以快速上手对各种数据类型进行转换。 1.1. 概述 HarmonyOS的主力开发语言是ArkTS&#xff0c;也提供了C语言的支持&#xff0c;对于一些能力&#xff…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...