小區(qū)域地圖導(dǎo)航系統(tǒng)開發(fā)與應(yīng)用

吳雅玲 姜志剛 許榮銜 丘金英 王詩豪

摘要：以福建師范大學(xué)福清分?？臻g信息為實(shí)驗(yàn)數(shù)據(jù)，采用 SVG 文本矢量圖，結(jié)合H5調(diào)用地理信息位置，運(yùn)用混合定位、Dijkstra 最短路徑算法以及PHP技術(shù)開發(fā)了小區(qū)域規(guī)模的地圖導(dǎo)航開發(fā)系統(tǒng)。該系統(tǒng)在可以實(shí)現(xiàn)GPS定位、放大縮小、地圖導(dǎo)航功能，其次還能為用戶提供自定義地圖接口，同時(shí)實(shí)現(xiàn)地圖導(dǎo)航功能。該系統(tǒng)既可以滿足高校和鄉(xiāng)村旅游導(dǎo)航的系統(tǒng)開發(fā)，又能滿足個(gè)人需求。具有成本低、實(shí)用價(jià)值高、面向?qū)ο髲V泛的特點(diǎn)。

關(guān)鍵詞：高校地圖；導(dǎo)航；SVG；Dijkstra；H5

中圖分類號(hào)： TP391 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）16-0079-04

1 課題的研究背景

目前國(guó)內(nèi)市面上有谷歌地圖、百度地圖、高德地圖等主流[1]的導(dǎo)航電子地圖，這些地圖提供的圖形化界面給用戶最直接的感受，但在關(guān)注小區(qū)域信息展示方面還做得不夠精確，尤其是對(duì)于高校面積的擴(kuò)展以及鄉(xiāng)村旅游產(chǎn)業(yè)的開發(fā)，對(duì)于如何展現(xiàn)校園或者旅游景區(qū)內(nèi)部的細(xì)節(jié)，具有十分必要的意義。雖然主流地圖開發(fā)了應(yīng)用接口，但要實(shí)現(xiàn)這些功能需要有一定的技術(shù)操作能力，這使得這些應(yīng)用開發(fā)接口的使用并不具有普遍性的特點(diǎn)。而校園導(dǎo)航以及旅游導(dǎo)航在國(guó)內(nèi)雖然陸陸續(xù)續(xù)取得了一些成果，其根據(jù)自身技術(shù)能力和條件進(jìn)行了研究，采用的技術(shù)和開發(fā)平臺(tái)各有特色[2]，但有些自主開發(fā)由于相關(guān)的技術(shù)比較薄弱，開發(fā)出來的產(chǎn)品 技術(shù)含量低，且疏于系統(tǒng)管理，缺乏應(yīng)用性。有些則采用外包公司開發(fā)導(dǎo)航系統(tǒng)雖然方便使用，但成本之高，并不能廣泛普及。

因此，本課題基于上述問題，結(jié)合AI技術(shù)、PHP技術(shù)和html5技術(shù)，開發(fā)出一款小區(qū)域規(guī)模的地圖導(dǎo)航開發(fā)系統(tǒng)。該系統(tǒng)可以既能實(shí)現(xiàn)地圖的基本信息查詢，手機(jī)定位，最短路徑查詢等功能，又能讓用戶自導(dǎo)地圖，自定義導(dǎo)航界面并實(shí)現(xiàn)地圖導(dǎo)航功能，而用戶只需提供一張SVG格式的底圖。此平臺(tái)具有成本小，管理簡(jiǎn)便以及實(shí)用性強(qiáng)的特點(diǎn)，可以滿足高校和鄉(xiāng)村旅游導(dǎo)航的系統(tǒng)開發(fā)。

2 系統(tǒng)的總體設(shè)計(jì)

2.1 系統(tǒng)的設(shè)計(jì)目標(biāo)

本課題的目標(biāo)主要是開發(fā)出一款小區(qū)域規(guī)模的地圖導(dǎo)航開發(fā)系統(tǒng)[3]。用戶可通過微信公眾號(hào)了解導(dǎo)航的使用方法并進(jìn)入導(dǎo)航頁面，系統(tǒng)自動(dòng)定位，然后通過系統(tǒng)提供的查詢功能，快速查找想要到達(dá)的地點(diǎn)和路徑。除此之外，用戶也可以上傳自己的地圖，通過自定義導(dǎo)航界面，最終實(shí)現(xiàn)地圖導(dǎo)航功能。具體功能如下：

