本文是一篇息系統(tǒng)與信息資源管理論文，本文提出了基于 WebGIS 的自然資源“一張圖”管理信息系統(tǒng)的設(shè)計與實現(xiàn)。系統(tǒng)基于WebGIS 進(jìn)行系統(tǒng)架構(gòu)建設(shè)，具有“數(shù)據(jù)訪問策略”、“權(quán)限管理策略”、“日志管理策略”，通過調(diào)用在線地理信息服務(wù)的方式實現(xiàn)諸多功能，使用的技術(shù)包括 ArcGIS API for JavaScript、AntV G2 等。在數(shù)據(jù)查詢、統(tǒng)計分析、數(shù)據(jù)可視化展示和制圖等方面具有實際應(yīng)用價值，為自然資源局提供基礎(chǔ)地理信息共享服務(wù)平臺，同時為自然資源數(shù)據(jù)的管理提供支持。在實現(xiàn)系統(tǒng)建設(shè)的基礎(chǔ)上對系統(tǒng)進(jìn)行性能方面的優(yōu)化，使系統(tǒng)充分發(fā)揮自身價值，推動龍海市自然資源數(shù)據(jù)管理的信息化建設(shè)。

第一章  緒論

1.1  研究背景和意義
1.1.1  研究背景
隨著國土資源信息化的不斷加強，國土資源“一張圖”工程的建設(shè)目前已經(jīng)在全國眾多省市開展。國土資源“一張圖”系統(tǒng)是在整合各類國土資源數(shù)據(jù)的基礎(chǔ)上實現(xiàn)的，利用 3S 技術(shù)、空間檢索技術(shù)、海量數(shù)據(jù)管理技術(shù)等[1]，融合了國土資源多元信息，將數(shù)據(jù)和各個職能部門的業(yè)務(wù)疊加到“一張圖”上，是一個能夠滿足國土資源動態(tài)監(jiān)管目標(biāo)的綜合服務(wù)平臺[2]。
2018 年 3 月，中共中央印發(fā)《深化黨和國家機構(gòu)改革方案》[3]，組建自然資源部作為國務(wù)院組成部門，不再保留國土資源部。2018 年 12 月《龍海市市級機構(gòu)改革實施方案》[4]公布，方案中指出：“組建市自然資源局，不再保留市國土資源局”。在機構(gòu)改革的形勢下，對自然資源數(shù)據(jù)進(jìn)行科學(xué)高效的信息化建設(shè)顯得尤為重要。為了將更多的自然資源數(shù)據(jù)與職能部門的工作流程對接，將數(shù)據(jù)管理規(guī)范化，構(gòu)建滿足自然資源管理新時代、新形勢下新要求的“一張圖”系統(tǒng)的需求應(yīng)運而生。結(jié)合龍海市自然資源局的情況，進(jìn)行龍海市自然資源“一張圖”管理信息系統(tǒng)的建設(shè)。實現(xiàn)自然資源數(shù)據(jù)的共享使用和統(tǒng)一管理是重點建設(shè)內(nèi)容。
1.1.2  研究意義
通過探究系統(tǒng)開發(fā)框架、數(shù)據(jù)庫、地圖服務(wù)器之間的關(guān)系，基于數(shù)據(jù)獲取安全性的考慮設(shè)計了“數(shù)據(jù)訪問策略”、“權(quán)限管理策略”、“日志管理策略”。在系統(tǒng)的建設(shè)過程中，本文繼續(xù)探索提升系統(tǒng)性能的手段，從 web 前端優(yōu)化和使用 Nginx負(fù)載均衡方面提出相應(yīng)的性能優(yōu)化方案，在系統(tǒng)的多個運行環(huán)節(jié)縮短了響應(yīng)時間，令系統(tǒng)充分發(fā)揮自身作用。
龍海市自然資源“一張圖”管理信息系統(tǒng)主要以建設(shè)自然資源數(shù)據(jù)統(tǒng)一平臺為目標(biāo)，按照“整合、集成、應(yīng)用、共享”的基本思路，實現(xiàn)地理信息技術(shù)和自然資源數(shù)據(jù)的融合發(fā)展。此“一張圖”系統(tǒng)可以解決自然資源數(shù)據(jù)在自然資源局內(nèi)共享不便且缺乏合理的數(shù)據(jù)共享機制的問題，實現(xiàn)對自然資源數(shù)據(jù)的統(tǒng)一管理和維護(hù)，并能提高辦公人員的工作效率。

