vue与SuperMap iClient for WebGL 10i 结合_vue supermap webgl-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43565052/article/details/103665170

作者：赵爽

之前SuperMap官方的博客也发布过一篇vue+webpack+webgl的文章，但是有些初学的小伙伴不是很清楚，这篇文章主要是详细讲一下vue和webgl10i的结合。
注：webgl10i和以前的webgl有些许不同

以前的webgl是有两个核心js文件（zlib.min.js和Cesium.js），10i版本的已将两个js合二为一，只需要一个Cesium.js

文章目录

1. 安装vue环境

如果已经成功安装好node.js和创建好项目，则直接看第二步

1.1 安装node.js环境

Node.js官网下载地址https://nodejs.org/en/download/
在这里插入图片描述
依据个人电脑实际情况选择，本文选择的是windows Installer 64-bit
下载完后一切正常安装，这里没什么需要注意的

1.2 设置global和cache路径

说明：设置路径能够把通过npm安装的模块集中在一起，便于管理。

在nodejs的安装目录下，新建node_global和node_cache两个文件夹
设置global和cache
使用cmd命令工具输入

npm config set prefix "E:\Program Files\nodejs\node_global"
npm config set cache "E:\Program Files\nodejs\node_cache"

设置成功后，后续用命令npm install XXX -g安装以后模块就在E:\Program Files\nodejs\node_global\node_modules里

1.3 安装cnpm

使用cmd命令工具输入

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
安装成功

1.4 设置环境变量

鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框
点击系统变量，修改用户变量中的Path变量，选中然后点击编辑按钮，新建一个变量
新建系统变量
点击系统变量中的新建，然后把node_modules的路径复制进去，最后点击确定

在这里插入图片描述

1.5 用cnpm安装vue

使用cmd命令工具输入

cnpm install vue -g

注意：配置完系统变量后需要重启cmd命令，若不识别cnpm指令，则检查系统变量
在这里插入图片描述

1.6 安装vue命令行工具

使用cmd命令工具输入

cnpm install vue-cli -g

在这里插入图片描述

1.7 创建一个工程

使用cd命令进入到新建工程的目录，创建一个基于webpack的项目
使用cmd命令工具输入

cd VueStudy\WebGL
vue init webpack projectName

然后根据项目需求进行设置
在这里插入图片描述
2. 出下面的提示后表示创建成功了
使用命令行进入porjectName
使用cmd命令工具输入
cd porjectName
npm run dev

2. 安装相关依赖

因为这篇文章主要是个测试的教程，主要需要的依赖有babel,webpack,vue,jquery。因为创建项目的时候，babel,webpack,vue,都会默认安装，所以我们这里只需要安装一个jquery。其他的依赖依据自己项目实际情况来安装
使用cmd命令工具输

 cnpm install jquery --save

在这里插入图片描述

3. 对webpack进行相关配置

本文主要用于测试教程，webpack可不进行配置，如需配置可参考https://blog.youkuaiyun.com/supermapsupport/article/details/89375081

4. 引入WebGL客户端

将WebGL包中的Build文件夹下所有内容拷贝到项目文件夹中static文件夹下，这里面是存放静态资源的目录，引入的核心库文件Cesium.js库。
然后需要在index.html中引入这个js文件和一个css文件
代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>projectname</title>
    //引入我们的js和css
    <link href="./static/Cesium/Widgets/widgets.css" rel="stylesheet">		
    <script type="text/javascript" src="./static/Cesium/Cesium.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <!-- built files will be auto injected -->
  </body>
</html>

5. 新建一个三维球

首先需要建一个viewer.vue，然后在里面写上三维球相关的代码


<template>
  <div id="cesiumContainer" v-bind:style="styleObject"></div>
</template>

<script>
  import $ from 'jquery'
  const Cesium=window.Cesium;
  export default {
    data: function () {
      return {
        styleObject:{
          width: '100%',
          position: 'absolute',
          top: '0px',
          bottom: '0px',
          left: '0px',
          backgroundColor: '#000000'
        },
        smviewer:{}
      }},
    mounted: function (){
      this.smviewer=new Cesium.Viewer('cesiumContainer');
      $(".cesium-widget-credits")[0].style.visibility="hidden";
      $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
    }
  }
</script>

<style>

</style>

然后在app.vue中引入它

<template>
  <div id="app">
    <img src="./assets/logo.png">
       <viewer></viewer>
  </div>
</template>


<script>
  import viewer from './components/viewer.vue'
  export default {
    name: 'App',
    components:{
      viewer
    }
}

</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>

其实还有一个main.js文件，但是在这里我们不需要修改，顺便说一下里面的内容定义

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false    //阻止显示生产模式的消息

/* eslint-disable no-new */
new Vue({
  el: '#app',    /*对应的是index中的div id*/
  router,
  components: {App
  },
  template: '<App/>'
})

这个时候我们通过npm run dev启动我们的项目，就可以看到一个完整的三维球了，说明vue已经和SuperMap iClient for webgl 10i结合成功了。

有一点需要注意的是，因为webgl10i与之前有些改动，原来是用function onload（Cesium）来把Cesium这个变量拿出来，可以说它是一个局部变量。但是10i有过更改，现在我们直接就可以拿Cesium了，他是一个全局变量了，也就是说不需要写function onload（Cesium）了。