SuperMap iClient3D for WebGL教程-Vue开发环境配置入门

程序员文章站 2022-05-23 15:20:11

...

作者：为梦齐舞

最近使用vue的客户愈发的增多，Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
本节教程带大家在Visual Studio Code中的wekpack环境中使用vue，并引入SuperMap iClient3D for WebGL。
vue的安装请大家自行解决，网上有很多案例

一、新建vue工程

本文使用vue3.4.1，本文使用vue ui界面华工具创建vue项目。
1、在终端命令行中输入vue ui命令调出创建工程界面
命令输入：
SuperMap iClient3D for WebGL教程-Vue开发环境配置入门
界面显示：

2、选择项目管理器，打开项目创建页面

3、选择希望创建的路径，进行项目创建

4、输入项目名称，选择包管理器，这里我们选择npm进行管理。

5、选择手动配置项目
SuperMap iClient3D for WebGL教程-Vue开发环境配置入门
6、选择功能项，要加入哪些项目，可以自行选择，这里我们选择以下功能项

7、选择配置项

完成所有操作后，点击创建项目即可，接下来就是等待创建的过程，可以在Visual Studio Code中查询
SuperMap iClient3D for WebGL教程-Vue开发环境配置入门
在终端运行

npm run serve

即可进行运行
SuperMap iClient3D for WebGL教程-Vue开发环境配置入门

二、引入WebGL的包

1、我们在public目录下，新建一个static目录，用于放置静态资源，然后将WebGL包中的Build文件夹中的Cesium文件夹拷贝到static目录。
SuperMap iClient3D for WebGL教程-Vue开发环境配置入门
2、我们在index.html中引入widgets.css、Cesium.js和zlib.min.js

<!DOCTYPE html>
<html lang="en">
  <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">
    <link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">
    <title>webglvue</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but webglvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="text/javascript" src="static/Cesium/Cesium.js"></script>
    <script type="text/javascript" src="static/Cesium/Workers/zlib.min.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

这样WebGL所有的引用都引用完成了。

三、编写代码，加载三维球

这里我们为了方便起见，直接修改HelloWorld.vue组件
首先核心代码只有一句

var viewer = new Cesium.Viewer("cesiumContainer");

接下来我们贴修改的HelloWorld.vue中的所有代码

<template>
  <div class="hello">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted () {
    /* eslint-disable */
    var viewer = new Cesium.Viewer("cesiumContainer");
    /* eslint-enable */
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#cesiumContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-family: sans-serif;
}

</style>

此处说明下添加 /* eslint-disable */是为了禁用eslint的规则检查
修改完成后进行保存，然后在浏览器中输入：http://localhost:8080/ ，即可看到运行效果
运行效果如下图：
SuperMap iClient3D for WebGL教程-Vue开发环境配置入门

上一篇：事物索引视图

下一篇： php时间格式,该如何处理

SuperMap iClient3D for WebGL教程-Vue开发环境配置入门

一、新建vue工程

二、引入WebGL的包

三、编写代码，加载三维球

SuperMap iClient3D for WebGL-Vue组件开发之产品引用

java入门教程：开发环境之jdk搭建【Windows10】_环境变量配置

SuperMap iClient3D for WebGL-Vue组件开发之全局globe属性