1.2  國內(nèi)外研究進(jìn)展綜述
國內(nèi)外研究進(jìn)展綜述分別從 WebGIS 技術(shù)、國土資源“一張圖”系統(tǒng)研究和 Web前端優(yōu)化三個方面進(jìn)行介紹。
1.2.1 WebGIS 技術(shù)
地理信息系統(tǒng)（GIS）在計算機技術(shù)、網(wǎng)絡(luò)技術(shù)發(fā)展下興起[5]，主要工作任務(wù)是實現(xiàn)數(shù)據(jù)的采集、處理、分析、存儲和結(jié)果展示等功能[6]。在很大程度上，GIS 技術(shù)的發(fā)展以計算機信息科技的進(jìn)步為依托，當(dāng)今時代的互聯(lián)網(wǎng)技術(shù)發(fā)展迅速，單機 GIS已無法滿足行業(yè)的需求，WebGIS 在網(wǎng)絡(luò)和地理信息系統(tǒng)技術(shù)的整合中應(yīng)運而生[7]，成為 GIS 發(fā)展過程中不可或缺的重要組成部分。WebGIS 是指工作在 Web 網(wǎng)上的GIS，不僅具有傳統(tǒng) GIS 的特點，而且是傳統(tǒng) GIS 在網(wǎng)絡(luò)上的延伸和發(fā)展，它將地圖學(xué)、地理信息、計算機圖形學(xué)以及軟件工程等學(xué)科緊密聯(lián)系起來[8]，為傳統(tǒng) GIS 的開發(fā)提供了契機[9]。它實現(xiàn)了空間數(shù)據(jù)在網(wǎng)絡(luò)環(huán)境下的檢索、訪問、存儲、分析、編輯、制圖輸出等 GIS 的基本功能[10]，是互聯(lián)網(wǎng)上地理信息發(fā)布、共享和交流協(xié)作的基礎(chǔ)。WebGIS 是一種分布式的地理信息系統(tǒng)[11]，將 Web 瀏覽器作為發(fā)送請求的客戶端，并將 Web 服務(wù)器作為響應(yīng)請求的服務(wù)器[12]，在線地理信息服務(wù)為 WebGIS 系統(tǒng)調(diào)用空間數(shù)據(jù)提供極大便利性。WebGIS 具有更廣泛的客戶訪問范圍、平臺獨立性[13]、操作簡單[14]、互操作[15]、平衡高效的計算負(fù)載[16]等特點。目前隨著大數(shù)據(jù)、可視化、云平臺等前沿新興技術(shù)在各行各業(yè)扎根[17]，WebGIS 已應(yīng)用于國土空間規(guī)劃[18]、災(zāi)害評估[19]、地質(zhì)[20]、礦產(chǎn)資源[21]、礦井[22]、水文水資源[23-24]、地震應(yīng)急[25]等眾多領(lǐng)域。
在 WebGIS 建設(shè)方面國內(nèi)外已有大量學(xué)者進(jìn)行研究。國內(nèi)方面，Bin Zhang[26]等（2018）設(shè)計的基于 WebGIS 的堤防工程信息管理系統(tǒng)采用基于 B/S 的多層體系結(jié)構(gòu)，分為交互層、網(wǎng)絡(luò)層、邏輯層和數(shù)據(jù)層四層。羅鵬[27]等（2018）設(shè)計的林地“一張圖”系統(tǒng)的前端采用 ExtJS3.0、Flex4.0 開發(fā)，服務(wù)端采用 Java 語言開發(fā)；魏圓圓[28]等（2018）設(shè)計開發(fā)了農(nóng)場生產(chǎn)管理信息系統(tǒng)；徐子惠[29]等（2018）設(shè)計的城市交通警情 WebGIS 系統(tǒng)，采用云數(shù)據(jù)庫存儲屬性數(shù)據(jù)。

第二章  相關(guān)技術(shù)介紹

