解决 mars3d__WEBPACK_IMPORTED_MODULE_5__.graphic.Satellite is not a constructor 报错

前言
前几天使用 mars3d.graphic.Satellite 绘制卫星轨道及模型一直出现 mars3d__WEBPACK_IMPORTED_MODULE_5__.graphic.Satellite is not a constructor 报错,折腾了一天终于解决了,记录一下供其他小伙伴参考。

使用

查看api文档,Satellite与其它api使用不同的是需要引入 mars3d-space 插件库。
在这里插入图片描述
由于项目是断网环境,项目原先使用的下载离线包后在本地项目中引入相对路径资源来使用mars3d。在此基础上在index.html中引入mars3d-space如下:

<link href="./libs/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="./libs/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript"></script>
<link href="./libs/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./libs/mars3d/dist/mars3d.js" type="text/javascript"></script>
<script src="./libs/mars3d-space/dist/mars3d-space.js" type="text/javascript"></script>

js代码(部分):

import * as mars3d from "mars3d";

let graphicLayer = new mars3d.layer.GraphicLayer();
this.map.addLayer(graphicLayer);
const weixin = new mars3d.graphic.Satellite({
  // TLE数据以...代替
  tle1: "...",
  tle2: " ..."
});
graphicLayer.addGraphic(weixin);

运行之后报错:
在这里插入图片描述

解决

尝试

1.在网上查了一遍,把mars3d类似报错的解决方法都试了试,但是关于这个问题的博客还是比较少,其中有在vue.config.js中添加一大段配置代码的,试过之后也没解决我这个问题。
2.在官方教程的常见问题中发现类似错误(如下图),原因3应该不存在,原因2自认为没问题,那就只有原因1了,结果在外网把所有资源更新了还是报错。于是考虑原因2引入方式有问题,点击下方对应的解决方法打开引入教程看了一遍还是没发现哪有问题。
在这里插入图片描述

在这里插入图片描述
3.查看官方示例代码,仍未发现有何问题。
在这里插入图片描述

最终解决

看到下方另一种引入方式
在这里插入图片描述
再瞅瞅自己的代码,vue文件里的这行代码引起了我的注意:
在这里插入图片描述
Satellite is not a constructor,说明当前引入的这个mars3d下没有Satellite这个构造方法?在index.html中已经有了资源引入为什么这里还用了npm的import方式引入mars3d?这里引用了node_modules下的mars3d导致mars3d-space 插件未生效?(之前由于使用其它api并未出问题,因此没考虑过这行代码有什么问题)。
死马当活马医,把这行代码注释了,eslint报mars3d未定义的错,于是在eslintrc.js中加上:

globals: {
  mars3d: false
}

不报错了!!!卫星轨道也出现了!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值