基于Cesium的三維移動端GIS開發與應用

周正 王星東 劉碩

（1.河南省時空大數據產業技術研究院，河南 鄭州 450046；2.河南大學 環境與規劃學院，河南 開封 475004；3. 河南工業大學 信息科學與工程學院，河南 鄭州 450001）

1 引言

隨著新興技術的不斷發展，對于GIS 的研究開始向三維領域擴展，三維可視化的發展成為了必要需求。為了滿足人們的生活需要，桌面端的三維GIS 日益豐富。但隨著手機、平板電腦的普及，對移動端的三維GIS 產品的需求日益增大。目前，國內外移動三維GIS的產品較少[1]。與桌面端的三維GIS 相比，移動端的三維GIS 具有如下優點：

（1）移動端的三維GIS，任何聯網的手機只需下載一個APP 即可瀏覽三維場景，系統除了平移縮放、距離測量等基本操作外，還添加了查詢定位、興趣點推薦、二三維地圖導航等功能，可以幫助用戶解決一些實際問題[2]。

（2）能夠快速導入、編輯、獲取三維場景數據，幫助用戶壓縮制作成本，具有很高的安全性，操作簡單，使用方便。

（3）移動端三維場景制作成本低，操作簡單，易于上手，界面簡易又不失美觀，實用性也較強，可以吸引大量用戶，獲得明顯收益[3]。移動端的三維GIS可應用于智慧旅游、智慧校園以及智慧城市等領域，在空間地理位置信息服務中有很大的發展潛力。因此，基于Cesium 的三維移動端GIS 系統的開發具有深遠的研究意義。

本系統開發的目的就是要讓三維場景流暢地在移動端運行，滿足用戶真實需求，保證用戶空間位置的真實性，切實為用戶提供空間位置信息服務。

2 關鍵技術

基于Cesium 的三維移動端GIS 系統的開發框架采用了手機端和Web 端相結合的方式，減少了對原生Android 開發的依賴，增強了軟件的可移植性。前端基于Node.js 框架采用CesiumJS 進行開發，Node.js 可以讓網頁加載和訪問速度更快，與Tomcat 服務器相比，Node.js 具有更高的并發性[4]。只需要一個Node.js 服務器，就可以完成網站以及數據庫的開發，不必再去搭建JavaWeb 項目，減少了資源的消耗，提高了開發效率[5]。在手機端的開發中，本系統用到了TBS 的WebView 開發框架，可以實現在軟件內加載和瀏覽網頁，節省了成本和時間。在加載模型方面，本系統采用了批量加載模型的框架，讓模型的渲染更加迅速，更好地展示在移動端頁面。

3 需求分析

本系統的開發是為用戶提供移動端三維場景的瀏覽和空間位置信息服務。根據用戶需求，系統在二維地圖中提供了二維地圖基本瀏覽、路徑規劃及導航等功能，在三維場景中提供了場景瀏覽、查詢定位、二三維地圖聯動、興趣點推薦、三維地圖導航等功能。為了滿足用戶不同場景需求，系統在界面右上角提供了二維地圖和三維場景的切換選擇。

在二維地圖中，系統除了基本的地圖操作外，還為用戶提供了路徑規劃導航功能。當用戶不需要三維場景時，可選擇二維地圖來滿足需求。

在三維場景中，興趣點推薦功能需要獲取用戶當前位置，然后為用戶推薦興趣熱點，進而提供一定三維場景范圍內的信息服務。三維場景的路徑規劃及導航功能是通過獲取用戶的空間位置實現的。二三維地圖聯動及場景切換是在不同場景下，為用戶提供不同的選擇，更好地為用戶服務。三維場景的查詢定位是為了用戶快速獲取周圍建筑物的信息。其中，本模塊為用戶提供了文字和語音輸入兩種操作方式，滿足不同用戶不同場景的需求。

4 系統設計

在完成需求分析后，需要對系統進行概要設計。概要設計是整個系統完成的總體框架，在系統開發前必須進行軟件的概要設計。根據用戶需求分析以及軟件開發的實際情況，將系統分為二維地圖和三維場景兩個主要開發模塊。進行概要設計時除了明確要進行開發的功能模塊外，也要考慮系統的UI 交互設計。一個良好的用戶交互設計是一個軟件必須具備的。有了概要設計，各功能模塊之間的耦合度才會更高，軟件的穩定性才會更高。

本系統的功能主要分為二維地圖瀏覽、二維地圖路徑規劃及導航、三維場景加載及瀏覽、三維場景定位查詢、三維場景興趣點推薦、二維地圖與三維場景聯動、三維場景路徑規劃及導航。系統模塊劃分如圖1 所示。

