前言
前几天使用 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
}
不报错了!!!卫星轨道也出现了!