基于Leaflet.js和Turf.js的等值线区间自定义及颜色自适应实践

前言

一、Turf.js等值线相关制作

1、生成方法

2、主要参数

二、实际案例开发

1、新建展示页面

2、等值线生成

3、基于Leaflet的再优化

总结

前言

在气象方面的GIS应用当中，会根据实际的工作需要建立不同的监测站点。气象监测站的主要功能包括：（1）天气预报和气候研究。通过实时监测大气压力、温度、湿度、风速、风向和降水等参数，对天气和气候变化进行准确预测和研究，提供及时的天气预报和气候变化的科学依据。（2）灾害预警和防控。监测和预警各类自然灾害，如暴雨、大风、强降雪等，及时发出预警信息，帮助居民和相关部门采取紧急应对措施，减轻灾害造成的损失。（3）环境保护与生态研究。测量大气污染物，如PM2.5、O3等，提供空气质量和污染状况的数据，为环境保护部门和科研机构提供重要依据。（4）农业生产与粮食安全。提供气象参数，如温度、湿度、降雨量等，为农田灌溉、作物生长和病虫害预警等农业生产活动提供重要数据，保障粮食安全和农业发展。（5）生态旅游和户外活动。提供气象参数和天气预报，帮助人们选择合适的时机和地点，增加旅游活动的安全性和可行性。（6）航空航天和海洋工程。提供气象数据，如风速、风向、气温等，用于航班安排、船舶安全和海洋工程施工，确保航空和海洋工程的安全进行。

在上述这些应用当中，为了可以从空间尺度进行数据分布的可视化。等值线是制图对象某一数量指标值相等的各点连成的平滑曲线，由地图上标出的表示制图对象数量的各点，采用内插法找出各整数点绘制而成的。每两条等值线之间的数量差额多为常数，可通过等值线的疏密程度来判断现象的数量变化趋势。等值线法往往与分层设色的表示手段配合使用，即采用改变颜色深浅、冷暖和阴暗来表示现象的数值变化趋势，使图面更清晰、易读。另外往往在等值线上加数字注记，便于直接获得数量指标。等值线法除用于表示空间现象数量的连续而逐渐变化的特征外，还可表示现象随时间的变化，现象的重复性（频度）等。等值线图用数值相等各点联成的曲线（即等值线）在平面上的投影来表示被摄物体的外形和大小的图。等值线是由某种现象的数值相等的各点所连成的一条平滑曲线，如等高线、等温线、等雨量线、等磁偏线、等气压线等。等值线法就是利用一组等值线表示制图现象分布特征的方法。如下图所示：

既然利用等值线可以得到很多有用的有效信息，那么在WebGIS当中，如何进行等值线的绘制呢？在不同的值域分布区间当中，如何根据值域的区间来进行不同颜色的自适应适配呢？在一些技术博客中有讲解如何进行WebGIS的web生成。但是目前均有一些缺陷，以Turf.js为例，其官方自带的例子过于简单，只是把基础的功能展示出来，没有实现如何进行值域的自适应。而另外一些有值域颜色自适应的，主要是采用OpenLayers来进行开发的。而使用Leaflet进行等值线生成的例子相对较少，而且示例不全。因此才有了本文的创作。本文将重点讲解在Leaflet中使用turf来生成等值线，同时可以自主适配不同的值域信息，根据值域区间配置不同的颜色，让可视化效果更加贴近实际需要。如果您目前也刚好在学习有关于Leaflet中进行等值线的展示的需求，不妨来看看博文。

等值线的生成从生成角度可以分成前端生成和后端生成，本文采用前端生成的方式。采用turf.js作为前端生产的组件。相关的数据可以从后台查询得到，本文使用的数据均为演示数据，不是真实数据。

一、Turf.js等值线相关制作

想要在前端直接生成等值线，有一个非常值得学习的工具，那就是Turf.js组件，通过这个组件可以做很多的前端空间计算和分析。当然，如果是大规模的空间分析，不建议放在前端，毕竟前端作为可视化终端，并不是用来解决分析的，主要是作为效果的展示终端。关于Turf的能力，在之前的博客中也有一定的介绍，关于Turf.js，感兴趣的朋友可以自己到相关网站上查看，turf.js。

为了本文的介绍同时让大家对Turf的等值面生成有一个基本的了解和掌握，本节将首先对Turf.js进行简单介绍，将其的api及相关的属性和方法进行讲解，让大家有一个基本的认识。

1、生成方法

在Turf当中，生成等值线的方法主要是isolines方法，这里对isolines方法中的相关参数，使用方法进行讲解，为下一步的实例开发打好技术基础。

Takes a grid FeatureCollection of Point features with z-values and an array of value breaks and generates isolines.翻译成中文就是：采用带有z值的点特征的网格FeatureCollection和一组断点值并生成等值线。

2、主要参数

isolines方法的参数主要有三个，分别如下：

参数	类型	描述
pointGrid	FeatureCollection <Point>	input points
breaks	Array	values of zProperty where to draw isolines
options	Object	可选参数：见下文

其中，pointGrid是空间点的集合，可以理解成为多个坐标点的信息，主要是空间信息。breaks在这里是值域区间，实际情况需要根据不同值域合理分开。options选项是一个可选参数，其包含的主要信息如下：

属性	类型	默认值	描述
zProperty	string	elevation	the property name in
commonProperties	Object	{}	GeoJSON properties passed to ALL isolines
breaksProperties	Array	[]	GeoJSON properties passed, in order, to the correspondent isoline; the breaks array will define the order in which the isolines are created

