空間信息可視化——WebGIS前端實例（一）

技術棧：原生HTML

源代碼：CUGLin/WebGIS: This is a project of Spatial information visualization

4 全國貧困縣可視化系統

4.1 系統設計思想

黨的十九大報告明確指出,要“確保到2020年我國現行標準下農村貧困人口實現脫貧,貧困縣全部摘帽,解決區域性整體貧困,做到脫真貧、真脫貧”[1]。

從2012年到2020年，歷時8年，現行標準下9899萬農村貧困人口全部脫貧，國務院扶貧開發領導小組辦公室認定的832個貧困縣全部實現脫貧，我國歷史性告別絕對貧困。這無疑是彪炳史冊的歷史性功績，這場偉大的奇跡廣受聯合國秘書長在內的國內外一致稱贊，為世界提供了中國模式和中國方法[2]。

八年間，地理信息領域學者矢志不渝助力脫貧攻堅。王海起等通過構建扶貧地理知識圖譜為復合貧困整體提供解決方案[3]，劉一臻等通過設計三維地理信息服務于脫貧攻堅指揮系統的建設與應用[4]，關顯明等通過采用眾包的模式實現精準扶貧地理信息采集系統[5]。GIS技術作為強大的工具，在這場反貧困斗爭中發揮了不可替代的作用。

基于這樣的時代背景，全國貧困縣可視化系統的設計思想應運而生，旨在通過先進的地理信息可視化技術，直觀展現我國脫貧攻堅戰的輝煌成就與歷程，同時為后續的鄉村振興及可持續發展提供決策支持與經驗借鑒。

4.2 貧困縣數據處理

4.2.1 數據獲取

國家級貧困縣，又稱國家扶貧工作重點縣或國定貧困縣，是國家為幫助貧困地區設立的一種標準。全國共有832個國家級貧困縣（包括縣級行政單位，縣、區、旗、縣級市、自治縣、自治旗）。國家為扶持貧困地區，設立國家級貧困縣標準，資格經國務院扶貧開發領導小組辦公室認定，審批工作共進行過三次。少數民族自治地區有不同評定標準，稱民族自治地方國家扶貧工作重點縣。

針對具體的貧困縣數據，官方網站并沒有具體的名單表格發布，而在百度百科中有純文本格式的各個貧困縣的脫貧時間，因此這里無法采用爬蟲方法爬取，只能采取手工方法查找整理。（百科網址：國家級貧困縣_百度百科）

同時，系統需要使用到行政邊界數據，這里應用的行政邊界數據是選取自阿里云的地圖選擇器，按照需求下載對應區域的GeoJSON數據即可。（阿里云選擇器網址：DataV.GeoAtlas地理小工具系列）

4.2.2 數據處理

獲取的數據主要分為兩類，即矢量邊界數據和貧困縣數據，矢量邊界數據是直接存儲為GeoJSON數據，主要包含了“Feature”、“geometry”等字段，其中數據嚴謹且時效，符號標準底圖要求，這里以南海區域的十段線為例，如圖4.2-1所示。

圖4.2-1 南海區域十段線

而貧困縣數據這里可以手動存儲為js格式的數據，即利用var ()方法存儲為數組，方便后期調用。此外，系統應用了WMTS技術，即應用矢量瓦片底圖作為底圖，這方面的數據可以通過Leaflet的addTo()方法直接進行調用。

本系統主要應用到的數據如表4.2-1所示。

表4.2-1 應用數據表

數據名稱	數據類型	數據來源
矢量邊界數據	GeoJSON	阿里云地圖選擇器
貧困縣數據	JavaScript	百度百科
柵格底圖數據	Tiff	ESDIS、Google Map、天地圖

4.3 系統設計

4.3.1 總體設計

本系統的項目文件夾為全國貧困縣可視化系統，項目包含3個文件夾和index文件，分別是CSS文件夾，負責存放有關的CSS樣式文件；Data文件夾，負責存放項目中所使用到的數據文件；JS文件夾，負責存放項目中所使用到JavaScript文件。同時在主文件夾中還包含3個文件，index.html是項目的入口HTML文件，程序從此處開始進入并運行；index.css是項目樣式表文件，負責項目有關的樣式編寫；index.js是項目邏輯文件，負責項目有關的邏輯編寫。此外，還提供了筆者獲取的原始數據“脫貧縣數據.docx”和處理后的數據“貧困縣名單.pdf”。項目結構圖如圖4.3-1所示。

