作者: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>