結合GeoExt3，Openlayers3和ExtJs實現地圖功能

張致遠，王金峰，候琳葉，張雪玉，趙雪輝

（防災科技學院信息工程學院，河北 三河 065201）

1 引言

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

2 技術背景以及系統設計實現

2.1 技術概述

2.1.1 GeoExt3概述

GeoExt3是一個把Openlayers3和ExtJS組合在一起形成的用來開發客戶端地圖應用程序的javascript類庫。

2.1.2 Openlayers3概述

Openlayers3是一個專為WebGIS客戶端開發提供的JavaScript類庫包，用于實現標準格式發布的地圖數據訪問。

2.1.3 ExtJs概述

ExtJS主要用來開發RIA富客戶端的AJAX應用，主要用于創建前端用戶界面，與后臺技術無關的前端ajax框架。

2.2 程序構想和程序結構圖

2.2.1 程序構想

結合GeoExt3，Openlayers3和 ExtJs構建簡單 WebGis，將整個頁面分為地圖區和圖層區。地圖區實現顯示圖層以及對地圖的一些基礎操作，如拖拽和縮放。圖層區實現對圖層的管理，其中包括顯示當前已加載圖層和勾選圖層以決定是否顯示圖層，以及可以縮放圖層區和拖拽圖層區以改變其寬度。

2.2.2 程序結構圖

程序中庫所處在的地位分別是 GeoExt3，ExtJS，Openlayers3。Openlayers3承載和顯示圖層數據，ExtJs承載Openlayers3所定義的地圖，并為其創建地圖區，同時獲取Openlayers3的圖層數據，創建圖層區。最后GeoExt3承載ExtJs和Openlayers3，提供框架服務。

2.3 步驟及主要代碼

2.3.1 基本配置

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

2.3.2 Web地圖頁面的實現

首先設置一個基礎圖層，圖層控件是接下來將添加到Web應用程序的第一個控件。這樣就可以在各層之間切換并打開或關閉它們。

使用Ext實例化類的方法Ext.create創建一個ol.Map可以在任何ExtJS布局中使用的組件GeoExt.component.Map。

接下來創建視圖的圖層區，顯示加載圖層。

首先使用Ext實例化類的方法Ext.create創建treeStore，并獲取olmap中的圖層。

然后使用Ext實例化類的方法Ext.create創建圖層區layerTreePanel，TreePanel提供樹結構數據的樹形結構用戶界面Ext.tree.Panel。

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

使用Ext實例化類的方法Ext.create創建可查看應用程序區域的專屬容器

至此，便完成了結合GeoExt3，Openlayers3和ExtJs實現Web地圖頁面。

3 結語

Web GIS是Internet技術應用于GIS開發的產物，是現代GIS技術的重要組成部分。GIS通過WWW功能得以擴展，真正成為一種大眾使用的工具。采用結合GeoExt3，Openlayers3和ExtJs的技術結合，實現了地圖數據的呈現和地圖圖層的管理，同時使其具有良好的跨平臺性和可擴展性，人們可以在大部分平臺通過瀏覽器訪問，同時該系統也可以添加更多的擴展以實現更多的功能。由于使用的都是開源技術，在資源獲取與改進方面具有一定的優勢，為技術整合奠定了一定的基礎，同時也增強了系統的可維護性。

開發電子地圖并對其進行持續的信息更新，保持其所呈現信息的及時性和準確性，在追求信息即時性，精準性，全面性，指向性等的當今社會，這無疑是順應潮流的，切合人們切實需求的。