1）地圖查詢（可查詢學(xué)校的景點(diǎn)、辦公樓、院系、部門）

查詢地點(diǎn)是系統(tǒng)中的一個(gè)基本功能，查詢目標(biāo)地點(diǎn)，實(shí)現(xiàn)定位導(dǎo)航。在本系統(tǒng)中，設(shè)置了兩種查詢地點(diǎn)的方法：地圖直觀文字查詢和搜索框查詢。在地圖上給每棟建筑和活動(dòng)場(chǎng)地設(shè)置名稱，點(diǎn)擊建筑物改變區(qū)域顏色；搜索框查詢則根據(jù)每個(gè)場(chǎng)地的用途功能歸類為多個(gè)區(qū)域塊，然后利用jQuery Mobile中的可折疊塊細(xì)分每個(gè)功能區(qū)。

2）地圖導(dǎo)航

用戶可以在電子地圖上選擇始發(fā)點(diǎn)到終點(diǎn)的名稱，通過最短路徑的搜索，方便用戶快速知道到達(dá)目的地的最短最優(yōu)路線。路徑的選擇細(xì)分為車道和人行道，車道排除了階梯和小路擇最短路徑，不同的道路選擇應(yīng)對(duì)不同的用戶需求。

3）地圖預(yù)覽

地圖預(yù)覽是系統(tǒng)中的一個(gè)基本模塊，調(diào)用hammer js庫，實(shí)現(xiàn)地圖的縮放、平移的功能。在實(shí)現(xiàn)地圖的縮放和平移中，控制放大的最大限度和縮小的最小限度，控制平移的范圍，幫助用戶更方便地瀏覽地圖、查找地點(diǎn)。

4）GPS定位

Html5中提供了地理位置信息的API，通過瀏覽器來獲取用戶當(dāng)前位置。在獲取地理信息位置之前，瀏覽器會(huì)向用戶詢問是否愿意共享位置信息，待用戶同意之后瀏覽器將相關(guān)信息發(fā)送到一個(gè)信任的位置服務(wù)器，最后由服務(wù)器返回具體的地理位置并在地圖上用特殊標(biāo)識(shí)標(biāo)記出來。

5）編輯地圖底圖

用戶提供一張SVG格式的地圖底圖上傳到系統(tǒng)中，根據(jù)系統(tǒng)的糾錯(cuò)系統(tǒng)規(guī)范圖片，同時(shí)根據(jù)用戶需求自定義底圖顏色以及文字內(nèi)容，修改之后的底圖便可根據(jù)系統(tǒng)上的菜單來自定義地圖，從而實(shí)現(xiàn)地圖導(dǎo)航功能。

6）自定義控件

控件是平臺(tái)提供給用戶操作地圖的界面元素，其中有縮放平移控件、比例尺控件、版權(quán)控件，用戶可根據(jù)需求來自定義放大縮小倍數(shù)。

2.2 地圖導(dǎo)航開發(fā)系統(tǒng)的實(shí)現(xiàn)流程圖

3 系統(tǒng)主要功能實(shí)現(xiàn)

本系統(tǒng)以僑興校區(qū)為例，采用天地圖的衛(wèi)星地圖直接導(dǎo)入，通過SVG轉(zhuǎn)化為矢量圖，并通過人工踩點(diǎn)的方式進(jìn)行校準(zhǔn)，將校園的小路以及隱蔽點(diǎn)補(bǔ)上，減少底圖的誤差，收集校園內(nèi)建筑物、道路、河流的名稱與相關(guān)資料，為系統(tǒng)提供資料庫。

3.1 制作SVG地圖文檔

參考天地圖數(shù)據(jù)，以天地圖為底圖通過AI軟件分別對(duì)地圖對(duì)象、圖層對(duì)象和地物對(duì)象進(jìn)行編碼，其中地圖對(duì)象包含地圖名稱以及個(gè)圖層對(duì)象兩部分內(nèi)容；圖層對(duì)象包括圖層標(biāo)識(shí)，顯示式樣（如顏色，線型），圖層名稱以及所屬地物對(duì)象等；而地物對(duì)象包括屬性數(shù)據(jù)，幾何數(shù)據(jù)，注記以及與地物對(duì)象的交互信息等[4]。

