Question

main.js

//引入element-plus
import ElementPlus from "element-plus"
import "element-plus/theme-chalk/index.css"
app.use(ElementPlus)
//引入webgl3d组件包
import webgl3d from "@supermap/iclient3d-vue-for-webgl"
app.use(webgl3d)

index.html

<link href="./index.css" rel="stylesheet">
<link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="./Cesium/Cesium.js"></script>

.vue

<sm3d-viewer class="map-container"
             scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace">
</sm3d-viewer>

这么使用之后，三维球没有显示处理，似乎是组件没有注册成功，应该怎么引入supermap/iclient3d-vue-for-webgl组件呢？以下是浏览器控制台的警告

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement

[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) 
  at <Sm3dViewer class="map-container" scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace" > 
  at <App>

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <Sm3dViewer class="map-container" scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace" > 
  at <App>

Answer 1

您好，该组件的具体使用方法您可以查看我们的官方博客：https://blog.csdn.net/supermapsupport/article/details/123850171

或者是官方的APIhttps://www.supermapol.com/earth/vue-iEarth/examples/docs/dist/zh/api/guide/installation.html

如果正常的话，建议检查onload方法是否调用，如果没有调用是不会有球体的

Comments

官方的APIhttps://www.supermapol.com/earth/vue-iEarth/examples/docs/dist/zh/api/guide/installation.html

这个网站我看也没有调用inload方法啊。在哪儿调用呢

---

我使用的是vue3版本

---

官方的API只是告诉您怎么去安装引入，用的就是vue3.0的版本。

您确定您的安装步骤和过程没有问题了再去检查代码的问题。

至于onload的方法就是函数整体名命名为onload，使代码在页面加载的时候就会运行。

---

https://www.bilibili.com/video/BV1uZ4y1r7jv?p=4&spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=bb9a6f591593341c6571eb10586a5ffb

这里的教程跟API文档一样，安装并引入就直接能使用组件了，没看到onload啊

---

可以正常安装并引入使用即可。

---

你刚刚说的是SuperMap iClient3D for WebGL这种方式吧，我使用的是SuperMap_iClient3D_VUE_for_WebGL，已经安装了也引入了还是出现最初的警告，没有三维球

---

对了我是vue3.2，是不是这个问题导致的呢

---

vue3的话您看一下博客https://blog.csdn.net/supermapsupport/article/details/103312833

按照博客里面的代码去显示球体看能否成功

Answer 2

大佬，我和你一样的，解决了吗

Answer 3

同样的问题耶，还没解决