32 mars3d 官方 demo 可以跑起来, 但是自己拷贝的 demo 跑不起来

前言

这个问题是 同事碰到的一个问题 

主要的影响因素在于 官方的 demo 从 mars3d-cesium 中暴露了一部分文件作为 http 服务, 然后 我们自己的 case 里面没有这部分服务, 然后 导致 js 访问不到 

以及 大部分的 css, js, img 等等 静态资源 访问不到 


 

Cesium is not defined 的问题定位 

项目启动之后 console 报错如下

fcc3e0dec65e42faba71b301bfc00a85.png

 

首先是比较一下 demo 代码的调整

主要是比较 HelloWorld.vue 和 map.vue 和 vue.config.js 和 package.json

比较结果为, HelloWorld.vue 和 map.vue 无明显的感动, 仅仅是 codestyle 的差异

vue.config.js 仅仅是注释掉了 devServer 的配置  

package.json 仅仅是注释掉了一些元数据信息

14212af663e7451caa15c7dad1248f13.png

 

 

重新安装依赖

这种 not defined 另外一种可能是 安装的依赖存在问题, 因此 删除 node_modules 之后重新 npm install

然后 重新启动项目, 发现问题 依然存在

 

 

确定报错的位置

因为从 报错的堆栈信息中, 我们无法确认具体 是因为什么报错

因此 我们来进行一个简单的排除法 来定位是哪里 引起的 mars3d 的库函数的报错

注释 mars3d 的相关依赖, 以及使用的地方, 直到 页面可以正常使用

a3dd2554be354123a6561a17830c2d62.png

 

正常页面如下

104b3521ed034520b9a573c83b0e6451.png

 

然后发现 只要是有 “import * as mars3d from "mars3d";”相关 页面就会报错

47d96895fb5d42e0981923db62ac8508.png

 

 

根据 mars3d 检索所有的 .vue, .js 判断问题

.vue 中如下, 可以看到 仅仅是 HelloWorld.vue 和 map.vue 这两个业务模块中有使用

其他的诸如 App.vue 等等 vue 的基础代码中没有 mars3d 的使用

因此 我们可以不管 .vue

8f0cceee24004a5aa4db27a8af2c43f8.png

 

再来看一下 .js

可以看到, 只有 vue.config.js 中有 mars3d 的关键字, 然后 我们来查看一下 详细的代码

977e2f01a61c48258df191547569d4a5.png

 

这块代码如下, 先只看注释 else 排除使用 mars3d-cesium

然后 我们这里缺少的就是 Cesium

然后 对比正常的 demo 项目 mars3d-vue2

e9b0239ac2e64188bb46aa523d614cc2.png

 

 

然后搜索一下 “VUE_APP_MARS3D_SOURCE”, 可以看到 mars3d-vue2 中是有 “VUE_APP_MARS3D_SOURCE=module” 的配置的

然后将 .env 拷贝到 mars3d_test, 之后 重启项目

VUE_APP_MARS3D_SOURCE 的作用可以参考这块的 README.md

ca6cb1e8d9414e03a6e1f39d5049eba2.png

 

更新 .env 增加环境变量如下, 然后 启动项目

2410e4818b5e4464a30bd42bb71391ac.png

 

可以发现是 大部分功能是正常了, 但是 貌似还存在一些小问题

可能是 样式问题 或者 js加载异常导致的样式问题

8c3e9ad8e9ff4fa38b0ae713f09dfeb9.png

 

 

根据 VUE_APP_MARS3D_SOURCE 的备注探讨其他的解决方式

其实产生 这个问题的原因是在 README.md 的 第三章节

三种导入 mars3d-cesium 库的方式, 第一种就是 mars3d-vue2 的方式, 只是我们这里 未加环境变量为 ”--dev” 的配置

第二种是直接通过 css,js 导入, 直接在 public/index.html 下面添加 css, js 的依赖

第三种是基于当前 项目提供 css, js 的服务

556278995a464d6b8e33d379e663da06.png

 

 

在 public/index.html 中直接导入 css/js

5b97a905c1f64224ac946dcdd50528ce.png

 

然后 效果如下, 可以看到 也没有上面的 样式错乱问题了

00bc9334ccea4a44822233895ab64dbe.png

 

 

下载官方 sdk 放在 public 下面由本项目提供这部分的 js/css/img 的服务

调整如下, 拷贝相关资源, 更新 index.html 

更新 VUE_APP_MARS3D_SOURCE 为 local 

fbcf629599bf45ddb542e8741e6c9135.png

 

然后启动项目情况如下 

d259fff5c4de4e37818522b3fae0b329.png

 

 

