結(jié)合GeoExt3，Openlayers3和ExtJs實(shí)現(xiàn)地圖功能

張致遠(yuǎn)，王金峰，候琳葉，張雪玉，趙雪輝

（防災(zāi)科技學(xué)院信息工程學(xué)院，河北 三河 065201）

1 引言

在互聯(lián)網(wǎng)普及化，網(wǎng)絡(luò)設(shè)備小型便攜化以及大數(shù)據(jù)的現(xiàn)代社會(huì)環(huán)境下，人們的需求刺激了信息傳遞的速度和信息更新的速度。紙質(zhì)地圖的便攜性和攜帶的信息量已經(jīng)遠(yuǎn)遠(yuǎn)無(wú)法滿足人們的需求。隨著大量交通設(shè)備的完善以及科技技術(shù)的發(fā)展，人們出行的便捷性大幅上升，出行的范圍也在大幅增加。當(dāng)人們處于陌生環(huán)境中，不知如何前往目的地[1]，因此，移動(dòng)端和PC端的電子地圖便順應(yīng)潮流而生，并飛速發(fā)展。同時(shí)電子地圖的不斷發(fā)展，漸漸滿足了人們對(duì)地圖信息即時(shí)性、精準(zhǔn)性的要求[2]。

2 技術(shù)背景以及系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)

2.1 技術(shù)概述

2.1.1 GeoExt3概述

GeoExt3是一個(gè)把Openlayers3和ExtJS組合在一起形成的用來(lái)開發(fā)客戶端地圖應(yīng)用程序的javascript類庫(kù)。

2.1.2 Openlayers3概述

Openlayers3是一個(gè)專為WebGIS客戶端開發(fā)提供的JavaScript類庫(kù)包，用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問(wèn)。

2.1.3 ExtJs概述

ExtJS主要用來(lái)開發(fā)RIA富客戶端的AJAX應(yīng)用，主要用于創(chuàng)建前端用戶界面，與后臺(tái)技術(shù)無(wú)關(guān)的前端ajax框架。

2.2 程序構(gòu)想和程序結(jié)構(gòu)圖

2.2.1 程序構(gòu)想

結(jié)合GeoExt3，Openlayers3和 ExtJs構(gòu)建簡(jiǎn)單 WebGis，將整個(gè)頁(yè)面分為地圖區(qū)和圖層區(qū)。地圖區(qū)實(shí)現(xiàn)顯示圖層以及對(duì)地圖的一些基礎(chǔ)操作，如拖拽和縮放。圖層區(qū)實(shí)現(xiàn)對(duì)圖層的管理，其中包括顯示當(dāng)前已加載圖層和勾選圖層以決定是否顯示圖層，以及可以縮放圖層區(qū)和拖拽圖層區(qū)以改變其寬度。

2.2.2 程序結(jié)構(gòu)圖

程序中庫(kù)所處在的地位分別是 GeoExt3，ExtJS，Openlayers3。Openlayers3承載和顯示圖層數(shù)據(jù)，ExtJs承載Openlayers3所定義的地圖，并為其創(chuàng)建地圖區(qū)，同時(shí)獲取Openlayers3的圖層數(shù)據(jù)，創(chuàng)建圖層區(qū)。最后GeoExt3承載ExtJs和Openlayers3，提供框架服務(wù)。

2.3 步驟及主要代碼

2.3.1 基本配置

以GeoExt為大體，所以首先使用Ext.Loader.setConfig()來(lái)配置GeoExt庫(kù)的路徑。這里第一行（enabled：true）只是啟用配置。配置中的下一個(gè)定義是路徑。在這里定義指向帶有GeoExt3庫(kù)的目錄。

2.3.2 Web地圖頁(yè)面的實(shí)現(xiàn)

首先設(shè)置一個(gè)基礎(chǔ)圖層，圖層控件是接下來(lái)將添加到Web應(yīng)用程序的第一個(gè)控件。這樣就可以在各層之間切換并打開或關(guān)閉它們。

使用Ext實(shí)例化類的方法Ext.create創(chuàng)建一個(gè)ol.Map可以在任何ExtJS布局中使用的組件GeoExt.component.Map。

接下來(lái)創(chuàng)建視圖的圖層區(qū)，顯示加載圖層。

首先使用Ext實(shí)例化類的方法Ext.create創(chuàng)建treeStore，并獲取olmap中的圖層。

然后使用Ext實(shí)例化類的方法Ext.create創(chuàng)建圖層區(qū)layerTreePanel，TreePanel提供樹結(jié)構(gòu)數(shù)據(jù)的樹形結(jié)構(gòu)用戶界面Ext.tree.Panel。

最后開始整合容器，初始化圖層區(qū)和地圖區(qū)。

使用Ext實(shí)例化類的方法Ext.create創(chuàng)建可查看應(yīng)用程序區(qū)域的專屬容器

至此，便完成了結(jié)合GeoExt3，Openlayers3和ExtJs實(shí)現(xiàn)Web地圖頁(yè)面。

3 結(jié)語(yǔ)

Web GIS是Internet技術(shù)應(yīng)用于GIS開發(fā)的產(chǎn)物，是現(xiàn)代GIS技術(shù)的重要組成部分。GIS通過(guò)WWW功能得以擴(kuò)展，真正成為一種大眾使用的工具。采用結(jié)合GeoExt3，Openlayers3和ExtJs的技術(shù)結(jié)合，實(shí)現(xiàn)了地圖數(shù)據(jù)的呈現(xiàn)和地圖圖層的管理，同時(shí)使其具有良好的跨平臺(tái)性和可擴(kuò)展性，人們可以在大部分平臺(tái)通過(guò)瀏覽器訪問(wèn)，同時(shí)該系統(tǒng)也可以添加更多的擴(kuò)展以實(shí)現(xiàn)更多的功能。由于使用的都是開源技術(shù)，在資源獲取與改進(jìn)方面具有一定的優(yōu)勢(shì)，為技術(shù)整合奠定了一定的基礎(chǔ)，同時(shí)也增強(qiáng)了系統(tǒng)的可維護(hù)性。

開發(fā)電子地圖并對(duì)其進(jìn)行持續(xù)的信息更新，保持其所呈現(xiàn)信息的及時(shí)性和準(zhǔn)確性，在追求信息即時(shí)性，精準(zhǔn)性，全面性，指向性等的當(dāng)今社會(huì)，這無(wú)疑是順應(yīng)潮流的，切合人們切實(shí)需求的。