基于JavaScript的美麗鄉(xiāng)村快速查詢與交互方法?

戴璐鸞 張 曼 冉桂華 李 蝶 殷浤益 楊元維

（1.長江大學(xué) 武漢 430100）（2.西安市勘察測繪院 西安 710054）

1 引言

隨著鄉(xiāng)村旅游業(yè)與GIS技術(shù)飛速發(fā)展，基于GIS的美麗鄉(xiāng)村旅游正逐步成為城市名片的重要因素［1］。由于鄉(xiāng)村旅游信息傳統(tǒng)查詢與交互模式中，鄉(xiāng)村中的景點、農(nóng)家樂、賓館、公交線路等信息大多仍以圖片或文字等傳統(tǒng)形式展現(xiàn)，美麗鄉(xiāng)村查詢檢索系統(tǒng)無法快速、全面、動態(tài)地展現(xiàn)美麗鄉(xiāng)村發(fā)展成果及旅游相關(guān)信息。目前美麗鄉(xiāng)村信息化建設(shè)亟需一個信息豐富、功能完善且能結(jié)合當?shù)孛利愢l(xiāng)村特色吸引游客的信息發(fā)布及查詢平臺。因此，本文提出了基于JavaScript的美麗鄉(xiāng)村快速查詢與交互方法并研制系統(tǒng)原型。其核心功能主要包含關(guān)鍵字信息的快速檢索、基于空間位置的快速查詢和基于事件驅(qū)動的查詢結(jié)果交互等功能。最終可根據(jù)當?shù)靥厣珜ｎ}信息進行結(jié)合發(fā)布，使游客可以通過快速查詢及交互功能了解美麗鄉(xiāng)村的信息。

2 基于jQuery關(guān)鍵字信息快速檢索

美麗鄉(xiāng)村GIS專題數(shù)據(jù)種類繁多，其中部分實體名稱相近，比如“安吉百匯大酒店”與“安吉美林大酒店”、“安吉深溪村”與“安吉大溪村”等，名稱相近可能會導(dǎo)致搜索結(jié)果不準確等問題。此外，美麗鄉(xiāng)村信息系統(tǒng)的屬性查詢功能是依據(jù)用戶在搜索欄中輸入的條件在數(shù)據(jù)中進行動態(tài)檢索，實現(xiàn)動態(tài)交互。若采用傳統(tǒng)的結(jié)構(gòu)化查詢語言（Structured Query Language，SQL）實現(xiàn)搜索查詢會出現(xiàn)信息量過載的問題，導(dǎo)致效率降低［2～4］。本文采用基于jQuery關(guān)鍵字信息檢索，以提供快速高效的檢索。

2.1 基于jQuery關(guān)鍵字信息快速檢索設(shè)計

關(guān)鍵字快速檢索設(shè)計思路為發(fā)布基于ArcGIS Server美麗鄉(xiāng)村專題地圖服務(wù)，通過ArcGIS API for JavaScript動態(tài)獲取服務(wù)中的要素集屬性，將得到的屬性數(shù)據(jù)轉(zhuǎn)換為Json文件；然后JQuery讀取Json文件內(nèi)容，接受輸入關(guān)鍵字同時觸發(fā)檢索框文本變化事件并進行字符串自動匹配，匹配到相關(guān)字符串則表示匹配成功，然后返回結(jié)果并結(jié)束查找；最終將檢索到的結(jié)果按照autoFill設(shè)置優(yōu)先級排序并進行結(jié)果列表裝填。如圖1所示。

圖1 快速檢索設(shè)計思想

2.2 關(guān)鍵字信息快速檢索實現(xiàn)

本文采用JQuery插件實現(xiàn)信息檢索。通過對遠程美麗鄉(xiāng)村專題服務(wù)統(tǒng)一資源標識符調(diào)用，返回Json類型的結(jié)果作為檢索的數(shù)據(jù)源，并作為參數(shù)帶入回調(diào)函數(shù)，實現(xiàn)自動匹配并返回匹配提示結(jié)果。按照信息快速檢索設(shè)計，關(guān)鍵代碼為$input.bind（（$.browser.opera？“keypress”：“keydown”）+“.auto?complete”，function（event）；進行搜索時，當匹配到相關(guān)字符則停止搜索并返回結(jié)果，此時的結(jié)果處于無序狀態(tài)，通過autocomplete中的autoFill對搜索結(jié)果進行優(yōu)先級排序。

關(guān)鍵字檢索適用于用戶輸入已知的“部分”或“全稱”內(nèi)容進行檢索，例如：在搜索框中輸入“安”，獲取到包括“安”的遠程美麗鄉(xiāng)村專題服務(wù)中的動態(tài)搜索結(jié)果，如圖2（a）所示。再進一步輸入“安吉”時則再次刷新顯示的結(jié)果，查詢范圍也相應(yīng)縮小至僅包括“安吉”的專題信息，如圖2（b）所示。

