摘要：以重慶市北碚城區(qū)為例，采用HTML5標(biāo)準(zhǔn)，運用地理信息系統(tǒng)技術(shù)、移動互聯(lián)網(wǎng)及網(wǎng)絡(luò)開發(fā)技術(shù)，進(jìn)行基于移動RIA和WebGIS的網(wǎng)絡(luò)平臺設(shè)計與實現(xiàn)。完成以地理信息服務(wù)為載體的新型街區(qū)購物平臺。將地理信息服務(wù)應(yīng)用于傳統(tǒng)網(wǎng)上購物，把網(wǎng)上瀏覽和線下實體店購物結(jié)合，探索一種新的購物模式。

關(guān)鍵詞：移動RIA；WebGIS；購物平臺

1 研究背景與目的

電子商務(wù)與傳統(tǒng)商務(wù)模式各有優(yōu)缺點。一方面，目前電子商務(wù)主要采用B2B，B2C和C2C等商業(yè)模式，這種純虛擬購物模式經(jīng)營服務(wù)范圍廣泛，便于商家通過網(wǎng)絡(luò)推廣商品。但是，它缺乏本地化、現(xiàn)實性和靈活性等服務(wù)特性，相關(guān)法律還有待進(jìn)一步完善，時常發(fā)生消費者合法權(quán)益遭受侵害的事件。另一方面，傳統(tǒng)購物方式能實現(xiàn)面對面交流，讓消費者享受較好的售后服務(wù)，而且相關(guān)法律也比較健全。但是，城市之中實體店布局分散，消費者難以全面了解商品店鋪的信息。以至于其在尋找適合自己所需商品的實體店過程中會花費大量的時間和精力。同時，商鋪知名度也僅僅能覆蓋到其周邊的有限地區(qū)，銷售對象比較單一，影響范圍不夠大，限制了商家拓展市場和增加銷售額的營業(yè)需求。因此，整合網(wǎng)上購物與實體店購物的優(yōu)勢，探索一種更安全便捷的購物新方式，成為消費者和商家共同的社會需求。

本文擬通過將HTML5移動富客戶端開發(fā)技術(shù)和WebGIS技術(shù)結(jié)合，把網(wǎng)上瀏覽和線下實體店購物結(jié)合，基于地理信息服務(wù)，搭建一個面向Android移動端的街區(qū)購物平臺。讓消費者可以基于地圖，進(jìn)行店面瀏覽、商品瀏覽、空間定位、路徑導(dǎo)航及各種復(fù)雜空間分析等，同時為商家擴(kuò)大宣傳、拓展市場提供便利。

2 技術(shù)支撐

本系統(tǒng)采用以HTML5為代表的新一代移動富客戶端技術(shù)，利用HTML5、CSS3和JavaScript的技術(shù)組合進(jìn)行Web前端開發(fā)，對于簡單的地圖瀏覽功能，在客戶端完成，復(fù)雜的空間查詢與分析任務(wù)則由服務(wù)器完成，之后將結(jié)果傳送到客戶端進(jìn)行輸出。其中，涉及到的關(guān)鍵技術(shù)及其實現(xiàn)介紹如下：

（1）HTML5標(biāo)準(zhǔn)下的關(guān)鍵技術(shù)

Canvas元素：Canvas元素是HTML5的一部分，允許腳本語言動態(tài)渲染位圖像。在本街區(qū)購物平臺設(shè)計中，一方面，在Canvas下，通過 JavaScript語言調(diào)用Google Maps API，將功能強(qiáng)大的 Google 地圖服務(wù)潛入到本系統(tǒng)平臺中，作為系統(tǒng)界面底圖。另一方面，在Canvas構(gòu)建的界面畫布上，通過調(diào)用WebGL API進(jìn)行硬件3D加速渲染，結(jié)合相關(guān)店面的柵格圖像資料，對店面進(jìn)行三維場景展示。

進(jìn)行數(shù)據(jù)本地緩存，實現(xiàn)離線應(yīng)用：HTML5中新增的Web storage存儲機(jī)制可以進(jìn)行key/value方式的數(shù)據(jù)存儲，以特定的網(wǎng)絡(luò)數(shù)據(jù)如地圖信息等進(jìn)行本地緩存。本研究項目主要通過調(diào)用其API，利用Web storage的sessionstorage 和localstorage兩種本地存儲類型，實現(xiàn)地圖數(shù)據(jù)緩存。

（2）空間地理位置信息服務(wù)的實現(xiàn)

多方位置共享：本系統(tǒng)提供多方位置共享功能，通過調(diào)用手機(jī)內(nèi)置GPS提供的接口，獲取自身位置信息；同時利用Web SOCKET即“套接字”技術(shù)，建立服務(wù)器和客戶端的通信，進(jìn)行用戶位置信息共享。

空間分析服務(wù)：本購物平臺服務(wù)器端采用ArcGIS Sever作為GIS服務(wù)器，基于ArcObject 基礎(chǔ)類庫，提供強(qiáng)大的空間分析功能。

其它輔助技術(shù)：本系統(tǒng)在開發(fā)模式上選擇基于組件式Web開發(fā)——Sencha Touch，利用PhoneGap技術(shù)實現(xiàn)對客戶端軟硬件資源的調(diào)用，基于Ajax異步傳輸技術(shù)，實現(xiàn)地圖顯示與數(shù)據(jù)傳輸?shù)漠惒交?，增?qiáng)用戶視覺體驗。

