当前位置: 首页 > 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…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...