圖2 關(guān)鍵字信息快速檢索結(jié)果展示

3 基于JavaScript的美麗鄉(xiāng)村快速查詢

3.1 面向資源的REST地理信息服務(wù)

表示性狀態(tài)轉(zhuǎn)移（Representational State Trans?fer，REST）是一種設(shè)計架構(gòu)的風(fēng)格，REST式服務(wù)有兩種狀態(tài)——資源狀態(tài)和應(yīng)用狀態(tài)，客戶端應(yīng)用通過URI來獲取資源，獲取這些資源致使這些應(yīng)用程序轉(zhuǎn)變其狀態(tài)客戶端應(yīng)用。面向資源架構(gòu)（Re?sourse-Oriented Architecture，ROA）是一個具體的REST式架構(gòu)［5～6］。GIS資源依托于服務(wù)存在，本文基于ROA并采用多源美麗鄉(xiāng)村專題信息服務(wù)融合技術(shù)，實現(xiàn)不同來源及坐標參考的地理地圖、影像地圖和美麗鄉(xiāng)村專題地圖服務(wù)的有機融合，其中專題地圖服務(wù)通過ArcGIS Server發(fā)布，不僅滿足本文對其服務(wù)的調(diào)用，更能夠提供給其他對象如政府部門或相關(guān)企業(yè)調(diào)用，實現(xiàn)地理信息資源服務(wù)的融合與共享。

3.2 面向資源的美麗鄉(xiāng)村空間信息快速查詢

本文采用面向資源的方式實現(xiàn)美麗鄉(xiāng)村空間信息的快速查詢，主要利用JavaScript技術(shù)實現(xiàn)輕量級的空間信息查詢。ArcGIS API for JavaScript是一套WebGIS應(yīng)用程序編程接口框架，為創(chuàng)建Web?GIS應(yīng)用提供了輕量級的解決方案，能夠快速創(chuàng)建交互式的底圖應(yīng)用［7～9］。美麗鄉(xiāng)村空間信息快速查詢調(diào)用天地圖的地圖作為底圖，再融合多源美麗鄉(xiāng)村專題地圖服務(wù)。采用封裝的地圖接口以模塊方式加載地圖并進行刷新和初始化，以減輕網(wǎng)絡(luò)負載量，實現(xiàn)不同來源地圖服務(wù)無縫拼接?？臻g數(shù)據(jù)最主要特征是空間特征［10～11］。本文實現(xiàn)了多種類型的美麗鄉(xiāng)村專題信息的快速查詢功能，功能流程如圖3所示。

圖3 快速查詢流程圖

以矩形查詢?yōu)槔?，在地圖上拉框繪制任意矩形，用geometry接口存放繪制矩形形狀信息；調(diào)用查詢方法，并以矩形形狀信息為參數(shù)，實現(xiàn)該矩形與美麗鄉(xiāng)村專題要素信息的空間分析，返回分析結(jié)果；對結(jié)果進行可視化，首先進行地圖渲染，查詢結(jié)束后，循環(huán)遍歷查詢圖形元素對象，對每個圖形元素都創(chuàng)建一個圖片標記樣式，設(shè)置點樣式，圖形元素獲得渲染樣式后，用GraphicsLayer渲染到地圖上，同理，循環(huán)遍歷查詢對象，每個對象都創(chuàng)建一個文本符號，并設(shè)置樣式，同時對每個對象依次編號，渲染到紅色圖標上并設(shè)置適當?shù)钠莆恢茫蛔詈筮M行結(jié)果列表填充，地圖渲染的同時，在結(jié)果列表容器中根據(jù)查詢結(jié)果的數(shù)量動態(tài)循環(huán)創(chuàng)建表單，結(jié)果列表填充內(nèi)容編號與地圖渲染的圖標相一致。

繪制如圖4（a）所示矩形，并將該矩形與美麗鄉(xiāng)村專題信息進行空間分析，即時返回分析結(jié)果；最后將該結(jié)果進行可視化操作，具體分為地圖可視化，渲染對應(yīng)的紅色標記和編號，同時填充結(jié)果列表，如圖4（b）所示。

圖4 矩形查詢

查詢不同數(shù)量的點執(zhí)行時間獲取結(jié)果如圖5所示，查詢50個點執(zhí)行的時間是145.61ms，查詢100個點執(zhí)行的時間是215.90ms，查詢200個點執(zhí)行的時間是568.44ms。

圖5 矩形查詢執(zhí)行時間

