基于SVG格式的遠(yuǎn)洋客船電子地圖顯示模塊構(gòu)建

石粟萍，張怡敏,2，楊山林，胡曉軒,2

(1.上海申博信息系統(tǒng)工程有限公司，上海 200032；2.上海船舶工藝研究所，上海200032)

0 引 言

近年來，集旅游度假和休閑娛樂為一體的郵船旅行逐漸成為國內(nèi)一種新興的旅游方式。2018年，交通運(yùn)輸部等十部門聯(lián)合發(fā)布的文件明確提出，至2035年，我國郵船市場成為全球較具活力市場之一，郵船自主設(shè)計(jì)建造和郵船船隊(duì)發(fā)展取得突破，體系完善、效率顯著的郵船產(chǎn)業(yè)鏈基本形成，郵船經(jīng)濟(jì)規(guī)模不斷擴(kuò)大，對城市轉(zhuǎn)型、產(chǎn)業(yè)升級、經(jīng)濟(jì)發(fā)展和人民消費(fèi)的支撐力和保障作用顯著增強(qiáng)；郵船旅客年運(yùn)輸量將達(dá)1 400萬人次[1]。2019年，郵船經(jīng)濟(jì)進(jìn)入全產(chǎn)業(yè)鏈構(gòu)建階段。大型郵船具有高自持力的特點(diǎn)，是典型的超大空間生活平臺，需要為乘員提供導(dǎo)航路徑規(guī)劃、商品導(dǎo)購和資源引導(dǎo)等網(wǎng)絡(luò)化服務(wù)，是“互聯(lián)網(wǎng)+”背景下的遠(yuǎn)洋客船產(chǎn)業(yè)升級創(chuàng)新表現(xiàn)之一。

電子地圖是構(gòu)建遠(yuǎn)洋客船網(wǎng)絡(luò)化服務(wù)平臺的基礎(chǔ)。由于移動物品較多和公共區(qū)域布局時常需要臨時改動，使遠(yuǎn)洋客船環(huán)境具有動態(tài)性和復(fù)雜性等特點(diǎn)，因此傳統(tǒng)電子地圖的制作效率和精度難以滿足實(shí)際應(yīng)用要求。有些電子地圖軟件不提供二次開發(fā)的接口或無法作為組件嵌入其他平臺系統(tǒng)，使遠(yuǎn)洋客船電子地圖無法廣泛應(yīng)用和推廣?；诳煽s放矢量圖形(Scalable Vector Graphics，SVG)格式的遠(yuǎn)洋客船電子地圖顯示模塊構(gòu)建技術(shù)則提供一種具有人性化高、使用范圍廣和適配性強(qiáng)等特點(diǎn)的電子地圖顯示平臺，并可為后續(xù)遠(yuǎn)洋客船實(shí)現(xiàn)全船網(wǎng)絡(luò)化和多種個性化網(wǎng)絡(luò)平臺應(yīng)用提供堅(jiān)實(shí)的電子地圖顯示技術(shù)支持。

1 SVG技術(shù)特點(diǎn)

SVG是一種基于可擴(kuò)展標(biāo)記語言(Extensible Markup Language，XML)開放標(biāo)準(zhǔn)的矢量圖形語言。由于SVG完全采用純文本描述，因此SVG格式的圖像可使用任何文字處理工具打開。使用者可直接采用代碼描繪圖像，通過修改部分代碼，使圖像具有互交功能，并可隨時插入超文本標(biāo)記語言(Hypertext Markup Language)通過瀏覽器查看編輯[2]。

作為為互聯(lián)網(wǎng)應(yīng)用而定制的圖像格式，SVG優(yōu)點(diǎn)如下：基于XML圖像標(biāo)準(zhǔn)的純文本圖像格式，文本可搜索；高質(zhì)量的美觀圖案，放大縮小不失真；可擴(kuò)展的文件格式使每個電子地圖元素對象化，矢量圖形、點(diǎn)陣圖像和文本等3種對象均可存在并可進(jìn)行單獨(dú)操作；傳輸效率高，壓縮的數(shù)據(jù)無須解壓處理，可通過SVG解析器直接渲染并顯示；尤為重要的是，Web的應(yīng)用優(yōu)點(diǎn)支持用戶與圖像交互，對網(wǎng)絡(luò)和智能設(shè)備的性能要求低、兼容性強(qiáng)；支持動畫和交互，具有設(shè)計(jì)完善的DOM接口，并內(nèi)置對JavaScript的支持，支持互聯(lián)網(wǎng)絕大多數(shù)電子地圖用戶的訪問需求和應(yīng)用要求[3-4]。

