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

第一章  緒論

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

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

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

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

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

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

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

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