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 Loaderconfig.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>