开源网络地图可视化第五章学习指南-CSDN博客

本文链接：https://blog.csdn.net/CUGLin/article/details/147929800

配套书籍：开源网络地图可视化——基于Leaflet的在线地图开发 (杨乃) (Z-Library)(1).pdf - 蓝奏云

2 第五章Leaflet专题地图绘制

2.1 分级统计图法

2.1.1 数据获取

工欲善其事，必先利其器。制作这里的专题地图需要原始数据的获取，这里数据的获取方式参照的是老师编写的《开源网络地图可视化——基于Leaflet的在线地图开发》教材中第五章的部分。

首先需要的是湖北省的矢量边界数据，这里可以通过阿里云的地图选择器获取。这里的选择流程十分简单易懂，直接找到对应的湖北省范围的区域，并选择其数据粒度为“市”，下载对应的GeoJSON数据，并将其重命名为“Hubei.json”，另存为工程的data文件下。下载操作如图2.1-1所示。

图2.1-1 湖北省行政边界数据下载

此外，在后期的制作中还需要应用到湖北省各市的人口密度数据，因此，这里需要应用到2010年第六次全国人口普查数据，不过这里可能由于时效的原因，教材中提供的网址失效了，因此这里需要自行前往官网获取相应的数据。数据官网如图2.1-2所示。

图2.1-2 第六次全国人口普查官网数据

网址：index (stats.gov.cn)

这里针对人口数据需要在Hubei.js里创建一个对象cityData，用于存储湖北省各市的人口数，最后创建的JSON数据如图2.1-3所示。

图2.1-3 Hubei.js数据

Tips：根据Javascript的惯用书写逻辑，这里的JS数据如果书写在HTML中的<script>中也是合适的，但这里为了保持代码的健壮性，将数据部分分为一个单独的JS文件去进行处理更加可取，在后期的个人实现网站部分笔者也会采取相应的方式来进行实现代码分块设计从而保持代码高可读性和高可移植性。

2.1.2 代码编辑

Leaflet提供了良好的开发生态，这里我们可以进入到Leaflet Plugins中进入需求第三方库安装，并在主html文件中进行引用。

图2.1-4 Leaflet Plugins

Tips：这里笔者为了加快运行进度，在引用JS时均采取了本地读取的方式，并没有从网路引入。

引用下载好的JS文件后，接下来创建Map对象，利用AJAX异步加载2.1.1中已经获取到的数据到图层中，然后创建样式函数并设置色彩样式，在加载数据时对每个图层添加L.marker标注，最后自定义Leaflet中的L.Controler对象添加图例，并设置鼠标监听事件添加交互，完成整个样式的开发。

最终可以实现如图2.1-5所示的可视化效果，由于其中添加了鼠标监听事件的处理，故可以进行鼠标交互的功能。

图2.1-5 分级统计图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.1-6所示。

图2.1-6 程序流程图

2.1.3 leaflet-choropleth插件下绘制

如上描述为常规绘制的分级统计图，在Leaflet中还有leaflet-choropleth插件可以用于绘制操作，操纵流程依旧是先建立Map对象，利用AJAX异步加载2.1.1中已经获取到的数据到图层中，然后创建样式函数并设置色彩样式，在加载数据时对每个图层添加L.marker标注，最后自定义Leaflet中的L.Controler对象添加图例，并设置鼠标监听事件添加交互。而这里的可视化效果和采用常规方法进行模拟的效果会产生较大的差异就主要体现在图例的分块部分，代码的可视化结果如图2.1-7所示。

图2.1-7 分级统计图另例

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.1-8所示。

图2.1-8 程序流程图

2.2 分区统计图表法

在本处及后续，具体的数据获取可以参考2.1.1节进行类似的数据形式获取，不再阐述具体方法的数据获取，当然在教材《开源网络地图可视化——基于Leaflet的在线地图开发》中也已经给出详细的数据下载地址。

2.2.1 柱状统计图表法

参考2.1.2节，首先进行必要的第三方JS库的下载，参考教材，下载L.d3SvgOverlay库、D3库、L.Legend库。接下来，使用L.GeoJSON.AJAX异步加载的方式读取数据，并将数据绘制在地图上。绘制完毕后，确定所需要展示的柱状统计图，使用D3库的标准绘图流程L.select()、L.data()、L.enter()、L.append()绘制相应的图表，并将其添加到地图的相应位置，并对数据添加注记。最后，使用L.Legend插件添加相应的图例，并进行代码的调试和运行。运行后的可视化程序如图2.2-1所示。