2 電子地圖顯示模塊功能需求

基于顯示功能需求，采用SVG格式構(gòu)建遠(yuǎn)洋客船電子地圖顯示模塊更具有優(yōu)勢。

(1)電子地圖顯示

支持以多種模式進(jìn)行甲板電子地圖顯示，用戶可分層查看、瀏覽單一樓層或多層同時顯示；支持電子地圖的放大、縮小、平移、選擇等操作；支持用戶進(jìn)行起止點(diǎn)的導(dǎo)航路徑設(shè)置并實(shí)現(xiàn)路徑的自動生成；支持用戶查看和隱藏電子地圖不同種類的標(biāo)注。

(2)電子地圖接口

面向遠(yuǎn)洋客船個性化網(wǎng)絡(luò)服務(wù)發(fā)展和用戶體驗(yàn)需求，需要完整可靠地提供完善的調(diào)用接口，提供可二次開發(fā)的接口，設(shè)計(jì)并封裝開發(fā)可利用的JavaScript交互調(diào)用應(yīng)用程序接口(Application Programming Interface，API)，形成可重用的電子地圖Web組件，實(shí)現(xiàn)與其他移動應(yīng)用App需求和網(wǎng)絡(luò)化應(yīng)用的有效對接。

(3)電子地圖適配

需要適配多種不同類型和不同屏幕尺寸的終端，例如：手機(jī)/平板計(jì)算機(jī)等移動終端、臺式計(jì)算機(jī)/一體機(jī)等固定終端及網(wǎng)絡(luò)化集控中心的管理監(jiān)控大屏，同時兼容不同品牌的顯示終端。

(4)電子地圖存儲

數(shù)據(jù)需要符合目前公認(rèn)的元數(shù)據(jù)標(biāo)準(zhǔn)、數(shù)據(jù)交換標(biāo)準(zhǔn)、符號標(biāo)準(zhǔn)等多項(xiàng)實(shí)用作業(yè)規(guī)范標(biāo)準(zhǔn)，以便與其他信息系統(tǒng)實(shí)現(xiàn)有效的數(shù)據(jù)交換。數(shù)據(jù)采用序列化的JavaScript對象表示法(JavaScript Object Notation，JSON)格式進(jìn)行存儲，并以持久化的方式存儲于數(shù)據(jù)庫MySQL[5]，可以文件形式導(dǎo)出進(jìn)行存儲。

3 基于SVG格式的電子地圖設(shè)計(jì)理念

針對遠(yuǎn)洋客船電子地圖顯示需求，結(jié)合SVG技術(shù)的主要設(shè)計(jì)理念[6]如下：

(1)簡單靈活

SVG為純文本格式，圖形的點(diǎn)、線和面的數(shù)量均會直接影響電子地圖占用的存儲容量。為提高網(wǎng)絡(luò)應(yīng)用中的傳輸效率、節(jié)省服務(wù)器的存儲空間、加快電子地圖的更新速率，在保證元素完整的情況下，圖形應(yīng)盡可能簡單明了。

(2)完整準(zhǔn)確

面向多種用戶和多項(xiàng)網(wǎng)絡(luò)化應(yīng)用，艙室情況和布置內(nèi)容應(yīng)足夠完整地體現(xiàn)，如休息娛樂區(qū)域標(biāo)注、電梯和樓梯等通行節(jié)點(diǎn)位置標(biāo)注等。精度需要滿足后續(xù)引入的高精度位置服務(wù)需求，并為個性化網(wǎng)絡(luò)服務(wù)平臺的構(gòu)建提供準(zhǔn)確的電子地圖顯示技術(shù)支持。

(3)人性化服務(wù)

