0 前言
?? 這兩年開始畢業(yè)設計和畢業(yè)答辯的要求和難度不斷提升，傳統的畢設題目缺少創(chuàng)新和亮點，往往達不到畢業(yè)答辯的要求，這兩年不斷有學弟學妹告訴學長自己做的項目系統達不到老師的要求。
為了大家能夠順利以及最少的精力通過畢設，學長分享優(yōu)質畢業(yè)設計項目，今天要分享的是
?? 大數據全國疫情數據分析與3D可視化
??學長這里給一個題目綜合評分(每項滿分5分)
- 難度系數：2分
- 工作量：3分
- 創(chuàng)新點：4分
?? 選題指導, 項目分享：
https://gitee.com/dancheng-senior/project-sharing-1/blob/master/%E6%AF%95%E8%AE%BE%E6%8C%87%E5%AF%BC/README.md
1 課題背景
基于大數據的新型冠狀病毒疫情三維可視化，借助3D工具實現新冠病毒的可視化分析。
2 實現效果
全球柱狀圖
全國和分省的面著色
全國城市熱力圖
3 設計原理
如何用EarthSDK構建一個簡單的三維App
構建步驟
1下載EarthSDK
地址：https://earthsdk.com/v/v1.1.0.zip
2.在本地創(chuàng)建一個文件夾，將EarthSDK放入文件夾內，并新建一個index.html文件。
3.index.html文件寫入以下代碼：
<!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": "默認離線影像",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"createTileMapServiceImageryProvider": {
"url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
"fileExtension": 'jpg',
},
"type": "createTileMapServiceImageryProvider"
}
}
},
]
};
}
// 1 XE.ready()會加載Cesium.js等其他資源，注意ready()返回一個Promise對象。
XE.ready().then(startup);
</script>
</body>
</html>
4.在myApp目錄下執(zhí)行命令hs -p 81，從而建議一個本地的http服務。
5.打開chrome瀏覽器，輸入http://127.0.0.1:81，即可訪問剛才創(chuàng)建的三維App。
index.html文件代碼講解
1.head節(jié)點下需要引入XbsjEarth.js文件。
<script src="./v1.1.0/XbsjEarth/XbsjEarth.js"></script>
XbsjEarth.js內部會自動調用Cesium相關的js和css文件，因此不需要再引入其他Cesium相關的js和css文件。
2.body節(jié)點下需要增加一個div
<div id="earthContainer" style="width: 100%; height: 100%; background: grey">
這個div用來承載三維App。
3.創(chuàng)建App
earth = new XE.Earth('earthContainer');
XE.Earth是EarthSDK提供的用來創(chuàng)建三維App的基礎類，其參數’earthContainer’實際上是上一個步驟創(chuàng)建的div的id。這樣就相當于基于這個div創(chuàng)建了一個三維App。
4 三維場景的基本配置
earth.sceneTree.root = {
"children": [
{
"czmObject": {
"name": "默認離線影像",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"createTileMapServiceImageryProvider": {
"url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
"fileExtension": 'jpg',
},
"type": "createTileMapServiceImageryProvider"
}
}
},
]
};
通過配置earth.sceneTree.root，來給地球表面貼上一層離線影像。
earth.sceneTree代表整個三維App的場景樹，這里可以通過簡單的JSON配置來達成。這里面只增加了一個CzmObject類型的對象，它的類型xbsjType是Imagery，即影像。
前兩不創(chuàng)建App和三維場景配置的代碼是寫在startup這個函數里面的。我們可以通過：
XE.ready().then(startup);
來調用startup執(zhí)行相應地創(chuàng)建操作。
那么為何需要通過XE.ready()來操作呢。因為XE.ready()函數會自動加載Cesium.js和相關的css文件，當加載完成以后才能進行Cesium的相關操作。文章來源：http://www.zghlxwxcb.cn/news/detail-497462.html
XE.ready()的返回值是一個Promise，我們可以通過then回調，等到Promise執(zhí)行完成以后再執(zhí)行startup操作。文章來源地址http://www.zghlxwxcb.cn/news/detail-497462.html
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()用來加載Cesium.js等相關資源
XE.ready().then(() => {
// 加載標繪插件
return XE.HTML.loadJS('../static/XbsjEarth-Plugins/plottingSymbol/plottingSymbol.js');
}).then(() => {
// 加載標繪插件
return XE.HTML.loadJS('../static/XbsjEarth-Plugins/customPrimitive/customPrimitive.js');
}).then(() => {
// vtxf g_app賦值，方便調試
window.g_app = new Vue({
el: '#app',
router,
data() {
return {
currentArea: 'china',
mousemoveArea: '',
//修改 currentDay 為 currentTime 表示整形，DataServer的所有數據查詢接口 具有 ut 參數，表示查詢的截至時間, 為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>
<!-- 強制提前加載Cesium.js，其中Cesium相關路徑可以換成自定義的 -->
<!-- <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', {
// 這里設置Viewer的配置，和new Viewer(container, options)中的options一致
homeButton: true,
timeline: true,
});
earth.sceneTree.root = {
"children": [
{
"czmObject": {
"name": "默認離線影像",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"createTileMapServiceImageryProvider": {
"url": XE.HTML.cesiumDir + 'Assets/Textures/NaturalEarthII',
"fileExtension": 'jpg',
},
"type": "createTileMapServiceImageryProvider"
}
}
},
]
};
}
// 1 XE.ready()會加載Cesium.js等其他資源，注意ready()返回一個Promise對象。
XE.ready().then(startup);
</script>
</body>
</html>
5 最后
到了這里，關于畢設 疫情數據分析與3D可視化 - python 大數據的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