地圖制作完成之后，將編號(hào)設(shè)置為無向網(wǎng)的每個(gè)頂點(diǎn)，路徑標(biāo)簽的長(zhǎng)度為v1，v2邊的權(quán)。并對(duì)道路截成不均等小邊，以便后續(xù)采用算法進(jìn)行路徑查詢使用[5]。最后隱藏編號(hào)，輸出SVG文檔，在瀏覽器中顯示。

以下是根據(jù)上述編碼原則所實(shí)現(xiàn)的某一區(qū)域的SVG文檔片段：

…

var colorAll='#99CCFF'；//全局顏色

function saveColorAndId（id）

{

precolor=document.getElementById（id）.getAttribute（'fill'）；

preid=id；//alert（'保存id：'+preid+'保存顏色'+precolor）；

}

function changeColor（id，color）//變色

{

document.getElementById（id）.setAttribute（'fill'，color）；

//alert（'執(zhí)行了變色'+color）；

}

…

3.2 實(shí)現(xiàn)最短路徑算法

在地圖上實(shí)現(xiàn)任意兩點(diǎn)的最短路徑，可將地圖路線直接抽象為無向圖，對(duì)于無向圖的最短路徑需求，普遍采用迪杰斯特拉（Dijkstra）算法來計(jì)算[6]。當(dāng)用戶設(shè)置起點(diǎn)和終點(diǎn)后，地圖會(huì)顯示出從起點(diǎn)到終點(diǎn)的一條最優(yōu)路徑，并使這條路徑變色。

Dijkstra算法偽代碼如下：

…

for （var i = 0； i < vertexNum； i++）

{

distCopy[i] = dist[i] = POS_INFINITY；

set[i] = false； }

distCopy[sourceV] = dist[sourceV] = 0；

while （count < vertexNum）

{

u = distCopy.indexOf（Math.min.apply（Math， distCopy））；

set[u] = true；

distCopy[u] = POS_INFINITY；

for （var i = 0； i < vertexNum； i++）

{

if （！set[i] && （（temp = dist[u] + adjMatrix[u][i]） < dist[i]））{

distCopy[i] = dist[i] = temp；

path[i] = u；

}

count++；

}

}

…

道路變色算法偽代碼如下：

…

for （i = 0； str[i + 1] ！= -1； i++）

{

Rstr[i + 1] = j = str[i + 1]；

Rstr[i] = k = str[i]；

s = k + "_" + j；

s1 = j + "_" + k；

c = document.getElementById（s）；

if （c == null）{ }

else

{

Rstrcolor[i] = c.getAttribute（'stroke'）；

c.setAttribute（'stroke'， 'red'）；

}

c1 = document.getElementById（s1）；

if （c1 == null）{ }

else {

Rstrcolor[i] = c1.getAttribute（'stroke'）；

c1.setAttribute（'stroke'， 'red'）；

}

}

…

3.3 用戶自定義地圖

1）用戶上傳一張地圖（SVG格式）同時(shí)提供地圖的經(jīng)緯度，系統(tǒng)創(chuàng)建一個(gè)預(yù)處理程序和解析器，在解析器里面分配事件處理程序[7]，使用JavaScript語言去解析SVG文檔。

SVG解析腳本如下：

…

< %

var svg， Root； 創(chuàng)建當(dāng)前活動(dòng) SVG 文檔的實(shí)例

Svg= evt. getTarget（） ； 獲取 SVG 文檔的根結(jié)點(diǎn)

Root= svg. getOwnerDocument（ ）；

% >

…

2）系統(tǒng)設(shè)置控制模式，實(shí)現(xiàn)圖層能在特定規(guī)則下工作，其中包括獲取圖層位置，加載矢量圖層以及修改圖層顏色等。

核心程序代碼如下：

…

Sysdir：=ExtraFilePath（Application.Exename）；

