日韩小骚,久久99产日一区,久久专区日韩欧美日韩,成人亚洲精品久久久,国产精选福利,99国产精品视频免费,AV熟妇天堂一区,97青娱国内视频,97se久久久久

項(xiàng)目名稱：智慧航班

功能介紹：

地球自轉(zhuǎn)：

下圖為成果展示圖，點(diǎn)擊可實(shí)現(xiàn)地球自轉(zhuǎn)。

實(shí)現(xiàn)步驟：

1. 使用inject函數(shù)注入依賴，獲取地圖對(duì)象和場(chǎng)景對(duì)象并分別賦值給變量。

2. 從map對(duì)象中獲取當(dāng)前中心點(diǎn)坐標(biāo)，將地圖中心點(diǎn)的經(jīng)度減少1度。

3. 使用easeTo的方法以線性平滑的方法均勻移動(dòng)到新的中心點(diǎn)。

4. 使用map.off方法從地圖對(duì)象上移除moveend事件監(jiān)聽器。

主頁面插件、鷹眼控件

1. 時(shí)間戳：

在子組件中通過setInterval函數(shù)實(shí)現(xiàn)時(shí)間的變化，利用Date()獲取當(dāng)前時(shí)間，利用toLocalDateString函數(shù)獲取當(dāng)前時(shí)間的年月日和時(shí)分秒。

效果圖：

代碼：

2. 更換地圖style、全屏控件

根據(jù)select的change事件，獲取當(dāng)前選擇的style，并利用setStyle函數(shù)將值賦給map

3. 首頁跳轉(zhuǎn)：

在Bottom子組件中添加一個(gè)按鈕，使用 window.location.href 跳轉(zhuǎn)到指定的 URL，實(shí)現(xiàn)跳轉(zhuǎn)到地圖首頁的功能。

4. 切換投影方式

在select下拉框通過v-model雙向綁定實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)，@change方法實(shí)現(xiàn)地圖投影方式的改變。

右為首頁和切換投影插件展示=>

鷹眼控件

1. 安裝@aesqe/mapboxgl-minimap插件，初始化配置，并添加控件；卸載時(shí)移除控件。

鷹眼控件展示圖

控制中心

在老師的代碼基礎(chǔ)上增加了雷達(dá)圖展示：將雷達(dá)圖代碼封裝在js文件中，與其他圖不同，雷達(dá)圖使用render函數(shù)展現(xiàn)圖層

城市視角

1. 呈現(xiàn)結(jié)果

2. 獲取長(zhǎng)江武漢段數(shù)據(jù)獲取

城市掃光

1. 城市場(chǎng)景實(shí)現(xiàn)

范圍事故點(diǎn)查詢與信息匹配

建立el表格，設(shè)置查詢結(jié)果的表格格式，通過height屬性確定表格定長(zhǎng)以達(dá)到表格的滾動(dòng)條效果，并利用el-card綁定點(diǎn)擊事件（toDraw）開始進(jìn)行拉框查詢

建立toDraw方法，初始化畫框及地圖內(nèi)容，繪制一個(gè)初始的矩形，即為查詢區(qū)域。

利用toSearch方法判斷時(shí)間是否在矩形框內(nèi)，若在則利用push方法將方法的具體信息傳入列表內(nèi)，并最后利用列表的長(zhǎng)度判斷是否有點(diǎn)在矩形框內(nèi)。若有點(diǎn)在矩形框內(nèi)，則將列表內(nèi)信息傳入el表內(nèi)。

利用el表綁定的點(diǎn)擊事件，通過點(diǎn)擊行內(nèi)信息，利用flyTo方法將地圖中心點(diǎn)顯示至點(diǎn)對(duì)象處。

下圖即為展示效果，點(diǎn)擊拉框查詢則可以進(jìn)行范圍查詢，并得到框內(nèi)結(jié)果，點(diǎn)擊則可以跳轉(zhuǎn)。

地圖測(cè)量

1. 添加路由及視圖基本實(shí)現(xiàn)畫線、矩形、多邊形、圓的功能

功能基本實(shí)現(xiàn)示例

2. 解決功能沖突問題，完善代碼，如下圖

發(fā)現(xiàn)功能沖突的問題

天氣預(yù)報(bào)

1. 首先根據(jù)openlayer天氣項(xiàng)目提供的網(wǎng)址，創(chuàng)建自己的key

2. 然后在網(wǎng)址后加上輸入框輸入的地址以及key值獲取郵編和經(jīng)緯度信息

3. 進(jìn)一步根據(jù)郵編獲取該地的天氣狀況，并利用MyMarker函數(shù)將天氣狀況以及經(jīng)緯度等狀況傳遞出去

4. 根據(jù)傳出去的經(jīng)緯度設(shè)置marker以及popup，并用if限制條件，對(duì)marker進(jìn)行銷毀，防止連續(xù)輸入多個(gè)城市后，多個(gè)marker同時(shí)出現(xiàn)的情況

5. 最后利用flyTo實(shí)現(xiàn)地圖的移動(dòng)

6. 下圖為成果展示圖，可搜索國(guó)內(nèi)任意省份和地區(qū)的天氣狀況

加載三維模型

1. 初始化模型配置

2. 利用loadObjModels.js文件進(jìn)行模型的加載和移除

3. 三維模型展示圖

地圖導(dǎo)航

1. 安裝threebox-plugin插件，初始化car、soldier、bicycle三維模型

2. 安裝@mapbox/mapbox-gl-directions插件，初始化導(dǎo)航控件，根據(jù)不同的交通方式加載不同的模型進(jìn)行漫游

地圖導(dǎo)航展示圖:

3. 卸載時(shí)移除模型和導(dǎo)航控件

全國(guó)風(fēng)力圖

1. 在子組件ChinaWind.vue中獲取到全局變量

const { map, scene } = inject("$scene_map");

2. 拿到全國(guó)季風(fēng)的json數(shù)據(jù)后進(jìn)行數(shù)據(jù)請(qǐng)求，將后端數(shù)據(jù)渲染到頁面上

3. 渲染到頁面上之后設(shè)置圖層的樣式

4. 在組件注銷時(shí)刪除季風(fēng)圖層

飛行航線查詢

飛行航線查詢(視圖)