對圖5進行對比分析可得，隨著查詢點數(shù)的增多，獲取到的查詢執(zhí)行時間并不會特別明顯地增加。本文主要采用數(shù)據(jù)分頁顯示和Ajax技術(shù)實現(xiàn)高效率查詢。在瀏覽網(wǎng)頁時，數(shù)據(jù)分頁顯示是一種優(yōu)先選擇的方法。在傳統(tǒng)的web技術(shù)中，分頁顯示的相關(guān)操作都是在服務(wù)器端進行的，服務(wù)器端獲取客戶端的請求分頁，并根據(jù)請求頁數(shù)獲取指定的結(jié)果集。最后把結(jié)果集中的數(shù)據(jù)返回到客戶端，這時返回結(jié)果中不但包含了數(shù)據(jù)，還可能包含了數(shù)據(jù)的顯示樣式?？蛻舳说拿恳淮螖?shù)據(jù)更新，均會重新打開一個網(wǎng)頁，如果網(wǎng)頁中包含了很多html元素，就會造成網(wǎng)頁打開速度較慢的情況［12～14］。使用Ajax技術(shù)可以很好地彌補了這些問題，服務(wù)器端只傳輸數(shù)據(jù)庫表中的數(shù)據(jù)，客戶端獲取這些數(shù)據(jù)只更新局部內(nèi)容，與數(shù)據(jù)無關(guān)的其他元素保持不變。所以點數(shù)增多的同時，執(zhí)行時間沒有暴增。

4 基于事件驅(qū)動的查詢結(jié)果交互機制

通過點擊鼠標或者鍵盤在瀏覽器窗口或者網(wǎng)頁元素上執(zhí)行的操作，稱之為事件。由鼠標或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅(qū)動。對事件進行處理的程序或函數(shù)，稱之為事件處理程序［15］。

4.1 結(jié)果列表與地圖的互動

事件對象為查詢后的結(jié)果列表，事件類型有鼠標懸停和鼠標離開。

1）通過鼠標懸停事件修改列表中鼠標懸停要素顏色，并根據(jù)列表返回的值在地圖上繪制藍色的符號。關(guān)鍵操作：獲取列表中當前鼠標所在的要素并將顏色由紅色修改為藍色；新建一個圖形對象，將選中的對象和從文件中獲取到的藍色圖標的圖片作為參數(shù)；最后將新建的圖形對象添加到地圖上。

2）通過鼠標離開事件修改列表要素顏色為紅色，清空地圖符號圖層。關(guān)鍵操作：獲取到列表中當前鼠標所在的要素并將顏色修改為紅色；清空地圖符號圖層。

4.2 地圖與結(jié)果列表的互動

事件對象為地圖圖層，事件類型有鼠標懸停和鼠標離開。

1）通過鼠標懸停事件將列表中與地圖中鼠標懸停要素對應(yīng)要素顏色修改為藍色，并將紅色符號的圖片換成藍色的。關(guān)鍵操作：新建一個圖形對象，將選中的對象和從文件中獲取到的藍色圖標的圖片作為參數(shù)；將新建的圖形對象添加到地圖上。

2）通過鼠標離開事件修改列表中對應(yīng)要素的顏色為紅色，并修改符號為紅色。關(guān)鍵操作：清空地圖符號圖層；獲取到地圖中當前鼠標所在的要素并將藍色修改為紅色，設(shè)置圖標的大小。

4.3 實例應(yīng)用及結(jié)果分析

如圖6（a）所示，鼠標懸停在結(jié)果列表的“和春大酒店”時，要素由紅變藍，地圖上對應(yīng)的要素也由紅變藍；如圖6（b）所示，鼠標離開結(jié)果列表時，要素恢復(fù)為紅色；如圖6（c）所示，鼠標再次懸停在“萬竹大酒店”時，地圖上對應(yīng)的要素由紅變藍。

圖6 結(jié)果列表與地圖的互動

如圖7（a）所示，鼠標懸停在地圖的“廣場社區(qū)”時，要素由紅變藍，結(jié)果列表上對應(yīng)的要素也由紅變藍；如圖7（b）所示，鼠標離開該要素，要素恢復(fù)為紅色；如圖7（c）所示，鼠標再次懸停在“山頭社區(qū)”時，結(jié)果列表上對應(yīng)的要素由紅變藍。

圖7 地圖與結(jié)果列表的互動

通過事件驅(qū)動機制實現(xiàn)查詢結(jié)果與地圖交互，使得用戶可以快速便捷地定位到專題要素上去。

5 結(jié)語

本文對提出的基于JavaScript的美麗鄉(xiāng)村快速查詢與交互方法進行實踐并對結(jié)果進行分析，證明了此方法的高效性和可行性。此方法的實現(xiàn)可以將美麗鄉(xiāng)村的更多信息以更形象的方式呈現(xiàn)給旅客，為旅客的旅程提供便利，同時可以讓美麗鄉(xiāng)村更好地進入大眾視野。