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中直接引入即可。当然也可以通过其他方式去引入。可以参考之前的文档动态引用

 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中添加我们的组件，就可以在网页中看到地球了。