等值区域图是新闻报道、政策报告和企业仪表板里最常见的专题地图。如果你见过按差额上色的选举地图、按病例率上色的 COVID 地图,或按收入上色的 GDP 地图,你就读过等值区域图。
本文讲解什么是等值区域图、何时使用、最常见的错误,以及如何用矢量瓦片 API 构建一张生产级的等值区域图。
一句话定义
等值区域图根据每个区域测得的单一数值为该区域填色,配色编码大小。
这个词源自希腊语 khoros(区域)和 plethos(多)。最早出现在 1820 年代法国统计学家手中,此后一直是专题制图的主力。
等值区域图示例
经典用法:
- 按国家、州或邮编划分的人口密度
- 按选区划分的选举结果,颜色深浅表示胜选差额
- 按国家划分的人均 GDP,通常采用对数刻度
- 按地区划分的失业率
- 按县划分的每十万居民 COVID 病例数
- 按街区划分的平均房价
- 按人口普查区划分的宽带接入率
- 按农业产区划分的作物产量
共同特征是:数据是每个预定义区域一个数值。
等值区域图 vs 热力图
两者常被混淆,区别很重要。
等值区域图需要预定义区域。数据已经聚合。每个区域一种颜色。边界本身是信息的一部分。
热力图需要点数据。密度通过分箱或核平滑计算。输出是忽略行政边界的连续渐变。用于发现聚集,而不是区域间比较。
每个邮编一个数值,用等值区域图。一团 GPS 打点,用热力图。
等值区域图的构建方式
三个要素:
- 边界几何。 你想着色的区域的 GeoJSON 多边形(或矢量瓦片图层),每个区域带稳定标识符(例如 ISO 国家码、美国 FIPS 州码、欧盟 NUTS 码、邮编)。
- 每个区域的数值。 一个简单的 JSON 对象或 CSV,用同一标识符作为键。
- 把两者连接的渲染器。 现代 Web 地图库(MapLibre GL、Mapbox GL、deck.gl、OpenLayers)可在运行时通过 feature-state 或属性表达式把数据关联到边界。
以下是 MapLibre GL JS 的概念性写法:
map.addSource('regions', {
type: 'vector',
url: 'https://api.mapatlas.xyz/v1/tiles/regions.json',
});
map.addLayer({
id: 'regions-fill',
type: 'fill',
source: 'regions',
'source-layer': 'regions',
paint: {
'fill-color': [
'interpolate',
['linear'],
['feature-state', 'value'],
0, '#f7fbff',
50, '#6baed6',
100, '#08306b',
],
'fill-opacity': 0.8,
},
});
// Push your data to each feature at runtime
for (const [regionId, value] of Object.entries(yourData)) {
map.setFeatureState(
{ source: 'regions', sourceLayer: 'regions', id: regionId },
{ value }
);
}
地图只拉取一次边界瓦片,数据变化时即时重新上色。无需服务端重新渲染。
选择合适的配色
三条规则:
单向数据用顺序配色。 同一色相从浅到深。适用于无显著中点、从低到高的数量(人口、收入、比率)。
双向数据用发散配色。 一个中性中点和两侧扩散的两种色相(红与蓝、棕与青)。适用于零或均值有意义、数值可正可负的情况(同比增长、选举差额、偏离均值)。
避免彩虹配色。 它暗示的顺序与人眼感知并不一致,对色盲用户也不友好。ColorBrewer(colorbrewer2.org)是制图学验证的标准等值区域图配色参考。
常见错误是分箱过多。五到七个最为合适,再多读者就难以分辨相邻的色阶。
分级方法的选择
确定配色后,还要决定分箱边界放在哪里:
- 等间距。 把取值范围均分。数据分布均匀时合适,遇到离群值就失灵。
- 分位数。 每个分箱包含相同数量的区域。希望每种颜色都出现时有用,但可能掩盖差异的真实大小。
- 自然断点(Jenks)。 最小化分箱内方差。最依据数据的默认选择。
- 手动。 当分箱边界本身有含义时(如税阶、人口学阈值)。
分级方法对地图讲述的故事有实实在在的影响。任何正式报告中都应公布所用的分级方法。
常见陷阱
面积偏差。 面积大但密度低的区域在视觉上占主导。按差额上色的美国大选等值区域图会大片偏红,因为农村县面积巨大。变形地图(cartogram)或点密度图可以纠正这一点。
用原始计数而不是比率。 「各州 COVID 病例数」地图基本就是一张人口地图。除非你要展示的就是绝对值,否则始终按人口、面积或其他分母归一化。
误导性刻度。 分位数刻度让每张图看起来都很「有戏」,即便底层差异其实很小;等间距刻度在有离群值时又把所有图压平。让分级方法匹配你要回答的问题。
缺失数据。 提前决定无数据区域是显示为灰色、剔除,还是按零着色。每种选择都会改变阅读。
何时改用其他图表
当每个区域有多个变量时,等值区域图会把信息压扁。可以考虑:
- 小型多图。 一组等值区域图,每个变量一张。
- 双变量等值区域图。 用二维色板编码两个变量。难读,但奏效时很强大。
- 变形地图。 按数值扭曲区域大小,在面积偏差严重时有用。
- 地图上的条形图。 有时数据其实就是一张表,地图只是装饰。
制图是沟通。等值区域图只是众多工具之一。
MapAtlas 在哪里发挥作用
Dynamic Maps API 提供国家、地区、邮编边界的矢量瓦片源,可以在运行时按你自己的数据着色,正如上面的 MapLibre 片段所示。这些边界托管在欧盟,带版本戳,专门设计为可与标准标识符(ISO 3166、NUTS、各国邮编系统)干净地连接。
对于需要按区域展示聚合统计的页面(按邮编的房价、按地区的配送成本、按区域的销售额),GeoEnrich API 会返回按同一边界 ID 关联的区域数值,地图与表格可以共用同一套连接。完整的专题地图背景见 Thematic Map Guide。
常见问题
什么是等值区域图?
等值区域图(也称分级统计图)是一种专题地图,将地理区域(国家、州、邮编、人口普查区)按某一统计变量的取值进行着色或填充。颜色深浅编码数值大小,通常深色代表较高值,浅色代表较低值。等值区域图是可视化人口密度、选举结果、人均 GDP、失业率,以及任何按行政边界聚合的指标的标准方式。
等值区域图与热力图有什么区别?
等值区域图按预定义区域(国家、邮编、行政区)的聚合值上色。热力图则把点数据的强度在空间上连续呈现,并不遵循行政边界。如果数据已经按区域聚合(例如各州得票数、各邮编销售额),用等值区域图。如果是一团点要看聚集位置(例如犯罪事件、客户标点、传感器读数),用热力图。
什么时候应该使用等值区域图?
当数据是每个区域一个数值,且区域面积大致可比,或可以按面积或人口归一化时,使用等值区域图。合适的例子:各县宽带覆盖率、各地区每十万人 COVID 病例数、各邮编平均租金。避免使用的情况:区域面积差异极大(大面积的农村区域即便人口稀少也会在视觉上占主导),或每个区域有多个变量(改用小型多图或其他图表类型)。
如何构建一张等值区域图?
需要三样东西:区域的边界几何(GeoJSON 多边形)、每个区域按稳定 ID 关联的数值,以及把两者连接并应用配色的渲染器。常见技术栈:MapLibre GL 或 Mapbox GL 配合 fill-color 表达式、deck.gl 的 GeoJsonLayer 配合 getFillColor、D3.js 配合 d3-geo 生成静态 SVG,或托管的动态地图 API。MapAtlas Dynamic Maps API 提供国家、地区、邮编边界瓦片,运行时即可用你自己的数据着色。
等值区域图适合用哪种配色?
若数据是带自然零点的单向数量,使用单色顺序配色(如浅蓝到深蓝)。若数值围绕有意义的中点向两侧发散(选举差额、同比变化),使用双色发散配色(如红到白到蓝)。避免彩虹配色:它暗示了人眼无法均匀感知的顺序,且对色盲用户不友好。ColorBrewer 是经制图学验证的标准配色参考。

