基于百度地圖API的場強地圖展示

張青青

（作者單位：中國傳媒大學(xué)）

?

基于百度地圖API的場強地圖展示

張青青

（作者單位：中國傳媒大學(xué)）

摘 要：針對不同電臺信號測試數(shù)據(jù)多，信息量大、可視化能力差的問題，討論設(shè)計一個可視化、精確化、直觀化顯示電臺信號在不同測試點場強大小的地圖?；诎俣鹊貓DAPI，通過JavaScript腳本語言，討論設(shè)計一個可視化的地圖展示系統(tǒng)，以直觀的形式展示測試點的坐標(biāo)、場強、頻率和駕車路線等信息。

關(guān)鍵詞：百度地圖API；JavaScript；場強覆蓋

利用JavaScript語言，借助于互聯(lián)網(wǎng)和百度地圖API的平臺優(yōu)勢，完成了對測試點數(shù)據(jù)的地圖展示。從使用的技術(shù)、系統(tǒng)的各個模塊，以及各模塊的實現(xiàn)3個方面討論了系統(tǒng)的實現(xiàn)過程。

1 使用的技術(shù)

1.1 百度地圖API

百度地圖API包括JavaScript API、Web服務(wù)API、Android SDK等多種開發(fā)工具與服務(wù)，提供基本的地圖展示、搜索、定位、逆/地址解析等功能，適用于PC端、移動端和服務(wù)器等多種設(shè)備，多種操作系統(tǒng)下的地圖應(yīng)用開發(fā)。

1.2 JavaScript

JavaScript一種直譯式的動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。JavaScript具有如下幾個特點：這是一種解釋性的腳本語言（代碼不進(jìn)行預(yù)編譯）；主要用來向HTML頁面添加交互行為；可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結(jié)構(gòu)和行為的分離；跨平臺特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、ios等）。

2 設(shè)計方案

2.1 功能要求

在對測試點地圖展示功能的設(shè)計中，應(yīng)該具有如下功能：通過為地圖添加控件，實現(xiàn)點擊控件查看整體場強、各頻率場強、極值和均值等的分布情況的功能；鼠標(biāo)點擊場強標(biāo)注查看測試點的詳細(xì)信息，包括坐標(biāo)、頻率和場強值等；可查看駕車路線，鼠標(biāo)拖拽修改起始點，實現(xiàn)導(dǎo)航功能。

2.2 系統(tǒng)體系結(jié)構(gòu)

該地圖展示系統(tǒng)功能的實現(xiàn)，可劃分為3個模塊來完成：數(shù)據(jù)處理模塊、百度地圖展示模塊、跳轉(zhuǎn)頁面。3大模塊之間的邏輯關(guān)系可以用圖1表示。

2.3 數(shù)據(jù)處理

由無線電監(jiān)測設(shè)備得到的原始的TXT文件包括測試點的經(jīng)緯度、海拔、頻率、場強、行車速度等信息。首先，對所需數(shù)據(jù)的提取。同時，用戶數(shù)據(jù)應(yīng)以數(shù)組的形式存儲，結(jié)構(gòu)為[經(jīng)度，緯度，頻率，場強]。

在數(shù)據(jù)的處理過程中，使用PHP語言，將提取之后的數(shù)據(jù)信息存儲在數(shù)組當(dāng)中，并以本地JS文件的形式存儲下來。最終得到的本地數(shù)據(jù)的文件名為C2.js。

在數(shù)據(jù)處理過程中用到了2個關(guān)鍵函數(shù)：explode()和implode()。

explode()函數(shù)：將字符串分割為數(shù)組，利用該函數(shù)，將原始txt文件的內(nèi)容按列分割成多維數(shù)組的形式，便于提取所需列的內(nèi)容。

implode()函數(shù)：將數(shù)組元素連接成字符串。

原始數(shù)據(jù)格式：

處理之后的數(shù)據(jù)格式：

2.4 地圖展示JavaScript設(shè)計

地圖展示功能是通過JavaScript語言實現(xiàn)。在各地圖展示模塊的設(shè)計中，包括3個子模塊來分別實現(xiàn)相應(yīng)功能的：整體場強、均值、極值圖；頻率場強圖；駕車路線圖。

在每個模塊的實現(xiàn)過程中，用到了以下幾個重要函數(shù)：

(1)PointCollection(points:Array [,opts:PointCollectionOptions]):創(chuàng)建海量點類，points為點的坐標(biāo)集合，opts為點的繪制樣式。

(2)InfoWindow(content:String|HTMLE lement[,opts:InfoWindowOptions]):創(chuàng)建一個信息窗實例，其中content支持HTML內(nèi)容。

(3)DrivingRoute(location:Map|Point|Stri ng[,opts:DrivingRouteOptions]):創(chuàng)建一個駕車導(dǎo)航實例，其中l(wèi)ocation表示檢索區(qū)域，在駕車路線圖的設(shè)計過程中，利用該函數(shù)，實現(xiàn)拖拽鼠標(biāo)修改起始點，展現(xiàn)駕車路線。

各子地圖展示功能的設(shè)計流程見圖2。

圖1 3大模塊之間的邏輯關(guān)系

圖2 各子地圖展示功能的設(shè)計流程

申請百度地圖API密鑰后，通過在html文件的標(biāo)簽中加入實現(xiàn)引用的。

在整個javascript語言對本地數(shù)據(jù)的讀取和交互，通過在標(biāo)簽中加入