图2.2-1 柱状统计图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.2-2所示。

图2.2-2 程序流程图

2.2.2 饼状/环状统计图表法

类似的，这里可视化绘制饼状/环状统计图表的流程也和绘制柱状统计图表的步骤一样，但不同的是这里需要应用L.d3SvgOverlay()进行饼形状/环状图元的绘制，代码的可视化结果如图2.2-3所示。

图2.2-3 柱状统计图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.2-4所示。

图2.2-4 程序流程图

2.2.3 折线统计图表法

可视化绘制折线统计图的流程和此前的两种分区统计图标的绘制步骤一样，但不同的是这里需要应用L.d3SvgOverlay()进行折线的绘制，代码的可视化结果如图2.2-5所示。

图2.2-5 折线统计图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加图表】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.2-6所示。

图2.2-6 程序流程图

2.3 热力图

在Leaflet中有诸多第三方库可用于绘制热力图，在本节中主要是应用heatmap.js进行绘制。首先下载并在html中引用Leaflet-heatmap插件，而后参照教材在美国地质勘探局获取热力图所需要的数据。先将数据加载到地图上，并应用addTo()方法加载Google地图作为底图。将获取的数据通过JS代码构建成热力图所需要的变量，传递给热力图对象。随后设置热力图的样式，将热力图加入地图。通过JS代码加入鼠标事件，实现鼠标的交互功能。使用L.Legend插件加入图例，并通过JS代码将图例颜色修改为渐变色。代码的可视化结果如图2.3-1所示。

图2.3-1 热力图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加热力图】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.3-2所示。

图2.3-2 程序流程图

2.4 蜂窝图

由于旧有的D3.js不足以支持在新版Leaflet下运行，因此，这里引用Turf.js库进行蜂窝图的绘制操作。这里首先认识获取美国地质勘探局的过去一个月全球地震发生分布数据，并下载并引用必要的Turf.js、colorbrewer.js、choropleth.js库。接着创建地图，将Google地图作为底图添加到Leaflet地图中。随后开始绘制蜂窝图，这里首先获取视窗范围，并使用Turf()方法创建蜂窝并铺满整个屏幕。根据所获取的地震发生数据，过滤掉未发生地震处的蜂窝图形，然后使用colorbrewer库预设的配色方案设置蜂窝图样式。最后自定义地图图例控件并设置其样式。代码的可视化结果如图2.4-1所示。

图2.4-1 蜂窝图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加蜂窝图】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.4-2所示。

图2.4-2 程序流程图

2.5 等值线图

等值线图同样是应用第三方插件Turf.js进行绘制。这里首先获取湖北省边界数据和湖北省高程数据，下载所需的omnivore.js库。使用Turf库进行等高线的绘制，将高程点数据绘制成为等高线。结合等高线和湖北省边界对等高线进行裁剪，只保留湖北省域内的等高线，同时为使用TextPath库为等高线添加注记。最后应用L.Legend()方法添加地图图例，监听鼠标事件并加上鼠标交互逻辑，调试并运行代码。代码的可视化结果如图2.5-1所示。

图2.5-1 蜂窝图

代码的程序流程主要依照【开始网页】-【引入Leaflet初始插件】-【获取数据】-【样式设置】-【添加等值线图】-【添加注记】-【添加图例】-【设置交互】-【结束】的主线流程进行，如图2.5-2所示。

图2.5-2 程序流程图

2.6 分层设色法

这里的分层设色法的实例其实就是对2.5中的等高线进行数据操作，因此这里应用的数据也是2.5节已经下载好的湖北省的边界数据和湖北省高程数据。接下来，下载并引用数据读取库omnivor.js和分层设色库chororpleth.js。加载读取高程数据，使用Turf库将高程数据转化为等值面。使用Turf库遍历等值面和边界，获取湖北省内等值面。接下来，添加地图图例，并设置样式，同时监听鼠标事件设置交互，最后调试和运行代码。代码的可视化结果如图2.6-1所示。