存在的样式问题的调试排查

上面问题解决了之后, 我这边还会出现一个样式问题如下

4c444870cd6f479ab0ec364a39654958.png

 

这个问题的排查方式如下, 一般要么就是 js, 要么就是 css 的问题

找一个存在问题的元素, 来查看 相关 listener, style, 比如我这里 是以左下角的一个 ”帮助切换按钮” 为例

 

 

js 这块的差异

先来看 js 这块, 正常的情况下 js 的回调如下

acdecc488f8f47069b441cb1ab9b3036.png

 

然后 我们再来看一下 异常的情况, 然后 确认一下 click 的回调是否一致

可以看到的事 二者的是一样的, 然后 我们再来 查看 css 这边

eb32feedd595403bb8b55cb1a2ce47cb.png

 

 

css 这块的差异

然后再来看 正常的这一边的 css

7cfcfaa04fb84a5d9ff2bb39a8d48582.png

 

异常的情况下的 css

可以看到 相比于正常情况是 缺少一部分 css 的, 然后 我们来项目中搜索一下 这部分的 css

b4fe77f73d5a4165ba6756418351b13a.png

 

 

以 “.cesium-navigation-button-right” 为例, 可以找到如下, 前者是该 vue组件 的 css, 后者是 build 生成的 css, 我们应该使用的是后者

8870deac028e467dbbc2b73052366c28.png

 

这个 css 是在这里处理的, 可能因为 某些原因 编译, 没有吧这个 css 编译进去

cc7b2d79baf24b018c7763e08feffb01.png

 

具体的原因 我们先不探究, 先解决问题, 我们的 map.vue 会引用 “/Users/jerry/WebstormProjects/mars3d_test/node_modules/mars3d/dist/mars3d.css”

我们先将目标 css 复制进去, 然后 重新启动项目 看一下 效果

19179daf70214b6da6057b007a6a7f19.png

 

 

现在 页面正常了

14e8ea7796e04066806a74739ae4b4a3.png

 

 

完 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768081.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【云开发笔记No.11】再说Git

GIT的简介: Git是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。它是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。与传统的集中式版本控制系统(如SVN)不同…

11.创建后台系统项目

后台系统项目 兼容性 vite官网:https://vitejs.dev/ vite中文网:https://cn.vitejs.dev/ vite需要node.js版本 >14.0.0,建议16 node -v 查看版本号 创建项目 进入存放目录 执行命令 npm create vitelatest 选择vue框架 选择typescript…

苍穹外卖笔记