其中，zProperty是指实际的值，比如气象中的实际降水量，温度，湿度等具体的值。commonProperties是geojson的公共属性，所有的等值线都会拥有这些属性，在设置时要谨慎。breaksProperties主要是用来进行对应的分区属性定义的，与这个参数的参数对应的breaks对应，也就是说，这个范围与breaks要一致，顺序也一并保持一致。

经过isolines的计算，得到的结果是FeatureCollection <MultiLineString> - a FeatureCollection of MultiLineString features representing isolines。其结果是一个多线，也就是等值线。至此我们对其核心api有了基本的认识。下面将基于以上的核心api进行实际应用的开发。

二、实际案例开发

在进行等值线生成的实例开发之前，还有一些数据是需要准备的。比如需要展示的区域范围，由于使用的模拟数据，我们采用pointGrid生成随机点位来标识范围。

1、新建展示页面

为了展示出所有空间数据，需要定义html对象来绑定地图对象。关键代码如下：

<!DOCTYPE html>
<html>
<head><title>Turf生成等值线</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="/2d/leaflet/leaflet.css" /><script src="/2d/leaflet/leaflet.js?v=1.0.0"></script><!-- 使用unpkg --><script src="https://unpkg.com/@turf/turf/turf.min.js"></script><style>#map {margin: 0;padding: 0;position: absolute;width: 99%;height: 98%;}</style>
</head>
<body>
<!--
<div id="mapid" style="width: 100%; height: 600px;"></div>-->
<div id="map"></div>
<script>var mymap = L.map('map').setView([29.052934, 104.0625], 5);
var tileLayer = L.tileLayer('http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png', {maxZoom: 7,minZoom:0
});
tileLayer.addTo(mymap);
</script>
</body>
</html>

2、等值线生成

定义完成地图及底图对象后，我们来使用turf生成模拟数据，首先设置展示范围，代码如下：

var extent = [90, 20, 120, 38];
var cellWidth = 100;
var pointGrid = turf.pointGrid(extent, cellWidth, {units: 'miles'});

extent是类似于bbox参数的外包框范围，cellWidth是单元宽度，跟pointGrid中的单位配套使用。上面的代码表示在extent范围内生成100米的范围点。生成范围点还不够，还需要对点位的数据进行赋值。这里我们采用模拟的方式赋值。

for (var i = 0; i < pointGrid.features.length; i++) {var val = Math.random() * 10;pointGrid.features[i].properties.temperature = Math.random() * 10;
}

在生成的点中，追加一个气温的属性，使用随机数的方式进行赋值。最后进行等值线的值域定义，关键代码如下：

//等值线绘制参数配置
var isobands_options = {zProperty: "temperature",commonProperties: {"fill-opacity": 0.85},breaksProperties: [{fill: "#009900"},{fill: "#66C200"},{fill: "#99D600"},{fill: "#CCEB00"},{fill: "#FFCC00"},{fill: "#FF9900"},{fill: "#FF5000"},{fill: "#FF0000"}]
};var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

最后使用isolines进行等值线生成，将返回的geojson对象绑定到leaflet创建的map对象中。

var lines = turf.isobands(pointGrid, breaks, isobands_options);var myStyle = {"color": "red","weight": 5,"opacity": 0.65};L.geoJSON(lines, {style:myStyle
}).addTo(mymap);

首先来看第一版的效果，将页面发布到nginx当中，可以看到以下的效果。可以看到，虽然等值线生成了，但是都是统一的颜色，并没有按照不同的颜色进行区分开。这也是Leaflet当中大多数的等值线生成案例的效果。

下面我将进行更深入的讲解，将等值面按照值域渲染不同的颜色，让等值线体现出更加丰富的信息，同时点击等值线可以进行相应范围的提示。

3、基于Leaflet的再优化

首先我们在代码中是定义了相应的breaksProperties，不同的点可以进行不同颜色的渲染。但是没有起作用，主要是因为在等值线中使用了固定的颜色。

L.geoJSON(lines, {style:myStyle
}).addTo(mymap);

这里把每条线都设置了固定颜色，因此我们要结合geojson的渲染来进行颜色的可视化。

L.geoJSON(lines, {style:feature => {return {color: feature.properties.fill,weight: 2,opacity: 0.5};}}).addTo(mymap);

这里再来看一下效果如何，实际效果图如下：

至此，已经实现颜色的值域区间自定义。最后来绑定提示值。

L.geoJSON(lines, {style:feature => {return {color: feature.properties.fill,weight: 2,opacity: 0.5};}}).bindPopup(function(layer){return "("+layer.feature.properties.temperature + ")°";}).addTo(mymap);

到这里，就基本完成了等值线的生成，自定义区间和颜色自适应，还有等值线的值智能提示。我们完成了基于Leaflet的等值线的改造和支持。

总结

以上就是本文的主要内容，本文将重点讲解在Leaflet中使用turf来生成等值线，同时可以自主适配不同的值域信息，根据值域区间配置不同的颜色，让可视化效果更加贴近实际需要。本文首先对turf生成等值线的相关函数进行深入介绍，包括其入参的参数及值定义。然后介绍了如何进行等值线渲染的基本可视化开发，最后基于Leaflet讲解了如何进行等值线的绘制，丰富了Leaflet的展示案例，很多社区在Leaflet当中进行等值线的动态展示缺乏介绍，本文结合实例的讲解进行了详细的讲解。看博文的朋友如果对相关技术感兴趣，不妨留言交流。turf作为前端生成的一种方案，提供了动态，样式可编辑的渲染模式，值得进行尝试。