3功能模塊設(shè)計與實現(xiàn)

本平臺將現(xiàn)實中的實體店虛擬化，在相對應(yīng)的地圖中進(jìn)行標(biāo)注和展示。主要面向用戶為：店家、消費者。功能模塊劃分也從兩個角度進(jìn)行，具體如下：

消費者：

一、 瀏覽

提供兩種商品瀏覽方式：一是基于地理位置，從地圖中找到相應(yīng)位置的店面，然后對店面里的商品進(jìn)行瀏覽。二是基于商品或店面屬性，在興趣點搜索窗口中，輸入屬性信息，查詢和定位到相應(yīng)屬性的店面和商品。

1、 常規(guī)：放大、縮小、漫游、鷹眼；2、基于三維場景，進(jìn)行自動漫游，實現(xiàn)模擬逛街；

二、查詢

1、 基于屬性字段查詢：基于商品名稱及類別查詢；基于商品價位查詢；基于名稱關(guān)鍵字查詢店面；2、 基于空間位置查詢

三、定位

1、確定自己的位置；2、多方好友位置信息共享，并標(biāo)示于地圖上；3、可以設(shè)置共同興趣點，共享位置信息，并顯示在用戶移動端地圖上，便于多方用戶快速便捷地向目標(biāo)店面聚集，使雙方在購物時便捷地進(jìn)行會合碰面。

四、導(dǎo)航

1、產(chǎn)生距離最短距離路徑；2、產(chǎn)生加權(quán)最佳路徑（前提：生成產(chǎn)品價格分布插值圖后，為購買商品進(jìn)行路徑規(guī)劃，設(shè)置價錢和距離所占比重，生成最佳路徑）；

五、店面參觀

1、觀看店面場景的三維展示；

2、了解店面的訪問量、評價和某些商品的評價；店家：對于店家，提供服務(wù)有：（1）、常規(guī)方面：1） 在虛擬店中上傳商品。采集相關(guān)商品照片，添加相關(guān)注釋說明后由手機(jī)端上傳到服務(wù)器，進(jìn)行各自網(wǎng)店的商品添加；2） 通過手機(jī)端對商品進(jìn)行增刪等常規(guī)管理。（2）、特色服務(wù)：1）店家可以利用系統(tǒng)平臺，將自己店面的基本信息如：位置，電話，QQ，郵編，網(wǎng)址等整合，通過平臺相關(guān)模塊，生成二維碼，將其利用到網(wǎng)頁和其它宣傳版面，便于店面宣傳；2） 系統(tǒng)提供鏈接模塊接口，供用戶將自身店面的音視頻廣告鏈接到地圖上相對應(yīng)的店面屬性中，可以讓消費者點擊查看廣告；3）進(jìn)行店面三維場景展示。

4.結(jié)語

綜上所述，基于移動RIA和WebGIS技術(shù)構(gòu)建一個街區(qū)購物平臺是切實可行的。一方面，采用最新的HTML5標(biāo)準(zhǔn)，旨在突破傳統(tǒng)插件技術(shù)的限制，探索新興技術(shù)的運用，以便達(dá)到網(wǎng)絡(luò)應(yīng)用無插件，提高網(wǎng)絡(luò)運行速度，減少安全隱患和改進(jìn)用戶友好體驗的目的。另一方面，探索將HTML5與WebGIS技術(shù)相結(jié)合，搭建街區(qū)購物平臺，充分利用兩種購物方式的優(yōu)勢，探索一個新的購物模式，達(dá)到商業(yè)盈利和服務(wù)消費者的目標(biāo)。消費者通過這一平臺，既可以在手機(jī)移動端方便地瀏覽感興趣的店面和商品，又可以在地圖上定位店鋪和多個好友的具體空間位置，獲取路線規(guī)劃等空間分析服務(wù)以節(jié)約時間成本。商家通過這一平臺，可以將自己店鋪的相關(guān)信息發(fā)布到平臺網(wǎng)站上，以便消費者進(jìn)行瀏覽查詢，同時可以對店面進(jìn)行三維場景展示，這不失為一種擴(kuò)大宣傳和提升店面整體形象的良好機(jī)會。方式。因此，基于移動RIA和WebGIS技術(shù)構(gòu)建的城市街區(qū)購物平臺，具有商業(yè)前景與社會價值。（作者單位：西南大學(xué)地理科學(xué)學(xué)院）

參考文獻(xiàn)：

[1]杜鵑. 電子商務(wù)之內(nèi)涵簡析及其與傳統(tǒng)商務(wù)的關(guān)系[J]. 產(chǎn)業(yè)觀察，2011，10（3），p.104-105.

[2]許寧. 020電子商務(wù)商業(yè)新模式探析[J].中國電子商務(wù)，2013（1），p.3.

[3]朱洪軍. 基于GIS的移動終端LBS系統(tǒng)建設(shè)與實現(xiàn)[D].華東師范大學(xué)，2008.

[4]徐莎，楊帆，徐昌慶. 基于HTML5的WebGIS的研究與應(yīng)用[J].信息技術(shù)，2012（4），p.149-151.