圖4.3-1 項目結構

項目大致流程主要分為數據獲取、輸出處理、程序編寫、系統測試四大主要部分。如圖4.3-2所示。

圖4.3-1 項目流程圖

4.3.2 界面設計

系統界面主要由三個部分組成：地圖部分、圖表部分、交互部分。地圖部分主要用于顯示基礎地圖，表達出地域的位置信息及底圖附帶的其他包含信息，圖表部分主要負責表達出不同級別區域下的貧困縣統計數據，交互部分主要負責進行頁面的交互，實現地圖和圖表的動態切換，此外還可以監聽鼠標事件實現動態交互功能。

4.3.3 邏輯設計

邏輯設計主要涉及四大方面的內容：數據讀取、地圖制作、表格繪制、交互響應。數據讀取應當是頁面加載后最先完成的部分，主要負責利用數據讀取庫從文件中讀取相應的數據存儲為JavaScrpit對象。地圖制作主要負責利用LeafLet及其相關插件繪制并渲染地圖，實現地圖的相關功能。表格繪制主要負責利用D3庫繪制當前狀態下的統計圖表。交互相應主要負責利用Jqurey庫、D3庫等實現頁面的交互功能。

4.4 程序匯編

4.4.1 開發環境

本系統編寫采用原生 JavaScript+HML+CSS 進行編寫，基于 LeafLet 框架以及papaparse.js庫、turf.min.js庫和jquery-3.7.1.js庫實現 Web 端地圖程序，同時結合 d3.js庫進行表格的繪制。系統開發使用的IED為Visual Studio Code 2022，使用了Live Preview和HTML CSS Support等插件進行開發。

4.4.2 主界面匯編

HTML文件主要由Head和Body兩個部分組成。Head部分主要負責引入所需要的CSS和JS文件。Body部分主要為HTM的框架結構。Body部分包含一個id為containr的div容器，其下又分為id分別為side-bar和map-wrapper的容器，分別承載工具和地圖。HTML的架構如圖4.4-1所示。

圖4.4-1 HTML架構圖

4.4.3 邏輯函數匯編

整個程序的邏輯函數全部匯編于“index.js”中，主要編寫了基礎圖元加載和交互操作處理的事務邏輯：當選中指定的區域和年份后，會首先獲取并過濾得到相應區域的貧困縣數量和邊界數據，然后將該數據通過turf.js庫轉換為Geojson數據準備進行加載。預加載前，向根據選擇區域加載其邊界數據。然后判斷加載數據的情況，顯示不同的數據類型。與此同時，根據選擇底圖類型，添加相對應的瓦片圖底。同時，根據選擇的區域和選擇的類型獲取并計算該狀態下的貧困縣統計數據，使用d3.js將繪制到表格中。系統整體的邏輯流程如圖4.4-2所示。

圖4.4-2 系統邏輯流程圖

4.5 系統展示

輸入發布的網址或打開index.html進入系統后，界面為填充全屏的LeafLet圖框，并且默認加載了由ESDIS提供的NASA2012夜間燈光影響瓦片地圖，而其上方則會分布三個交互選項欄，分別為“區域”、“年份”和“底圖”的選項。如圖4.5-1所示。

圖4.5-1 系統默認打開界面

用戶可以自行選擇感興趣的區域和發電類型，使用交互欄中的下拉菜單選擇特定的區域和年份查看指定區域指定年份下的貧困縣分布情況。這里以全國2015年的貧困縣分布情況為例，點擊第一個下拉框，選擇“全國”；點擊第二個下拉框，選擇“2015”，點擊第三個下拉框，選擇“Satellite Image night”。如圖4.5-2所示。

圖4.5-2 全國貧困縣可視化情況

當用戶將鼠標置于不同的區域位置，會在右上角的表格中顯示對應的區域的數據，同時不同省份包含不同的貧困縣數量，這里主要采用的是自然間斷法進行分級處理，針對不同的級別的省份賦予不同的質地，同時在左下角放置圖例圖框供用戶參考，此外還在右側放置了d3.js庫繪制的匯總統計樣表，并按順序級數排列，主要的表格參考說明如圖4.5-3所示。