SuperMap Vue-iClient3D-WebGL 使用指南_supermap/vue-iclient3d-webgl

作者：小小林熬夜学编程 | 2024-02-16 15:57:04

踩

supermap/vue-iclient3d-webgl

作者：taco

相信很多人都有在尝试使用超图提供的iClient3D vue组件产品，但是最近遇到了一些客户，在使用上有些问题。明明配置好了却出不来球？为什么总是报错？于是发现官网上的安装指南，在配置中可能没有描述的特别清楚。本篇文章具体介绍一下，如何去快速的安装使用Vue-iClient3D-WebGL初始化项目。

一，使用脚手架创建个新项目

1.vue create "xxx"

vue create demo

在官方文档中，并没有明确指出组件需要使用的vue版本，当前组件所安装的，实际使用vue版本为2.0的版本。需要使用vue3.0的话是另一篇链接，可以点击这里访问到。

所以接下来我们这边选择vue2.0。配置可以选择默认的配置，自定义的话可自行添加。

创建完成后，我们运行一下看看是否成功。


cd Demo
npm run serve

通过访问localhost:8080看到上图界面，完成最初的准备。

二，安装iClient3D组件包

1.打开我们的项目使用命令npm install @supermap/vue-iclient3d-webgl安装vue组件

（注意npm中并不带有for,如果含for则是另一个组件产品）

npm install @supermap/vue-iclient3d-webgl

2.安装完成后，我们就可以在node_modules中看到我们的组件包@supermap\vue-iclient3d-webgl

3.引入静态资源，将安装包里的static文件夹下的Cesium依赖包放到工程里的static文件夹下。

4.配置好依赖后，在index.html中直接引入即可。当然也可以通过其他方式去引入。可以参考之前的文档动态引用


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
      <!-- Cesium 依赖-->
  <link href="/static/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="/static/Cesium/Cesium.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5.在main.js中配置webgl组件库内容


import Vue from 'vue'
import App from './App.vue'
 
//vue-iclient3d-webgl组件库
import  '@supermap/vue-iclient3d-webgl/dist/styles/vue-iclient3d-webgl.min.css';
import VueiClient from '@supermap/vue-iclient3d-webgl';
 
Vue.config.productionTip = false
Vue.use(VueiClient);
 
new Vue({
  render: h => h(App),
}).$mount('#app')

6.通常在配置完成后，会出现一些类型识别的问题，所以我们需要新建一个config将一些不识别的类型配置进规则中，在目录中新建vue.config.js

并根据实际情况配置规则


module.exports = {
    chainWebpack: config => {
      // GraphQL Loader
      config.module
        .rule('rules')
        .test(/\.(png|jpe?g|gif|svg|cur)(\?.*)?$/)
        .use('url-loader')
          .loader('url-loader')
          .end()
    }
  }

7.最后这里直接再App.vue中添加我们的组件，就可以在网页中看到地球了。


<template>
  <div id="app">
   <sm-viewer>
       <sm3d-measure></sm3d-measure>
   </sm-viewer>
 
 
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'
 
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/94940