2.1 Web 前端技術(shù)
Web 前端開發(fā)技術(shù)包括客戶端交互實現(xiàn)技術(shù)和網(wǎng)頁開發(fā)等內(nèi)容[61]。Web 前端技術(shù)包括模塊打包器 webpack、Angular、ArcGIS API for JavaScript 和 AntV G2。
2.1.1 webpack
webpack[62]是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器（module bundler），使用 webpack 將 JavaScript 文件打包在一起，打包后的文件可在瀏覽器中使用。傳統(tǒng)打包工具將所有的模塊編譯生成較大 bundle.js 文件，而 webpack 具有按需加載和模塊化的特性：通過異步加載部分代碼以實現(xiàn)按需加載；通過自執(zhí)行函數(shù)啟動，然后通過自定義的exports和require實現(xiàn)模塊化，將所有模塊打包成一個或多個bundle，從而減少 http 請求次數(shù)。使用 webpack 能夠?qū)I(yè)務(wù)分割成易于管理的更小的片段從而重復(fù)利用。webpack 的優(yōu)點是使用異步 IO，具有多級緩存。webpack 兼容多種JavaScript 的書寫規(guī)范，即能夠?qū)?JavaScript  ES6 轉(zhuǎn)換成支持更多瀏覽器的低版本的JavaScript。
2.1.2 Angular
Angular 是一個用 HTML 和 TypeScript 構(gòu)建客戶端應(yīng)用的平臺與框架[63]。Angular使用 TypeScript 編寫而成，TypeScript 是微軟推出的開源的基于類的面向?qū)ο缶幊陶Z言，實現(xiàn)了類、接口、泛型等面向?qū)ο笳Z言的特性，可以在任何瀏覽器、任何計算機和任何操作系統(tǒng)上使用。TypeScript 是 JavaScript 的超集，支持 Javascript 的所有語法和語義，可以編譯成純 JavaScript。Angular 遵循基于組件的體系結(jié)構(gòu)，每個組件都是獨立且可重用的，通過在組件之間進(jìn)行數(shù)據(jù)傳遞來控制客戶端的 UI 表現(xiàn)。Angular 應(yīng)用是由一組 NgModule 定義形成的，NgModule 作為 Angular 的基本構(gòu)造模塊為組件提供編譯的上下文環(huán)境，把相關(guān)的代碼收集到一些功能集當(dāng)中，至少會有一個用于引導(dǎo)應(yīng)用的 AppMoudle 根模塊，通常還會有很多特性模塊。在一個小型應(yīng)用程序中，AppMoudle 可能是唯一的模塊[64]。

2.2  服務(wù)端技術(shù)
服務(wù)端是為客戶端服務(wù)的，服務(wù)端開發(fā)具有眾多編程語言，如 Java、PHP、ASP、Go、JavaScript 等。Java 是靜態(tài)面向?qū)ο缶幊陶Z言的代表，是目前使用最廣泛的語言之一；PHP 是動態(tài)類型的服務(wù)器端語言，語法吸收了 C 語言、Java 語言的優(yōu)點，是Web 開發(fā)領(lǐng)域主要使用語言之一；ASP 是微軟公司開發(fā)的服務(wù)器腳本語言，具有簡單、易維護(hù)的特點；Go 是 Google 開發(fā)的一種靜態(tài)強類型的編程語言，在高性能分布式系統(tǒng)領(lǐng)域中具有很高的開發(fā)效率；Node.js 是由 JavaScript 開發(fā)的，打破了過去JavaScript 只能在瀏覽器中運行的局面。本系統(tǒng)中涉及的服務(wù)端技術(shù)包括 Node.js、Koa、ArcGIS Server 以及 Nginx。
2.2.1 Node.js
Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境，輕量且高效，使用了一個事件驅(qū)動、非阻塞式 I/O 的模型。在 Node.js 服務(wù)器中運行的是高性能 V8 JavaScript 腳本語言，該腳本語言可以運行在服務(wù)器端。JavaScript 是客戶端的腳本語言，通常需要嵌入在網(wǎng)頁的 HTML 中，通過瀏覽器引擎在客戶端運行。Node.js 作為服務(wù)器端 JavaScript 的運行平臺，具有弱類型、基于作用域和原型鏈的特征，重點在于將 Web 前端中事件機制等思想遷移到了服務(wù)端的環(huán)境中[69]。Node.js 異步編程帶來了異常處理、函數(shù)層級嵌套過深、流程控制等問題。針對此問題產(chǎn)生了幾種解決策略，包括事件發(fā)布/訂閱模式、Promise/Deferred 模式、流程控制庫模式三種[70]。Node.js 的編寫比較便利，擁有的服務(wù)預(yù)留了簡單易讀寫的 API 入口文件，構(gòu)建服務(wù)器時僅需要較少的 JavaScript 語言[71]。
第三章  系統(tǒng)設(shè)計 ................................. 15
3.1  需求分析 ......................................... 15
3.1.1  非功能需求分析 .......................................... 15
3.1.2  功能需求分析 ............................................ 16 
第四章  系統(tǒng)性能優(yōu)化 ................................ 41
4.1 Web 前端優(yōu)化 ............................. 41
4.1.1  瀏覽器緩存 .......................... 41
4.1.2 Gzip 壓縮 ................................... 44
第五章  系統(tǒng)實現(xiàn) ............................... 59
5.1 業(yè)務(wù)應(yīng)用子系統(tǒng) ................................ 59
5.1.1  數(shù)據(jù)瀏覽 ............................... 59
5.1.2  數(shù)據(jù)查詢 ............................... 60

