SuperMap_iClient3D_VUE_for_WebGL

本章节将介绍如何在项目中使用，使用前请先确认是否安装过npm，没有安装请先参考安装章节。

1、准备依赖资源

  • 组件依赖的cesium包需要在index.html里面引入：

在node_module里找到组件包，public文件里有需要的资源，可以复制到工程目录下的public文件夹中，然后引入cesium等资源文件，参考如下（以下由vite2新建工程为例）：

2、引入依赖资源

在 index.html 中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="Cesium/Cesium.js" ></script>
  <title>webgl3d</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script src="js/echarts.min.js" async></script>  
  <script src="js/axios.min.js" ></script>
</body>
</html>

3、引入 Vue-iClient3D-WebGL

在 main.js 中：

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
 
// 引入ui依赖
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
app.use(ElementPlus)

 
// 引入webgl3d组件包
import '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css' 
import webgl3d from "@supermap/iclient3d-vue-for-webgl"
app.use(webgl3d)  
app.mount('#app')

注意

引入css遇到未知字符错误难以解决时，可以复制出lib下theme文件夹，然后在index.html里引入。 <link href="public/theme/index.css" rel="stylesheet">

以上代码便完成了 Vue-iClient3D-WebGL 的引入。

4、使用测试

在App.vue里测试代码:

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

最后更新时间: