菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

article

vue与SuperMap iClient for WebGL 10i 结合_iclient webgl vue

作者：菜鸟追梦旅行 | 2024-02-16 15:58:13

踩

iclient webgl vue

作者：赵爽

之前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"
1
2

设置成功后，后续用命令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

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

1.4 设置环境变量

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

在这里插入图片描述

1.5 用cnpm安装vue

使用cmd命令工具输入

cnpm install vue -g
1

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

1.6 安装vue命令行工具

使用cmd命令工具输入

cnpm install vue-cli -g
1

在这里插入图片描述

1.7 创建一个工程

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

cd VueStudy\WebGL
vue init webpack projectName
1
2

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

2. 安装相关依赖

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

 cnpm install jquery --save 
1

在这里插入图片描述

3. 对webpack进行相关配置

本文主要用于测试教程，webpack可不进行配置，如需配置可参考https://blog.csdn.net/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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

然后在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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

其实还有一个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/>'
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/94948

vue与SuperMap iClient for WebGL 10i 结合_iclient webgl vue

文章目录

1. 安装vue环境

1.1 安装node.js环境

1.2 设置global和cache路径

1.3 安装cnpm

1.4 设置环境变量

1.5 用cnpm安装vue

1.6 安装vue命令行工具

1.7 创建一个工程

2. 安装相关依赖

3. 对webpack进行相关配置

4. 引入WebGL客户端

5. 新建一个三维球

Unity3D 官方教程：WebGL（一）_unity-webgl-utilities

Unity转微信小游戏之Puerts快速上手指南_puerts webgl 解决循环引用的问题

Unity3D开发WebAR，可以在手机上面使用_unity webgl ar

[Unity实战]unity-webgl 转换微信小游戏[简单上手][开箱可用]_unity转微信小游戏打包成功生成微信二维码

Unity Web GL项目转换微信小游戏_minigame-unity-webgl-transform

求助 unity导出webgl，转换微信小游戏方法_unity转微信 invalid webgl template path

minigame-unity-webgl-transform插件发布空白场景

Unity WebGL错误集锦_library\bee\artifacts\webgl\build\debug_webgl_wasm

UnityWebGl项目总结（未完）_unity webgl

Unity3D生成的WebGL自适应屏幕_unity webgl 竖屏

Unity发布WebGl注意事项_your browser does not support graphics api "webgl

Unity3D 官方教程：WebGL（二）_webgl有日志吗

第六十章 Unity 发布Web平台_unity webgl

Unity WebGL RuntimeError: integer overflow（整数溢出问题）_an error occurred running the unity content on thi

Unity开发备忘录000007：Unity2017发布WebGL版应用所需配置_unity webgl build setttings

Unity 发布WebGL、去Logo、网络端通信、本地运行_unity webgl template

WebGL+Three.js入门与实战——绘制水平移动的点、通过鼠标控制绘制、绘制不同颜色的点_three通过鼠标交互实现画线

WebGL+Three.js入门与实战(一)——1.4 通过鼠标控制绘制_three鼠标画不规则路径

Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装_three鼠标画线

WebGL 和 Canvas 的关系_webgl canvas