等高线图

等高线图的简介

等高线图是通过连接地图上相同数值的点得到的闭合曲线图。最常见的是地形图上海拔高度相等的各点所连成的等高线，在等高线上标注的数字为该等高线的海拔高度。等高线按其作用不同，可分为首曲线、计曲线、间曲线与助曲线四种。

除地形图之外，等高线也广泛应用于数据可视化中，用于显示二维平面上的三维数据分布，如温度分布、气压分布、概率密度分布等。等高线一般不相交，但有时可能会重合。在同一等高线上的各点数值相同。在等高线稀疏的地方，数值变化较缓；而在等高线稠密的地方，数值变化较陡。

英文名：Contour Line, Contour Plot

等高线图的构成

图表类型	等高线图
适合的数据	三维数据：两个连续变量（X、Y 坐标）和一个数值变量（Z 值）
功能	显示二维平面上连续数据的分布模式和数值变化
数据与图形的映射	X 坐标映射到横轴位置 Y 坐标映射到纵轴位置 Z 值通过等高线的层次和标注显示可选择性地用颜色表示数值大小
适合的数据条数	连续的二维网格数据，数据点越多，等高线越平滑

等高线图的应用场景

适合的场景

地形表示：最经典的应用，用等高线表示海拔高度，清晰展示山脉、谷地等地形特征。
气象数据：显示温度分布、气压分布、降雨量分布等气象要素的空间变化。
科学研究：在物理学、化学、生物学等领域显示电场、磁场、浓度等二维分布。
商业分析：展示市场份额、人口密度、消费水平等在地理空间上的分布。
概率密度：在统计学中显示二维概率密度函数的分布形态。

不适合的场景

离散数据：等高线需要连续的数值分布，不适合显示离散的分类数据。
时间序列：等高线主要用于空间分布，不适合显示时间维度的变化。
精确数值读取：虽然可以标注数值，但等高线主要用于显示趋势和模式，不适合精确读取具体数值。
数据点稀疏：当数据点过于稀疏时，插值生成的等高线可能不够准确。

以下是一个典型的等高线图应用场景：

地形海拔分布图。 下图展示了某山区的海拔高度分布，通过等高线可以直观地看出山峰、山谷和坡度的分布情况。等高线密集的地方表示坡度陡峭，等高线稀疏的地方表示地势平缓。

import { Chart } from '@antv/g2';

// 模拟地形高程数据
const terrainData = [];
for (let x = 0; x <= 50; x += 2) {
  for (let y = 0; y <= 50; y += 2) {
    // 模拟山峰地形：两个山峰的高程分布
    const elevation1 = 100 * Math.exp(-((x - 15) ** 2 + (y - 15) ** 2) / 200);
    const elevation2 = 80 * Math.exp(-((x - 35) ** 2 + (y - 35) ** 2) / 150);
    const elevation = elevation1 + elevation2 + 10; // 基础海拔
    terrainData.push({ x, y, elevation });
  }
}

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'cell',
  data: terrainData,
  encode: {
    x: 'x',
    y: 'y',
    color: 'elevation',
  },
  style: {
    stroke: '#333',
    strokeWidth: 0.5,
    inset: 0.5,
  },
  scale: {
    color: {
      palette: 'viridis',
      type: 'sequential',
    },
  },
  legend: {
    color: {
      length: 300,
      layout: { justifyContent: 'center' },
      labelFormatter: (value) => `${Math.round(value)}m`,
    },
  },
  tooltip: {
    title: '海拔信息',
    items: [
      { field: 'x', name: '经度' },
      { field: 'y', name: '纬度' },
      {
        field: 'elevation',
        name: '海拔',
        valueFormatter: (value) => `${Math.round(value)}m`,
      },
    ],
  },
});

chart.render();

这个例子展示了：

使用网格单元格（cell）模拟等高线效果，显示地形海拔分布
通过颜色渐变表示不同的海拔高度，形成类似等高线的视觉效果
提供交互式的悬停提示显示具体位置和海拔信息
使用合适的色彩映射（viridis 色板）来增强视觉效果
添加描边来突出网格边界，增强等高线的视觉感知

等高线图的扩展

等高线轮廓图

使用线条绘制等高线轮廓，更接近传统地形图的表现形式。

import { Chart } from '@antv/g2';

// 生成等高线数据
const generateContourLines = () => {
  const lines = [];
  const levels = [20, 40, 60, 80, 100]; // 等高线级别

  levels.forEach((level, index) => {
    // 为每个等高线级别生成环形线条
    const points = [];
    const centerX = 25;
    const centerY = 25;
    const baseRadius = 5 + index * 4;

    for (let angle = 0; angle <= 360; angle += 5) {
      const radian = (angle * Math.PI) / 180;
      const radius = baseRadius + Math.sin((angle * Math.PI) / 45) * 2; // 添加一些变化
      const x = centerX + radius * Math.cos(radian);
      const y = centerY + radius * Math.sin(radian);
      points.push({ x, y, level, lineId: `line_${level}` });
    }
    lines.push(...points);
  });

  return lines;
};

const contourLines = generateContourLines();

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 400,
});

chart.options({
  type: 'line',
  data: contourLines,
  encode: {
    x: 'x',
    y: 'y',
    color: 'level',
    series: 'lineId',
  },
  style: {
    strokeWidth: 2,
    strokeOpacity: 0.8,
  },
  scale: {
    color: {
      type: 'sequential',
      palette: 'oranges',
    },
    x: { nice: true },
    y: { nice: true },
  },
  axis: {
    x: { title: '距离 (km)' },
    y: { title: '距离 (km)' },
  },
  legend: {
    color: {
      title: '海拔高度 (m)',
      layout: { justifyContent: 'center' },
    },
  },
  tooltip: {
    title: '等高线信息',
    items: [
      { field: 'level', name: '海拔', valueFormatter: (value) => `${value}m` },
    ],
  },
});

chart.render();