苍穹外卖 DAY01nginx反向代理MD5加密yapi进行接口导入Swagger介绍 DAY02新增员工需求分析和设计写相关代码测试(1. 后端文档测试 2. 前后端联调代码完善 员工分页查询DAY01 02涉及到的知识 DAY01 nginx反向代理 MD5加密 拓展:spring security jwt 提供了更强大灵…

C++ Builder XE关于sndPlaySound播放mp3的处理

#include <vcl.h>#include "mmsystem.h" //我的编译环境&#xff0c;必须放在这才有用&#xff0c;否则会弹出错&#xff0c;不知道什么原因 #pragma hdrstop void __fastcall TForm6::RzToolButton1Click(TObject *Sender) { RzToolButton1->Ima…

登录校验:JWT令牌、Filter、Interceptor

JWT&#xff1a; 全称&#xff1a;JSON Web Token 定义了一种简洁的、自包含的格式&#xff0c;用于在通信双方以json数据格式安全的传输信息&#xff0c;由于数字签名的存在&#xff0c;这些信息是可靠的。 组成&#xff1a; Header(头部)&#xff1a;&#xff08;“alg&q…

回溯、取模、日期计算

C回溯 文章目录 C回溯1、回溯常见模板2、取每位数的模3、回文日期 1、回溯常见模板 /*回溯法模板def func():if 满足条件:return resultfor range 选择列表:选择func()撤销选择 */ 代码示例&#xff1a;1.求1~n的全排列并打印出来。 #include<bits/stdc.h> using names…

银行5G短消息应用架构设计

&#xff08;一&#xff09;RCS简介 1.1 RCS的提出与标准制定 RCS(Rich Communication Services & Suite&#xff0c;富媒体通信)是GSMA(Groupe Speciale Mobile Association&#xff0c;全球移动通信系统协会)在2008年提出的一种通讯方式&#xff0c;RCS融合了语音、消息…

基于STM32的智能快递箱设计与实现

基于STM32的智能快递箱设计与实现 **摘要&#xff1a;**随着电子商务的飞速发展&#xff0c;快递业务日益繁荣&#xff0c;智能快递箱作为解决“最后一公里”配送难题的有效手段&#xff0c;受到了广泛关注。本文设计并实现了一款基于STM32微控制器的智能快递箱系统&#xff0…

springboot3+jdk17+MP整合最新版jersey详细案例,正真做到拿来即用

如题&#xff0c;springboot3.x java17 MP 整合最新jersey&#xff0c;各种请求类型&#xff08;实战/详解&#xff09; 文件上传下载 jersey资源注册 拦截器&#xff08;JWT&#xff09; 跨域处理 全局异常 Valid注解校验 等等 &#xff0c;除非你必须整合security&am…

SpringCloud Alibaba Nacos简单应用(二)

&#x1f600;前言 本篇博文是关于SpringCloud Alibaba Nacos简单应用&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的…

【spring】@Lazy注解学习

Lazy介绍 Lazy 注解是一个配置注解&#xff0c;用于指示 Spring 容器在创建 bean 时采用延迟初始化的策略。这意味着&#xff0c;除非 bean 被实际使用&#xff0c;否则不会被创建和初始化。 在 Spring 框架中&#xff0c;默认情况下&#xff0c;所有的单例 bean 在容器启动时…

【Linux】模拟实现shell(bash)

目录 常见的与shell互动场景 实现代码 全部代码 homepath()接口 const char *getUsername()接口 const char *getHostname()接口 const char *getCwd()接口 int getUserCommand(char *command, int num)接口 void commandSplit(char *in, char *out[])接口 int execut…

aurora仿真使用等

IP设置 代码 aurora_8b10b aurora_8b10b_inst (/**********************************************************************************///axi_stream tx.s_axi_tx_tdata(s_axi_tx_tdata), // input wire [0 : 31] s_axi_tx_tdata.s_axi_tx_tkeep(s_axi_tx_…

2024开年首展,加速科技展台“热辣滚烫”

3月20日&#xff0c;备受瞩目的半导体行业盛会SEMICON China 2024在上海新国际博览中心盛大启幕&#xff0c;展会汇集了来自全球的半导体领域顶尖企业与专业人士。加速科技作为业界领先的半导体测试设备供应商携重磅测试设备及解决方案精彩亮相&#xff0c;展示了最新的半导体测…

KIMI爆了!对比文心一言和通义千问它到底有多强?

原文:赵侠客 前言 最近国产大模型KIMI爆了大部分人应该都知道了&#xff0c;从我个人的感受来看这次KIMI爆了我不是从技术领域接触到的&#xff0c;而是从各种金融领域接触到的。目前国内大模型可以说是百模大战&#xff0c;前几年新能源大战&#xff0c;今年资本割完韭菜后留…

简述TCP的三次握手与四次挥手

A表示客户client&#xff0c;即主动发起连接的应用程序&#xff1b;B表示服务器&#xff0c;即被动等待连接建立的应用进程。 TCP建立连接&#xff0c;三报文握手&#xff0c;也可以是四报文握手。 总流程可以简化为&#xff1a;A向B发送连接请求&#xff0c;B向A确认&#xf…

JAVA学习-NIO.Files工具类

Java NIO&#xff08;New IO&#xff09;提供了一组用于处理文件和文件系统的工具类&#xff0c;其中包含了Files工具类。Files工具类提供了对文件和目录进行操作的静态方法&#xff0c;如创建、复制、删除、移动、重命名等等。以下是Files工具类的特点、常用方法以及与其他类的…

面试宝典:MySQL索引进阶深度分析

在数据库高级开发的面试中&#xff0c;索引是一个绕不开的重点话题。MySQL中的索引机制对于查询性能有着决定性的影响。本文将深入探讨MySQL索引的高级特性和优化策略&#xff0c;帮助开发者在面试中展现出对数据库索引机制的深刻理解和高级应用能力。 索引的基本概念 MySQL中…

Linux:Prometheus的源码包安装及操作(2)

环境介绍 三台centos 7系统&#xff0c;运行内存都2G 1.prometheus监控服务器&#xff1a;192.168.6.1 主机名&#xff1a;pm 2.grafana展示服务器:192.168.6.2 主机名&#xff1a;gr 3.被监控服务器&#xff1a;192.168.6.3 …

C++之循环中使用auto关键字

在C中&#xff0c;auto是一个类型说明符&#xff0c;用于自动推导变量的类型。编译器会根据初始化表达式的类型来自动推断变量的类型。使用auto可以使代码更加简洁&#xff0c;并减少手动键入类型信息的需要&#xff0c;尤其是在处理复杂类型或模板时。 在C中&#xff0c;使用…