最近使用vue的客戶愈發(fā)的增多扩然，Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架夫偶。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用兵拢。Vue 的核心庫只關(guān)注視圖層，不僅易于上手说铃，還便于與第三方庫或既有項(xiàng)目整合。另一方面腻扇，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)砾嫉，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
本節(jié)教程帶大家在Visual Studio Code中的wekpack環(huán)境中使用vue焕刮，并引入SuperMap iClient3D for WebGL墙杯。
vue的安裝請(qǐng)大家自行解決括荡，網(wǎng)上有很多案例
一、新建vue工程
本文使用vue3.4.1一汽，本文使用vue ui界面華工具創(chuàng)建vue項(xiàng)目。
1召夹、在終端命令行中輸入vue ui命令調(diào)出創(chuàng)建工程界面
命令輸入：
界面顯示：
2、選擇項(xiàng)目管理器纱意，打開項(xiàng)目創(chuàng)建頁面
3鲸阔、選擇希望創(chuàng)建的路徑，進(jìn)行項(xiàng)目創(chuàng)建
4类少、輸入項(xiàng)目名稱，選擇包管理器硫狞，這里我們選擇npm進(jìn)行管理。
5残吩、選擇手動(dòng)配置項(xiàng)目
6倘核、選擇功能項(xiàng)，要加入哪些項(xiàng)目紧唱，可以自行選擇，這里我們選擇以下功能項(xiàng)
7酬凳、選擇配置項(xiàng)
完成所有操作后，點(diǎn)擊創(chuàng)建項(xiàng)目即可，接下來就是等待創(chuàng)建的過程稠屠，可以在Visual Studio Code中查詢
在終端運(yùn)行
npm run serve
即可進(jìn)行運(yùn)行
二翎苫、引入WebGL的包
1榨了、我們?cè)趐ublic目錄下，新建一個(gè)static目錄龙屉，用于放置靜態(tài)資源，然后將WebGL包中的Build文件夾中的Cesium文件夾拷貝到static目錄转捕。
2、我們?cè)趇ndex.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所有的引用都引用完成了枢步。
三、編寫代碼醉途，加載三維球
這里我們?yōu)榱朔奖闫鹨姡苯有薷腍elloWorld.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的規(guī)則檢查
修改完成后進(jìn)行保存隘擎，然后在瀏覽器中輸入：http://localhost:8080/ ，即可看到運(yùn)行效果
運(yùn)行效果如下圖：
