SuperMap Vue-iClient3D-WebGL 使用指南

supermapsupport

已于 2022-03-31 09:09:47 修改

阅读量7.7k

点赞数 8

分类专栏：三维GIS 文章标签： webgl cesium vue supermap iclient

于 2022-03-31 08:59:15 首次发布

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/123850171

版权

三维GIS 专栏收录该内容

417 篇文章 228 订阅

订阅专栏

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

supermapsupport

关注

8
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
SuperMap Vue-iClient3D-WebGL 使用指南

作者：taco相信很多人都有在尝试使用超图提供的iClient3D vue组件产品，但是最近遇到了一些客户，在使用上有些问题。明明配置好了却出不来球？为什么总是报错？于是发现官网上的安装指南，在配置中可能没有描述的特别清楚。本篇文章具体介绍一下，如何去快速的安装使用Vue-iClient3D-WebGL初始化项目。一，使用脚手架创建个新项目1.vue create "xxx"vue create demo在官方文档中，并没有明确指出组件需要使用的vu...
复制链接

扫一扫

专栏目录