前面我們介紹了Vue+webpack+openlayer的地圖基礎知識，從這一章開始，我們將正式開始我們的基於SpringBoot+Vue+OpenLayers的實戰項目---疫情地圖！
一、疫情地圖數據處理
這裏我介紹一下數據來源，我們首先從這裏：http://datav.aliyun.com/tools/atlas/#&lat=34.994003757575776&lng=96.85546875&zoom=4
下載到全國各省（這裏疫情數據我只統計到了省級）的行政區劃圖，然後在ArcGIS中根據當前國內疫情感染人數給矢量數據賦值如下圖：
這裏SHP數據的最後一個字段countNum就是截至到3.26日中國境內各省的疫情感染人數。
二、新建項目covidmap並託管到碼雲
1、碼雲新建項目，這裏我建立了一個開源項目covidmap
2、電腦本地新建一個文件夾用來克隆碼雲上我們剛剛新建的項目，
這裏直接在文件夾右擊使用Git bash命令
在命令行使用命令 git clone ******** 後面是具體的碼雲上項目的地址
上面的截圖說明代碼已經克隆到本地了。
3、創建項目：
4、運行測試創建的項目：
5、Vscode打開並稍微改造項目
首先引入我們的openlayers包，這裏我用的cnpm下載的比較快一點，下面我也會用cnpm統一操作，不能一會npm一會cnpm容易使程序崩潰。命令如下：
其中--save是指無論在開發環境中還是線上環境都添加這個依賴包。再看一下我們是否加進來了這個依賴包，打開package.json文件：
ok，已經成功引入了ol最新版本6..2.1。
然後我們修改一下項目結構，我們把系統自動構建的HelloWorld.vue文件刪除，把components文件夾也刪掉，然後在src文件夾下新建一個pages文件夾，在pages文件夾下，我們新建一個home文件夾，在home文件夾下，我們新建一個components文件夾和我們的地圖組件HomeMap.vue如下圖：
再打開index.js文件如下圖：
這裏我們已經把HelloWorld.vue文件刪除了，所以我們修改路由配置項爲home文件夾下的Home組件如下：
然後我們在home文件夾下的components文件夾下新建一個我們的Map組件，如下圖所示：
下面我們在Map.vue中把我們的疫情數據地圖加載上，這裏通過加載Geoserver發佈的地圖服務的方式進行加載，首先把我們的SHP數據發佈爲Geoserver服務如下：
HomeMap.vue的代碼如下所示：
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Style, Text} from 'ol/style';
export default {
name:'OlMapWms',
mounted() {
var vectorLayer = new VectorLayer({
source: new VectorSource({
url: 'http://localhost:8080/geoserver/covidmap/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=covidmap%3Achina&outputFormat=application%2Fjson',
format: new GeoJSON()
})
});
var map = new Map({
layers: [vectorLayer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 3
})
});
}
}
</script>
<style lang="stylus" scoped>
#map
width:900px
height:350px
</style>
這裏我們加載的是服務的GeoJson格式數據，如下圖所示：
我們再來把App.vue的代碼修改一下，代碼如下：
<template>
<router-view/>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
這裏只保留了router-view，下面我們再來修改一下router文件夾下的index.js的文件，代碼如下：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
}
]
})
這裏我們把Home.vue組件引入進行路由到Home.vue界面，最後我們再來修改一下Home.vue的代碼 如下：
<template>
<!-- 這裏我們就可以用引入的HomeMap組件了 -->
<home-map></home-map>
</template>
<script>
// 首先引入局部組件
import HomeMap from './components/HomeMap'
export default {
name: 'Home',
// 需要聲明局部組件
components: {
HomeMap: HomeMap
}
}
</script>
<style scoped>
</style>
這裏我們在Home.vue中引入了HomeMap子組件，並且在模板文件中使用了HomeMap子組件，這樣我們的系統Home頁面目前就只有我們的HomeMap組件了，下面我們運行系統看一下效果：
這樣我們的系統就已經搭建並初步編寫成功了，這裏由於我的8080端口已經開啓了Tomcat，所以我給vue項目重新指定了端口：8086，這個可以在config文件夾下的index.js中修改，如下圖所示：
下面我們把我們這一部分的代碼推到碼雲倉庫中！
主要執行以下git命令：
1、git status 查看倉庫狀態
2、git add . 將代碼提交到緩存區
3、git commit -m 'project initialize'
4、git push 推到遠程倉庫
最後，我們再去Git倉庫看一下：
ok我們已經成功的推到了遠程倉庫，這樣我們的實戰項目的地圖數據處理及代碼託管就已經完成了！下一節我們繼續開發頁面，大家加油！