Dc：=IMoDataConnection（CreateOleObject（‘MapObjects2.DataConnection））；

Dc：Database：=sysdir+data＼；//獲得系統(tǒng)圖層所在位置

Map1.Layers.Add（Layer）；加載矢量圖層

Layer.symbol.symbolType：=table1.filedbyname（'color'）.Value； 設(shè)置圖層顏色

…

4 系統(tǒng)測(cè)試

為了驗(yàn)證系統(tǒng)實(shí)現(xiàn)的功能和穩(wěn)定性，對(duì)系統(tǒng)進(jìn)行了全面的測(cè)試，在課題主要對(duì)系統(tǒng)的定位、最短路徑以及可供用戶自定義地圖并導(dǎo)入功能進(jìn)行了多次測(cè)試和修改，最終系統(tǒng)得以正常運(yùn)行。以下給出了測(cè)試中部分圖片和測(cè)試數(shù)據(jù)。

4.1 最短路徑功能測(cè)試

在校園導(dǎo)航系統(tǒng)中，我們選取多個(gè)地點(diǎn)，先通過搜索功能找到起點(diǎn)的位置，也可直接點(diǎn)擊作為起點(diǎn)的建筑物，同理，找到終點(diǎn)位置，點(diǎn)擊“到這里”。經(jīng)測(cè)試，有98%的路線與現(xiàn)實(shí)符合，均能到達(dá)目的地。效果如圖：

4.2 定位測(cè)試

在校園導(dǎo)航的定位測(cè)試中，我們選取的點(diǎn)有：網(wǎng)絡(luò)中心、科技樓、圖書館大樓、綜合實(shí)訓(xùn)樓、教學(xué)樓1、教學(xué)樓3、學(xué)生公寓5、石竹餐廳以及路上選取的一些點(diǎn)，共測(cè)試了50組數(shù)據(jù)，其精度和次數(shù)如下表所示：

4.3 用戶自定義地圖

對(duì)用戶自定義地圖功能測(cè)試，如下：

5 總結(jié)與展望

通過基于SVG技術(shù)所開發(fā)的地圖導(dǎo)航開發(fā)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)，用僑興校區(qū)作為實(shí)例充分展現(xiàn)了該系統(tǒng)具有交互功能強(qiáng)、成本低、易于操作和管理等優(yōu)勢(shì)，它使得生活中的應(yīng)用和地理信息的傳播更加方便和大眾化。隨著互聯(lián)網(wǎng)與計(jì)算機(jī)的不斷發(fā)展，人機(jī)交互的深入，使得用戶對(duì)地圖平臺(tái)的設(shè)計(jì)提出更加趨于人性化的要求。其次，健全高校以及鄉(xiāng)村旅游導(dǎo)航數(shù)字化建設(shè)也全給我們帶來新挑戰(zhàn)。

參考文獻(xiàn)：

[1] 成功，楊亞.主流地圖應(yīng)用程序接口在地圖質(zhì)量和實(shí)用功能上的對(duì)比分析[J].地理信息世界，2016，23（5）：41-45.

[2] 夏玉杰，翟艷磊.基于Mitab庫的嵌入式GIS地圖導(dǎo)航設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與設(shè)計(jì)，2011，32（4）：1303-1306.

[3] 羅才鮮，余遠(yuǎn)波，王國(guó)樹.基于 Android平臺(tái)的海醫(yī)校園導(dǎo)航系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].應(yīng)用交流，2016（5）：57-59.

[4] 武文波，孫國(guó)平，鄒建成.基于SVG技術(shù)的WebGIS地圖研究與制作[J].水資源與水工程學(xué)報(bào)，2008，19（4）：16-19.

[5] 李廣麗，張紅斌.基于JavaScript 腳本技術(shù)的SVG 文檔的DOM解析[J].計(jì)算機(jī)與現(xiàn)代化，2005（1）：111-113.

[6] 王樹西，李安渝.Dijkstra算法中的多鄰接點(diǎn)與多條最短路徑問題[J].計(jì)算機(jī)科學(xué)，2014，41（6）：217-228.

[7] 袁斌.GML地圖控件的設(shè)計(jì)與實(shí)現(xiàn)[J].測(cè)繪工程，2012，21（2）：64-69.