圖1 系統模塊劃分

系統的概要設計完成后，要進行詳細設計。詳細設計不僅要對各功能模塊之間的調用接口進行明確，還要對各個功能模塊的具體實現流程以及實現過程中發生的時間進行設計。本部分的設計也包含了系統運行出錯時要進行的操作。有了完整的詳細設計，才能進行系統下一步的開發與實現。

5 系統實現

5.1 二維地圖

進入系統后，首先是可以展示用戶當前位置的二維地圖，用戶可以瀏覽查看地圖。二維地圖的基本操作有放大、縮小、移動以及旋轉。在該地圖界面，用戶可以查看自己的實時位置。系統的開發用到了高德二維地圖，為用戶提供二維地圖相關服務。二維地圖瀏覽展示如圖2 所示。

查看完二維地圖后，用戶可以點擊下方藍色的橢圓形“選取終點”按鈕，在二維地圖上隨機點擊選取一點作為終點。選取完畢后，點擊“路徑規劃”，系統會把用戶最后點擊的點作為終點，規劃一條步行導航路徑。點擊“開始導航”后，系統開始為用戶導航，二維地圖路徑規劃及導航如圖3 所示。

圖2 二維地圖瀏覽展示

圖3 二維地圖路徑規劃及導航

5.2 三維場景查詢定位

用戶可以點擊右上角的三維地圖切換按鈕，進入三維場景。同樣，如果用戶想要回到二維地圖界面，可在相同位置點擊二維地圖。在三維場景內，用戶在頂部的搜索欄手動或語音輸入要查詢模型的關鍵字。系統查詢完成后，會以氣泡顯示框的形式將查詢到的信息展示在手機客戶端界面，三維場景查詢定位如圖4 所示。

5.3 二三維地圖聯動

考慮到用戶無法在三維場景內查看對應的二維地圖信息，因此，系統在三維場景界面左下方設計展示對應的二維地圖，滿足用戶在某些特定場景的需求。二三維地圖聯動是靠監聽二維地圖以及三維場景當前中心點來實現的。在二維地圖或三維場景的移動過程中，兩者的中心點始終保持同一位置。為了保證數據的準確性和真實性，系統在實現時用到了空間坐標轉換。其中，二維地圖的坐標系是GCJ02 坐標系，三維場景用到的坐標系是WGS84 坐標系。二三維聯動如圖5 所示。

圖4 三維場景查詢定位

圖5 二三維聯動

5.4 興趣點推薦

興趣點推薦類似于購物軟件的智能推薦。本系統的興趣點推薦是基于用戶當前位置實現的。系統會自動獲取用戶首次進入三維場景的位置信息，并將位置返回至后臺服務器。后臺服務器會進行計算，并將計算結果以對話框的形式展示在系統界面的正中央。為了讓用戶快速定位到興趣點，系統還增加了信息框的點擊功能。只要用戶點擊對應的信息框，系統就會定位到該興趣點。用戶如果想要前往該興趣點，可以選擇導航到該位置。同時，如果用戶想要語音輸入，也可以點擊語音圖標輸入該興趣點的關鍵字信息，系統就會為用戶進行路徑規劃和導航。興趣點推薦如圖6所示。

5.5 三維場景導航

三維導航是為用戶在小范圍的精細場景內設計的。在一些比較偏僻的地方，二維地圖往往不能夠為用戶提供精確導航，導致用戶體驗較差。為了解決這一問題，在三維場景的基礎上，系統進行了三維導航功能的開發。與二維導航相比，系統獲取的是用戶當前的空間位置信息。結合用戶選取的終點信息，經過空間分析的最短路徑算法和優路徑算法為用戶進行三維場景的路徑規劃。路徑規劃完成后，點擊“開始導航”，系統開始調用場景相機為用戶提供導航視角，其中，場景相機的視角是根據用戶在三維真實世界里的視角以及每段關鍵路徑的方向來確定三維場景的視角，三維導航如圖7 所示。

圖6 興趣點推薦

圖7 三維導航

6 結論

基于Cesium 的三維移動端GIS 系統的開發與應用具有如下特點：

（1）將虛擬三維場景與真實三維世界相結合，為用戶提供三維場景的地理位置信息服務。

（2）動態加載場景資源，減少對硬件設備資源的消耗，優化用戶體驗。

（3）用戶在真實三維世界的位置空間信息都可以在三維場景體現。

（4）二維地圖和三維場景結合使用，滿足用戶不同場景的需求，同時也可以減少系統對設備內存的占用，確保系統不影響用戶其他應用的使用體驗。