最近使用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命令调出创建工程界面
命令输入：
命令输入
界面显示：
界面显示
2、选择项目管理器，打开项目创建页面
项目管理器
3、选择希望创建的路径，进行项目创建
项目创建页面
4、输入项目名称，选择包管理器，这里我们选择npm进行管理。
image.png
5、选择手动配置项目
image.png
6、选择功能项，要加入哪些项目，可以自行选择，这里我们选择以下功能项
image.png
7、选择配置项
image.png
完成所有操作后，点击创建项目即可，接下来就是等待创建的过程，可以在Visual Studio Code中查询
image.png
在终端运行
npm run serve
即可进行运行
image.png
二、引入WebGL的包
1、我们在public目录下，新建一个static目录，用于放置静态资源，然后将WebGL包中的Build文件夹中的Cesium文件夹拷贝到static目录。
image.png
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/ ，即可看到运行效果
运行效果如下图：
运行效果图
网友评论