0 前言
?? 優(yōu)質(zhì)競(jìng)賽項(xiàng)目系列，今天要分享的是
?? 大數(shù)據(jù)全國(guó)疫情數(shù)據(jù)分析與3D可視化
該項(xiàng)目較為新穎，適合作為競(jìng)賽課題方向，學(xué)長(zhǎng)非常推薦！
??學(xué)長(zhǎng)這里給一個(gè)題目綜合評(píng)分(每項(xiàng)滿分5分)
- 難度系數(shù)：2分
- 工作量：3分
- 創(chuàng)新點(diǎn)：4分
?? 更多資料, 項(xiàng)目分享：
https://gitee.com/dancheng-senior/postgraduate文章來源地址http://www.zghlxwxcb.cn/news/detail-842409.html
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文件寫入以下代碼：
?
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>
<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.打開chrome瀏覽器，輸入http://127.0.0.1:81，即可訪問剛才創(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用來承載三維App。
3.創(chuàng)建App
?
earth = new XE.Earth('earthContainer');
XE.Earth是EarthSDK提供的用來創(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"
}
}
},
]
};
通過配置earth.sceneTree.root，來給地球表面貼上一層離線影像。
earth.sceneTree代表整個(gè)三維App的場(chǎng)景樹，這里可以通過簡(jiǎn)單的JSON配置來達(dá)成。這里面只增加了一個(gè)CzmObject類型的對(duì)象，它的類型xbsjType是Imagery，即影像。
前兩不創(chuàng)建App和三維場(chǎng)景配置的代碼是寫在startup這個(gè)函數(shù)里面的。我們可以通過：
XE.ready().then(startup);
來調(diào)用startup執(zhí)行相應(yīng)地創(chuàng)建操作。
那么為何需要通過XE.ready()來操作呢。因?yàn)閄E.ready()函數(shù)會(huì)自動(dòng)加載Cesium.js和相關(guān)的css文件，當(dāng)加載完成以后才能進(jìn)行Cesium的相關(guān)操作。
XE.ready()的返回值是一個(gè)Promise，我們可以通過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()用來加載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: '',
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 最后
?? 更多資料, 項(xiàng)目分享：文章來源：http://www.zghlxwxcb.cn/news/detail-842409.html
https://gitee.com/dancheng-senior/postgraduate
到了這里，關(guān)于計(jì)算機(jī)設(shè)計(jì)大賽 疫情數(shù)據(jù)分析與3D可視化 - python 大數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
