【Leaflet】基础使用指南

 1. 分级统计图绘制

不使用leaflet-choropleth插件绘制分级统计图时，在加载行政区的GeoJSON数据时通过函数的方式判断每个城市的人口值的大小返回对应的颜色值显示在屏幕上，同时添加了注记和图例，也设置了鼠标的交互事件，鼠标悬停、移入和点击时实现相应的功能。

图 1 分级统计图行政区颜色设置流程图

图 2 分级统计图标记、图例及交互流程图

使用leaflet-choropleth插件进行分级统计图的绘制时，主要在设置GeoJSON数据显示样式时进行了修改，在将人口数据添加到GeoJSON数据后创建分级统计图图层进行绘制。

图 3 使用leaflet-choropleth插件绘制分级统计图流程图

2. 分区统计图绘制

柱状统计图表法

绘制柱状统计图时，先进行了数据整合将各省份不同性别的人口数和对应省份的中心地理坐标整合到同一个数组中，再创建覆盖图层通过D3.js的selectALL、data、enter、append标准绘图流程绘制柱状图，最后添加注记和图例。

图 4 柱状统计图绘制流程图

状/环状统计图表法

绘制饼状图时，先进行了数据的整合将三产的增加值和各省份的地理中心整合到同一数组中，在绘制饼状图时通过循环从数据数组中获取数据利用pie函数绘制到pieOverlay图层上，最后绘制标注和图例。

图 5 绘制饼状图流程图

折线统计图表法

折线图的绘制与柱状图和饼状图的绘制略有不同，在进行了数据获取和整合后，需要分别进行坐标轴的绘制、折线图的绘制、散点图的绘制，将折线图拆分成三部分进行绘制，并且绘制折线时没有使用标注的绘图流程而是line函数进行绘制。

图 6 绘制折线图流程图

3. 热力图绘制

绘制热力图时，通过USGS官网下载的数据结合heatmap的插件，将数据整合成插件支持的数据格式后加载热力图覆盖图层，最后添加图例和鼠标提示。在添加图例时，需要将显示的图例样式修改为渐变的填充色。

图 7 热力图绘制流程图

4. 蜂窝图绘制

绘制蜂窝图时，使用了turf、choropleth、colorbrewer库，先在地图视图中全部铺满正六边形，再结合地震数据将没有地震发生的正六边形过滤掉，最后再进行正六边形的渲染，对颜色进行插值，设置轮廓颜色、宽度、透明度等样式。

图 8 蜂窝图绘制流程图

5. 等值线图绘制

等值线的绘制用到了湖北省的境界数据和高程数据，使用了leaflet-omnivore、turf等库，先利用isolines方法绘制了所有等高线后，再与湖北省境界数据进行内包和相交的判断，最后把湖北省境界内的等高线数据进行保留并显示再地图上。

图 9 等值线图绘制流程图

​​​​​​​6. 分层设色法绘制

分层设色法和等高线的绘制大致类似，先通过isobands方法绘制等值面并进行裁剪，再通过分级统计图类似的样式显示方法进行样式的设置。

图 10 分层设色法流程图

7. 标动​​​​​​​图画

​​​​​​​沿测地线运动

沿测地线的图标运动通过Geodesic和AnimatedMarker插件分别实现了测地线的绘制和图标运动。

图 11 沿测地线的图标运动流程图

​​​​​​​时间轴控件

利用GeoJSON数据中的时间属性结合TimeDimension插件进行了可视化。

图 12 时间轴流程图

​​​​​​​GPS轨迹动画

使用TimeDimension和leaflet-omnicore插件加载GPX数据并通过创建具有时间维度的GeoJSON图层添加到地图上。

图 13 GPS轨迹动画流程图

8. 折线动画

​​​​​​​蛇形动画

蛇形动画的实现通过高德API接口返回了用户通过鼠标设置的起止点之间的路径，经过处理后通过SnakeAnim插件加载到地图上。

图 14 蛇形动画流程图

​​​​​​​虚线动画

虚线动画的实现与蛇形动画的实现类似，均通过高德API返回路径并处理后，再通过DashFlow插件实现路径的显示和样式的设置。

图 15 虚线动画流程图

​​​​​​​蚂蚁动画

蚂蚁动画的实现和蛇形动画类似，使用到了AntPath插件创建一个动画图层，设置动画符号的显示样式。

图 16 蚂蚁动画流程图

​​​​​​​​​​​​​​流向图动画

流向图通过编辑好的一对一、多对一或一对多数据来显示飞机的流向，数据加载并添加属性列后再设置流向图的起止点和曲线样式，最后显示在地图上。

图 17 流向绘制流程图

9. 流场动画

​​​​​​​风、洋流等模拟

使用了velocity插件。

图 18 风、洋流的模拟流程图

​​​​​​​流场动画

实现流场动画时，通过L.VectorField.fromASCIIGrids和L.canvasLayer.vectorFieldAnim方法创建矢量动画图层并指定样式来实现流场动画，再通过setInterval方法随机改变动画短线的颜色。

图 19 流场动画流程图

​​​​​​​流场动画控制

通过getElementByld方法增加了交互元素并增加了监听函数，矢量图层的透明度需要通过setOpacity方法来进行调整。

图 20 流场动画控制流程图

​​​​​​​流场动画图例

图例通过colorBar方法进行添加，在函数中指定了图例的标题、速度单位、颜色升级等内容。