畢業(yè)設(shè)計(jì) 大數(shù)據(jù)疫情數(shù)據(jù)分析與3D可視化
0 前言
?? 這兩年開(kāi)始畢業(yè)設(shè)計(jì)和畢業(yè)答辯的要求和難度不斷提升，傳統(tǒng)的畢設(shè)題目缺少創(chuàng)新和亮點(diǎn)，往往達(dá)不到畢業(yè)答辯的要求，這兩年不斷有學(xué)弟學(xué)妹告訴學(xué)長(zhǎng)自己做的項(xiàng)目系統(tǒng)達(dá)不到老師的要求。
為了大家能夠順利以及最少的精力通過(guò)畢設(shè)，學(xué)長(zhǎng)分享優(yōu)質(zhì)畢業(yè)設(shè)計(jì)項(xiàng)目，今天要分享的是
?? ?大數(shù)據(jù)全國(guó)疫情數(shù)據(jù)分析與3D可視化
難度系數(shù)：2分
工作量：3分
創(chuàng)新點(diǎn)：4分
畢設(shè)幫助，選題指導(dǎo)，技術(shù)解答，歡迎打擾，見(jiàn)B站個(gè)人主頁(yè)
https://space.bilibili.com/33886978
1 課題背景
基于大數(shù)據(jù)的新型冠狀病毒疫情三維可視化，借助3D工具實(shí)現(xiàn)新冠病毒的可視化分析。
2 實(shí)現(xiàn)效果
全球柱狀圖
全國(guó)和分省的面著色
全國(guó)城市熱力圖
3 設(shè)計(jì)原理
如何用EarthSDK構(gòu)建一個(gè)簡(jiǎn)單的三維App
構(gòu)建步驟 1下載EarthSDK 地址：https://earthsdk.com/v/v1.1.0.zip
2.在本地創(chuàng)建一個(gè)文件夾，將EarthSDK放入文件夾內(nèi)，并新建一個(gè)index.html文件。 3.index.html文件寫(xiě)入以下代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
? ?<meta name="xbsj-labels" content="Earth起步"></meta>
? ?<title>創(chuàng)建地球</title>
? ?<!-- 0 引入js文件 -->
? ?<script src="./v1.1.0/XbsjEarth/XbsjEarth.js"></script>
? ?<style>
? ? ? ?html,
? ? ? ?body {
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?margin: 0px;
? ? ? ? ? ?padding: 0px;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div id="earthContainer" style="width: 100%; height: 100%; background: grey">
? ?</div>
? ?<script>
? ? ? ?var earth;
? ? ? ?function startup() {
? ? ? ? ? ?earth = new XE.Earth('earthContainer');
? ? ? ? ? ?earth.sceneTree.root = {
? ? ? ? ? ? ? ?"children": [
? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ?"czmObject": {
? ? ? ? ? ? ? ? ? ? ? ? ? ?"name": "默認(rèn)離線影像",
? ? ? ? ? ? ? ? ? ? ? ? ? ?"xbsjType": "Imagery",
? ? ? ? ? ? ? ? ? ? ? ? ? ?"xbsjImageryProvider": {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"createTileMapServiceImageryProvider": {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"fileExtension": 'jpg',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"type": "createTileMapServiceImageryProvider"
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?]
? ? ? ? ? ?};
? ? ? ?}
? ? ? ?// 1 XE.ready()會(huì)加載Cesium.js等其他資源，注意ready()返回一個(gè)Promise對(duì)象。
? ? ? ?XE.ready().then(startup); ? ? ? ? ? ?
? ?</script>
</body>
</html>
4.在myApp目錄下執(zhí)行命令hs -p 81，從而建議一個(gè)本地的http服務(wù)。
5.打開(kāi)chrome瀏覽器，輸入http://127.0.0.1:81，即可訪問(wèn)剛才創(chuàng)建的三維App。
index.html文件代碼講解
1.head節(jié)點(diǎn)下需要引入XbsjEarth.js文件。
<script src="./v1.1.0/XbsjEarth/XbsjEarth.js"></script>
XbsjEarth.js內(nèi)部會(huì)自動(dòng)調(diào)用Cesium相關(guān)的js和css文件，因此不需要再引入其他Cesium相關(guān)的js和css文件。
2.body節(jié)點(diǎn)下需要增加一個(gè)div
<div id="earthContainer" style="width: 100%; height: 100%; background: grey">
這個(gè)div用來(lái)承載三維App。
3.創(chuàng)建App
earth = new XE.Earth('earthContainer');
XE.Earth是EarthSDK提供的用來(lái)創(chuàng)建三維App的基礎(chǔ)類，其參數(shù)'earthContainer'實(shí)際上是上一個(gè)步驟創(chuàng)建的div的id。這樣就相當(dāng)于基于這個(gè)div創(chuàng)建了一個(gè)三維App。 4 三維場(chǎng)景的基本配置
earth.sceneTree.root = {
? ?"children": [
? ? ? ?{
? ? ? ? ? ?"czmObject": {
? ? ? ? ? ? ? ?"name": "默認(rèn)離線影像",
? ? ? ? ? ? ? ?"xbsjType": "Imagery",
? ? ? ? ? ? ? ?"xbsjImageryProvider": {
? ? ? ? ? ? ? ? ? ?"createTileMapServiceImageryProvider": {
? ? ? ? ? ? ? ? ? ? ? ?"url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
? ? ? ? ? ? ? ? ? ? ? ?"fileExtension": 'jpg',
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ?"type": "createTileMapServiceImageryProvider"
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?},
? ?]
};
通過(guò)配置earth.sceneTree.root，來(lái)給地球表面貼上一層離線影像。
earth.sceneTree代表整個(gè)三維App的場(chǎng)景樹(shù)，這里可以通過(guò)簡(jiǎn)單的JSON配置來(lái)達(dá)成。這里面只增加了一個(gè)CzmObject類型的對(duì)象，它的類型xbsjType是Imagery，即影像。
前兩不創(chuàng)建App和三維場(chǎng)景配置的代碼是寫(xiě)在startup這個(gè)函數(shù)里面的。我們可以通過(guò)： XE.ready().then(startup); 來(lái)調(diào)用startup執(zhí)行相應(yīng)地創(chuàng)建操作。 那么為何需要通過(guò)XE.ready()來(lái)操作呢。因?yàn)閄E.ready()函數(shù)會(huì)自動(dòng)加載Cesium.js和相關(guān)的css文件，當(dāng)加載完成以后才能進(jìn)行Cesium的相關(guān)操作。
XE.ready()的返回值是一個(gè)Promise，我們可以通過(guò)then回調(diào)，等到Promise執(zhí)行完成以后再執(zhí)行startup操作。
4 部分代碼
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//import ViewUI from 'view-design';
//import 'view-design/dist/styles/iview.css';
Vue.config.productionTip = false;
/* eslint-disable no-new */
// XE.ready()用來(lái)加載Cesium.js等相關(guān)資源
XE.ready().then(() => {
? ?// 加載標(biāo)繪插件
? ?return XE.HTML.loadJS('../static/XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js');
}).then(() => {
? ?// 加載標(biāo)繪插件
? ?return XE.HTML.loadJS('../static/XbsjEarth-Plugins/customPrimitive/customPrimitive.js');
}).then(() => {
? ?// vtxf g_app賦值，方便調(diào)試
? ?window.g_app = new Vue({
? ? ? ?el: '#app',
? ? ? ?router,
? ? ? ?data() {
? ? ? ? ? ?return {
? ? ? ? ? ? ? ?currentArea: 'china',
? ? ? ? ? ? ? ?mousemoveArea: '',
? ? ? ? ? ? ? ?//修改 currentDay 為 currentTime 表示整形，DataServer的所有數(shù)據(jù)查詢接口 具有 ut 參數(shù)，表示查詢的截至?xí)r間, 為0 表示取最新值
? ? ? ? ? ? ? ?currentTime: new Date().getTime(),
? ? ? ? ? ? ? ?intervalID: undefined
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?components: {
? ? ? ? ? ?App
? ? ? ?},
? ? ? ?template: '<App/>',
? ? ? ?mounted() {
? ? ? ? ? ?this.startGlobeUpdate();
? ? ? ?},
? ? ? ?methods: {
? ? ? ? ? ?startGlobeUpdate() {
? ? ? ? ? ? ? ?this.currentTime = new Date().getTime();
? ? ? ? ? ? ? ?if (!this.intervalID) {
? ? ? ? ? ? ? ? ? ?var self = this;
? ? ? ? ? ? ? ? ? ?this.intervalID = setInterval(() => {
? ? ? ? ? ? ? ? ? ? ? ?self.currentTime = new Date().getTime();
? ? ? ? ? ? ? ? ? ? ? ?console.log('globe update', self.currentTime);
? ? ? ? ? ? ? ? ? ?}, 60000);
? ? ? ? ? ? ? ?}
? ? ? ? ? ?},
? ? ? ? ? ?stopGlobeUpdate() {
? ? ? ? ? ? ? ?if (this.intervalID) {
? ? ? ? ? ? ? ? ? ?clearInterval(this.intervalID);
? ? ? ? ? ? ? ? ? ?this.intervalID = undefined;
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ?})
});<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ?<meta charset="UTF-8">
? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
? ?<meta http-equiv="X-UA-Compatible" content="ie=edge">
? ?<meta name="xbsj-labels" content="Earth起步"></meta>
? ?<title>創(chuàng)建地球</title>
? ?<!-- 強(qiáng)制提前加載Cesium.js，其中Cesium相關(guān)路徑可以換成自定義的 -->
? ?<!-- <script src="../../XbsjCesium/Cesium.js"></script> -->
? ?<!-- <link rel="stylesheet" href="../../XbsjCesium/Widgets/Widgets.css"> -->
? ?<!-- 0 引入js文件 -->
? ?<script src="../../XbsjCesium/Cesium.js"></script>
? ?<link rel="stylesheet" href="../../XbsjCesium/Widgets/widgets.css">
? ?<script src="../../XbsjEarth/XbsjEarth.js"></script>
? ?<style>
? ? ? ?html,
? ? ? ?body {
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?margin: 0px;
? ? ? ? ? ?padding: 0px;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<div id="earthContainer" style="width: 100%; height: 100%; background: grey">
? ?</div>
? ?<script>
? ? ? ?var earth;
? ? ? ?var bgImagery;
? ? ? ?function startup() {
? ? ? ? ? ?// earth = new XE.Earth('earthContainer');
? ? ? ? ? ?earth = new XE.Earth('earthContainer', {
? ? ? ? ? ? ? ?// 這里設(shè)置Viewer的配置，和new Viewer(container, options)中的options一致
? ? ? ? ? ? ? ?homeButton: true,
? ? ? ? ? ? ? ?timeline: true,
? ? ? ? ? ?});
? ? ? ? ? ?earth.sceneTree.root = {
? ? ? ? ? ? ? ?"children": [
? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ?"czmObject": {
? ? ? ? ? ? ? ? ? ? ? ? ? ?"name": "默認(rèn)離線影像",
? ? ? ? ? ? ? ? ? ? ? ? ? ?"xbsjType": "Imagery",
? ? ? ? ? ? ? ? ? ? ? ? ? ?"xbsjImageryProvider": {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"createTileMapServiceImageryProvider": {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"fileExtension": 'jpg',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?"type": "createTileMapServiceImageryProvider"
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ?]
? ? ? ? ? ?};
? ? ? ?}
? ? ? ?// 1 XE.ready()會(huì)加載Cesium.js等其他資源，注意ready()返回一個(gè)Promise對(duì)象。
? ? ? ?XE.ready().then(startup); ? ? ? ? ? ?
? ?</script>
</body>
</html>
5 最后
畢設(shè)幫助，選題指導(dǎo)，技術(shù)解答，歡迎打擾，見(jiàn)B站個(gè)人主頁(yè)
https://space.bilibili.com/33886978