第五章  系統(tǒng)實現(xiàn)

5.1 業(yè)務(wù)應(yīng)用子系統(tǒng)
業(yè)務(wù)應(yīng)用子系統(tǒng)包括數(shù)據(jù)瀏覽、快速定位、數(shù)據(jù)查詢、統(tǒng)計分析等功能。
5.1.1  數(shù)據(jù)瀏覽
數(shù)據(jù)瀏覽模塊是對各類圖層的集中展示，功能包括圖層縮放、修改比例尺、測距、測面積、修改透明度、屬性識別等。其中，測距和測面積功能調(diào)用了 ArcGIS Server服務(wù)器上的 GeometryService。除此之外還涉及到與圖層相關(guān)的卷簾對比、雙屏對比功能。
卷簾對比功能實現(xiàn)對不同圖層在相同位置的內(nèi)容對比。卷簾的方向包括水平和豎直，卷簾軸默認(rèn)在地圖中央；卷簾對比的作用是通過拖動卷簾軸對比主圖層和次圖層的不同。卷簾對比的界面如圖 5-1 所示。

第六章  總結(jié)與展望

6.1  總結(jié)
隨著國土資源機構(gòu)的改革和信息化建設(shè)的加強，如何提高自然資源綜合管理水平效率、如何更加安全高效地實現(xiàn)自然資源數(shù)據(jù)的共享成為了關(guān)注的重點。本文提出了基于 WebGIS 的自然資源“一張圖”管理信息系統(tǒng)的設(shè)計與實現(xiàn)。系統(tǒng)基于WebGIS 進(jìn)行系統(tǒng)架構(gòu)建設(shè)，具有“數(shù)據(jù)訪問策略”、“權(quán)限管理策略”、“日志管理策略”，通過調(diào)用在線地理信息服務(wù)的方式實現(xiàn)諸多功能，使用的技術(shù)包括 ArcGIS API for JavaScript、AntV G2 等。在數(shù)據(jù)查詢、統(tǒng)計分析、數(shù)據(jù)可視化展示和制圖等方面具有實際應(yīng)用價值，為自然資源局提供基礎(chǔ)地理信息共享服務(wù)平臺，同時為自然資源數(shù)據(jù)的管理提供支持。在實現(xiàn)系統(tǒng)建設(shè)的基礎(chǔ)上對系統(tǒng)進(jìn)行性能方面的優(yōu)化，使系統(tǒng)充分發(fā)揮自身價值，推動龍海市自然資源數(shù)據(jù)管理的信息化建設(shè)。主要取得了以下幾方面的研究成果：
（1）通過對龍海市自然資源“一張圖”管理信息系統(tǒng)進(jìn)行具體業(yè)務(wù)需求分析，整理系統(tǒng)開發(fā)的功能需求，對現(xiàn)有系統(tǒng)平臺數(shù)據(jù)進(jìn)行分類整合，實現(xiàn)對多源異構(gòu)的基礎(chǔ)地理空間數(shù)據(jù)的整合處理，完成數(shù)據(jù)庫設(shè)計。
（2）結(jié)合需求和數(shù)據(jù)明確系統(tǒng)開發(fā)目標(biāo)和設(shè)計原則并設(shè)計具有“數(shù)據(jù)訪問策略”、“權(quán)限管理策略”、“日志管理策略”的系統(tǒng)架構(gòu)。
（3）設(shè)計并實現(xiàn)了基于 WebGIS 的自然資源“一張圖”管理信息系統(tǒng)。功能涉及的技術(shù)包括基于 Geoprocessing Service 的疊加分析、CAD 文件導(dǎo)入功能、基于 AntV G2 的自然資源數(shù)據(jù)可視化分析（折線圖、柱狀圖）、基于數(shù)據(jù)庫腳本語言的圖層列表更新功能等。系統(tǒng)中的部分參數(shù)、圖層服務(wù)地址等信息可靈活配置，具備良好的可擴展性。為龍海市自然資源局提供了一套可以將自然資源數(shù)據(jù)共享使用的“一張圖”管理信息系統(tǒng)。
（4）對系統(tǒng)從兩個方面進(jìn)行性能優(yōu)化：Web 前端優(yōu)化和 Nginx 負(fù)載均衡設(shè)計，實驗表明本文實現(xiàn)的瀏覽器緩存、Gzip 壓縮和 Angular 懶加載均在一定程度上起到提升系統(tǒng)性能的作用，體現(xiàn)在具體實例下減少數(shù)據(jù)請求的響應(yīng)時間等。同時，探究Nginx 負(fù)載均衡的使用方式。
參考文獻(xiàn)（略）