Leaflet地图实现基于邻近点插值的温度渐变叠加层方案咨询

核心思路 #

普通热力图插件（比如Leaflet.heat）是基于点的权重叠加（本质是核密度估计），只适合展示频率/密度类数据，没法实现气象图那种连续数值的插值渐变。要达成需求，得先对温度数据做空间插值生成连续数值面，再转成Leaflet可加载的图层。

具体实现步骤 #

1. 选择空间插值算法 #

适合温度数据的常用算法：

• 反距离加权（IDW）：实现简单，适合分布均匀的数据点
• 克里金插值（Kriging）：考虑空间相关性，精度更高，适配气象类数据
• 自然邻域插值：对不规则分布的点适配性更好

2. 生成插值栅格 #

可选择前端轻量处理或后端专业生成：

前端纯浏览器实现（适合小数据量）

用基础计算库配合自定义插值逻辑：

// IDW插值示例函数
function idwInterpolation(x, y, dataPoints, power = 2) {
  let sumWeighted = 0;
  let sumWeights = 0;
  for (const point of dataPoints) {
    const dx = x - point.lng;
    const dy = y - point.lat;
    const distance = Math.sqrt(dx*dx + dy*dy);
    if (distance === 0) return point.temp; // 命中原始数据点
    const weight = 1 / Math.pow(distance, power);
    sumWeighted += point.temp * weight;
    sumWeights += weight;
  }
  return sumWeighted / sumWeights;
}

后端生成GeoTIFF（推荐大数据量场景）

用Python工具链生成专业栅格：

import geopandas as gpd
import rasterio
import numpy as np
from scipy.interpolate import griddata

# 加载温度点数据
gdf = gpd.read_file('temperature_points.geojson')
points = gdf[['lon', 'lat']].values
values = gdf['temp'].values

# 构建栅格网格
xmin, xmax, ymin, ymax = gdf.total_bounds
resolution = 0.01  # 栅格分辨率，单位：度
x = np.arange(xmin, xmax, resolution)
y = np.arange(ymin, ymax, resolution)
xx, yy = np.meshgrid(x, y)

# 执行立方插值（可替换为IDW/克里金）
grid_temp = griddata(points, values, (xx, yy), method='cubic')

# 保存为GeoTIFF
with rasterio.open('temperature_raster.tif', 'w', driver='GTiff',
                   height=yy.shape[0], width=xx.shape[1],
                   count=1, dtype=str(grid_temp.dtype),
                   crs=gdf.crs,
                   transform=rasterio.transform.from_origin(xmin, ymax, resolution, resolution)) as dst:
    dst.write(grid_temp, 1)

3. 在Leaflet中加载插值图层 #

方法1：Canvas动态渲染

自定义Canvas叠加层实时计算并绘制颜色：

// 创建Canvas叠加层
L.canvasOverlay(function(canvas, params) {
  const ctx = canvas.getContext('2d');
  const bounds = params.bounds;
  const zoom = params.zoom;

  // 遍历Canvas像素，计算对应地图坐标的温度并上色
  for (let x = 0; x < canvas.width; x++) {
    for (let y = 0; y < canvas.height; y++) {
      // 转换Canvas坐标为地图经纬度
      const point = params.containerPointToLatLng([x, y]);
      // 调用插值函数获取温度
      const temp = idwInterpolation(point.lng, point.lat, temperatureData);
      // 温度映射为渐变颜色
      const color = getColorFromTemp(temp);
      ctx.fillStyle = color;
      ctx.fillRect(x, y, 1, 1);
    }
  }
}).addTo(map);

// 温度转渐变颜色函数示例（-10℃到30℃：蓝→绿→红）
function getColorFromTemp(temp) {
  const normalized = (temp + 10) / 40;
  const r = Math.min(255, Math.max(0, Math.floor(normalized * 255)));
  const g = Math.min(255, Math.max(0, Math.floor((1 - Math.abs(normalized - 0.5)) * 510)));
  const b = Math.min(255, Math.max(0, Math.floor((1 - normalized) * 255)));
  return `rgb(${r},${g},${b})`;
}

方法2：加载GeoTIFF图层

用leaflet-geotiff插件加载后端生成的栅格：

// 加载温度栅格并配置颜色渐变
L.leafletGeotiff('temperature_raster.tif', {
  renderer: new L.leafletGeotiff.Renderer({
    opacity: 0.7,
    colorScale: ['#0000ff', '#00ff00', '#ff0000'],
    domain: [-10, 10, 30] // 对应温度区间
  })
}).addTo(map);

4. 实用优化建议 #

• 数据点超过100个时，优先用后端生成栅格，避免前端性能卡顿
• 搭配Leaflet.legend插件添加温度-颜色对照图例
• 插值时可结合地形、行政区划等边界约束提升精度
• 根据地图缩放级别动态调整插值分辨率，平衡效果与性能

内容的提问来源于stack exchange，提问作者Moritz von Schweinitz