空间信息可视化——WebGIS前端实例（一）

news2025/4/16 16:48:20

技术栈：原生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所示。