主題設(shè)計(jì)除符合通用標(biāo)準(zhǔn)外，應(yīng)考慮人性化要素。乘員需要在復(fù)雜的客船內(nèi)部快速準(zhǔn)確地找到目的地信息，要求電子地圖面向不同類型乘員可有效展現(xiàn)其關(guān)注的內(nèi)容，如針對游客重點(diǎn)顯示娛樂休閑區(qū)域相關(guān)內(nèi)容，針對工作人員重點(diǎn)顯示服務(wù)區(qū)域，以此為提供個性化位置服務(wù)推薦夯實(shí)基礎(chǔ)[7]。

4 主要功能實(shí)現(xiàn)

基于SVG的遠(yuǎn)洋客船電子地圖顯示模塊不僅應(yīng)具備顯示功能，可作為獨(dú)立模塊單獨(dú)使用，而且應(yīng)提供可二次開發(fā)的接口函數(shù)，可集成于其他網(wǎng)絡(luò)化平臺系統(tǒng)，提供底層電子地圖服務(wù)。

4.1 顯示功能

以某遠(yuǎn)洋客船為例，采用基于SVG的電子地圖顯示模塊實(shí)現(xiàn)主要功能。

(1)層級表示

甲板由客艙、休閑娛樂區(qū)域、電梯和樓梯等節(jié)點(diǎn)組成，SVG二維平面電子地圖采用多層表達(dá)，分層以各層甲板標(biāo)高為準(zhǔn)，采取疊加校核，在上層甲板優(yōu)先確保電梯和樓梯等連接上下層的通行節(jié)點(diǎn)位置一致。兩層相連甲板平面圖如圖1和圖2所示，連接上下層的通行節(jié)點(diǎn)一致。

圖1 10層甲板平面圖

圖2 11層甲板平面圖

(2)基本操作

基于SVG的電子地圖顯示模塊插件可通過對鼠標(biāo)操作的讀取，提供平移、拖動和縮放等基本操作，提供放大和縮小的界面按鈕。甲板電子地圖基本操作界面如圖3所示。

圖3 甲板電子地圖基本操作界面

(3)導(dǎo)航路徑

根據(jù)制圖時的路徑規(guī)劃，在生成的甲板電子地圖上可設(shè)置起點(diǎn)和終點(diǎn)，可跨層設(shè)置，自動生成路徑。跨層路徑規(guī)劃如圖4和圖5所示。但生成的電子地圖路徑固定且單一，無法考慮擁堵避讓和動態(tài)規(guī)劃，后續(xù)需要進(jìn)一步研究，與乘員動態(tài)導(dǎo)航系統(tǒng)和乘員分布熱力圖相結(jié)合，為乘員提供完善的自主避免擁堵的路徑規(guī)劃。

圖4 導(dǎo)航路徑起點(diǎn)(10層甲板)

圖5 導(dǎo)航路徑終點(diǎn)(11層甲板)

(4)標(biāo)注顯示/隱藏

用戶可通過按鈕控制電子地圖標(biāo)注的顯示和隱藏，如圖 6和圖 7所示(按鈕均在右上角)。

圖6 標(biāo)注顯示

圖7 標(biāo)注隱藏

4.2 接口功能

為平臺開發(fā)人員提供可二次開發(fā)的電子地圖基本功能接口。接口列表清單如表1所示。

表1 接口列表清單

5 結(jié) 語

電子地圖顯示技術(shù)是遠(yuǎn)洋客船實(shí)現(xiàn)乘員動態(tài)導(dǎo)航和構(gòu)建個性化網(wǎng)絡(luò)服務(wù)平臺的基礎(chǔ)?；赟VG格式的遠(yuǎn)洋客船電子地圖顯示模塊不僅可作為獨(dú)立軟件應(yīng)用，而且可對功能接口進(jìn)行封裝，為后續(xù)開發(fā)提供完整可靠的調(diào)用接口，可與網(wǎng)絡(luò)化服務(wù)平臺中的其他應(yīng)用服務(wù)進(jìn)行有效對接。需要進(jìn)一步研究的是：結(jié)合動態(tài)導(dǎo)航服務(wù)提供實(shí)時的電子地圖位置信息和導(dǎo)航路徑規(guī)劃；在形成可重用的電子地圖Web組件后，實(shí)現(xiàn)與網(wǎng)絡(luò)化服務(wù)平臺基礎(chǔ)位置信息接口有效對接，并與乘員分布熱力圖相結(jié)合為路徑規(guī)劃提供支持，如規(guī)避密集區(qū)域等。