WebGIS数据展示怎么更直观？专题图、聚合点与热力图使用技巧

wowwwai GIS研习社 · 工具流程与项目排障

引言

“WebGIS数据展示怎么更直观？专题图、聚合点与热力图使用技巧”这个问题，通常出现在你已经把点、线、面数据加载到网页地图上，但用户仍然看不出重点：哪里多、哪里少、哪个区域异常、哪些点需要优先关注。

WebGIS数据展示不是把所有要素一股脑画到地图上。真正有效的展示，需要根据数据类型、业务问题和浏览尺度，选择专题图、聚合点或热力图等合适的表达方式。本文以常见 WebGIS 项目为场景，讲清楚三类可视化方法的适用条件、实现思路、参数设置和常见坑。

背景

在 WebGIS 项目中，数据展示不直观通常不是地图底图的问题，而是表达方式没有匹配业务问题。比如，同样是一批门店点位，如果用户想看“每个城市有多少门店”，适合用聚合点；如果想看“哪些区域门店密度最高”，适合用热力图；如果想看“各区县销售额高低”，则应该用专题图。

常见的 WebGIS 数据展示场景包括：

• 行政区统计数据展示：人口、产值、地块面积、风险等级，适合专题图。
• 大量点位浏览：监测站、门店、案件、车辆、POI，适合聚合点。
• 空间分布趋势分析：投诉热点、事故高发区、客流密度，适合热力图。
• 多尺度浏览：小比例尺看整体趋势，大比例尺看单个对象，需要组合使用多种方法。

如果不区分这些场景，最常见的结果就是：点位过密、图层遮挡、颜色含义不清、用户缩放地图后仍然找不到重点。

原理

WebGIS数据展示的核心原则是：先明确用户要回答的问题，再选择地图表达方式。

专题图主要用于表达“区域之间的差异”。它通常基于面数据，例如省、市、区县、网格、地块，通过颜色、分级或符号大小表达属性值。常见类型包括分级设色图、唯一值图、比例符号图。

聚合点主要用于解决“点太多看不清”的问题。它会在当前缩放级别下，把相邻点合并成一个带数量的聚合符号。用户放大地图后，聚合点逐渐展开为更小聚合或原始点。

热力图主要用于表达“空间密度趋势”。它不会强调每一个点的精确位置，而是通过颜色渐变表示点位在空间上的集中程度。热力图适合发现热点区域，但不适合做精确统计。

展示方法	适合数据	回答的问题	典型用途
专题图	面数据或带行政区编码的统计表	哪个区域高，哪个区域低	人口密度、风险等级、销售额分布
聚合点	大量点数据	当前视野内哪里点多	门店点位、设备点位、事件点位
热力图	大量点数据或带权重点数据	空间热点在哪里	事故热区、投诉集中区、客流热点

步骤

步骤一：先判断数据类型和用户问题

在写代码之前，先用一个简单清单判断该用哪种 WebGIS 数据展示方法。

• 如果数据是行政区、地块、网格等面数据，并且字段中有统计值，优先考虑专题图。
• 如果数据是成千上万个点，用户需要浏览点位数量和大致分布，优先考虑聚合点。
• 如果数据是点事件，并且用户关注空间密度和热点趋势，优先考虑热力图。
• 如果既要看总体趋势，又要查看单个对象，可以采用“热力图或聚合点 + 原始点图层”的组合。

不要一开始就问“Leaflet 怎么写”或“OpenLayers 怎么配样式”。更重要的是先确认：这张图到底想让用户看出什么。

步骤二：用专题图表达区域差异

专题图适合把统计字段映射为颜色或符号。例如区县销售额、街道人口密度、地块风险等级。WebGIS 中实现专题图，一般需要三类数据：面几何、统计字段、分级规则。

一个实用流程如下：

1. 准备面数据，例如行政区 GeoJSON、矢量瓦片或服务端返回的边界数据。
2. 确认用于渲染的属性字段，例如 sales、population_density、risk_level。
3. 设置分级方法，例如自然断点、等距分级、分位数分级或业务阈值分级。
4. 设置颜色带，例如从浅色到深色表示数值从低到高。
5. 添加图例，明确每个颜色对应的数值范围。

在 Leaflet 中，专题图样式通常通过 GeoJSON 图层的 style 函数实现：

function getColor(value) {
  return value > 10000 ? '#800026' :
         value > 5000  ? '#BD0026' :
         value > 2000  ? '#E31A1C' :
         value > 1000  ? '#FC4E2A' :
         value > 500   ? '#FD8D3C' :
                          '#FEB24C';
}

L.geoJSON(regionGeoJSON, {
  style: function(feature) {
    const value = feature.properties.sales;
    return {
      fillColor: getColor(value),
      weight: 1,
      color: '#ffffff',
      fillOpacity: 0.75
    };
  },
  onEachFeature: function(feature, layer) {
    layer.bindPopup(
      feature.properties.name + '<br>销售额：' + feature.properties.sales
    );
  }
}).addTo(map);

专题图最关键的不是颜色越多越好，而是分级要符合业务含义。比如风险等级本身如果只有“低、中、高”，就不要强行做 7 级渐变；人口密度如果差异极大，则要考虑分位数或对数分级，避免大部分区域颜色都挤在最低级。

步骤三：用聚合点解决点位过密

聚合点适合处理大量点数据加载后的遮挡问题。比如一个城市有几万条监测点、门店、订单或事件记录，如果全部用普通 marker 展示，地图会非常卡，而且用户看不到空间结构。

聚合点的使用步骤如下：

1. 将点数据整理为经纬度字段，或者转换为 GeoJSON 点要素。
2. 在前端地图中启用聚合插件或聚合图层。
3. 设置聚合半径，控制多少像素范围内的点会合并。
4. 设置最大聚合级别，放大到一定级别后显示原始点。
5. 为聚合点设置数量样式，例如数量越大颜色越深或圆越大。

以 Leaflet 的点聚合思路为例，代码结构通常如下：

const clusterLayer = L.markerClusterGroup({
  maxClusterRadius: 60,
  disableClusteringAtZoom: 16,
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false
});

points.forEach(function(item) {
  const marker = L.marker([item.lat, item.lng]);
  marker.bindPopup(item.name);
  clusterLayer.addLayer(marker);
});

map.addLayer(clusterLayer);

聚合点适合“浏览”和“定位”，但不等于严谨统计。因为聚合结果会随缩放级别、地图视野和聚合半径变化。如果要做正式报表，应在后端按行政区、网格或业务单元统计，再用专题图表达。

步骤四：用热力图发现空间热点

热力图适合表达点事件的空间集中程度。它常用于交通事故、报警事件、用户访问、客流轨迹、投诉工单等数据。热力图强调趋势，不强调单个点的精确位置。

实现热力图时，一般要准备三列信息：经度、纬度、权重。权重可以是事件次数、销售额、客流量，也可以统一设为 1。

1. 清洗点坐标，去掉空坐标、异常坐标和坐标系错误的数据。
2. 设置热力图半径，控制一个点对周边影响的范围。
3. 设置模糊程度，控制颜色过渡是否平滑。
4. 设置权重字段，让重要点对热度贡献更大。
5. 配置颜色渐变，避免使用含义不清的随机彩虹色。

热力图的示例数据结构可以这样组织：

const heatData = points.map(function(item) {
  return [
    item.lat,
    item.lng,
    item.weight || 1
  ];
});

L.heatLayer(heatData, {
  radius: 25,
  blur: 18,
  maxZoom: 15,
  gradient: {
    0.2: '#2c7bb6',
    0.5: '#ffffbf',
    0.8: '#fdae61',
    1.0: '#d7191c'
  }
}).addTo(map);

热力图参数没有绝对标准。半径太小，地图会变成一堆碎斑；半径太大，局部差异会被抹平。实际项目中建议让产品、业务和 GIS 人员一起确认：热力图表达的是“街区级热点”“区县级热点”，还是“全市级趋势”。

步骤五：按缩放级别组合多种展示方式

很多 WebGIS 项目不应该只使用一种展示方式。更好的做法是按缩放级别切换图层。

• 小比例尺：显示热力图或按城市聚合的聚合点，帮助用户看整体分布。
• 中比例尺：显示聚合点或网格专题图，帮助用户识别重点片区。
• 大比例尺：显示原始点、标签和详细弹窗，方便精确查看。

例如在地图缩放事件中，根据 zoom 切换图层：

map.on('zoomend', function() {
  const zoom = map.getZoom();

  if (zoom < 11) {
    map.addLayer(heatLayer);
    map.removeLayer(clusterLayer);
    map.removeLayer(rawPointLayer);
  } else if (zoom < 15) {
    map.removeLayer(heatLayer);
    map.addLayer(clusterLayer);
    map.removeLayer(rawPointLayer);
  } else {
    map.removeLayer(heatLayer);
    map.removeLayer(clusterLayer);
    map.addLayer(rawPointLayer);
  }
});

这种组合方式能够让 WebGIS数据展示更符合人的阅读习惯：先看总体，再看局部，最后看对象详情。

常见坑

1. 把热力图当成精确统计图

热力图只能表达密度趋势，不能直接说明某个行政区数量一定最多。热力图结果受半径、权重、缩放级别和屏幕分辨率影响。如果需要精确统计，应使用空间连接、点在面内统计或网格统计，再做专题图。

2. 专题图没有图例

没有图例的专题图很难被普通用户理解。颜色深浅必须对应明确的数值范围或类别含义。图例中建议写清楚字段名、单位和分级范围，例如“人口密度：人/平方公里”。

3. 聚合点半径设置过大

聚合半径过大时，不同街区或不同行政区的点会被合并到一起，容易误导用户。可以先从 40 到 60 像素试起，再根据点密度和业务尺度调整。

4. 坐标系不一致导致点位偏移

WebGIS 常用底图一般是 Web Mercator 投影展示，前端点数据通常使用 WGS84 经纬度输入。如果数据来自地方坐标系、CGCS2000 投影坐标或火星坐标，需要先确认坐标系统和转换方式。点位偏移会直接影响聚合点和热力图判断。

5. 前端一次性加载过多 GeoJSON

如果几万到几十万要素都用 GeoJSON 一次性加载，浏览器容易卡顿。对于大数据量 WebGIS数据展示，应考虑矢量瓦片、后端分页、按视野范围请求、服务端聚合或栅格热力图。

6. 颜色过多但没有信息层次

颜色不是越丰富越直观。专题图建议使用单色渐变或符合业务语义的颜色；风险类数据可使用黄、橙、红；水文、降雨等可以使用蓝色系。避免没有含义的随机色，尤其避免让相近数值颜色差异过大。

方法比较

方法	优点	局限	推荐场景
专题图	区域对比清晰，适合统计值展示，便于配图例解释	依赖面边界和统计字段，分级不合理会误导判断	行政区统计、地块评价、风险等级、网格指标
聚合点	解决点位遮挡，交互友好，适合多级缩放浏览	聚合结果随缩放变化，不适合直接作为精确统计	门店、设备、案件、监测点、POI 展示
热力图	热点趋势直观，适合快速发现高密度区域	不显示单点详情，参数影响结果较大	投诉热点、事故密度、客流热区、事件分布
矢量瓦片	适合大规模矢量数据，渲染性能好，支持样式控制	制作和服务部署成本较高	大范围道路、建筑物、地块、行政区边界
服务端统计	结果稳定，适合报表和正式分析	交互灵活性低于前端即时渲染	按区县、网格、时间段统计后制图

简单来说：要比较区域，用专题图；要看大量点，用聚合点；要找热点趋势，用热力图；要处理超大数据量，要考虑服务端聚合或矢量瓦片。

检查清单

在发布 WebGIS 数据展示页面前，可以按下面清单逐项检查。

• 是否明确了用户要看的问题：区域差异、点位数量，还是空间热点？
• 专题图是否有图例、单位、分级说明和字段来源？
• 聚合点是否在合适缩放级别展开为原始点？
• 热力图是否设置了合理的半径、模糊程度和权重字段？
• 点数据坐标系是否与前端底图匹配？
• 是否检查了空坐标、重复点、异常值和离群点？
• 是否避免一次性加载过大的 GeoJSON 文件？
• 是否在不同缩放级别测试过图层切换效果？
• 颜色方案是否符合业务含义，并且色弱用户也能大致区分？
• 弹窗、标签和图例是否不会互相遮挡？
• 移动端屏幕下，聚合点和热力图是否仍然可读？
• 是否给用户提供筛选条件，例如时间、类型、行政区或等级？

FAQ

WebGIS数据展示中专题图和热力图有什么区别？

专题图通常基于面数据或统计区域，表达不同区域的属性值差异；热力图通常基于点数据，表达点事件的空间密度趋势。专题图适合回答“哪个区数值高”，热力图适合回答“热点集中在哪里”。

点位很多时应该用聚合点还是热力图？

如果用户需要查看点的数量、位置和详情，优先使用聚合点；如果用户只关心整体密度趋势，可以使用热力图。实际项目中常见做法是小比例尺显示热力图，中比例尺显示聚合点，大比例尺显示原始点。

热力图能不能表示某个区县数量最多？

不建议直接这样解释。热力图显示的是空间密度，不是行政区统计结果。如果要比较区县数量，应先做点落区统计或空间连接，再用专题图展示各区县数量。

专题图分级应该怎么选？

如果业务已有阈值，例如风险等级、污染等级，应优先使用业务阈值。若没有固定阈值，可以根据数据分布选择等距分级、分位数分级或自然断点。发布前要检查分级结果是否符合常识，避免少数极大值压缩其他区域差异。

WebGIS聚合点为什么缩放后数量会变化？

聚合点是根据当前地图缩放级别和屏幕像素距离动态合并的。放大后，同一片区域中的点会被拆分成多个聚合点或原始点；缩小后，更多点会被合并。因此聚合点适合交互浏览，不适合作为固定统计口径。

大量 GeoJSON 加载很慢怎么办？

可以从四个方向优化：减少字段、简化几何、按当前视野范围请求数据、改用矢量瓦片或后端聚合。对于只做热点展示的场景，也可以在服务端预先生成网格统计或栅格热力图，减少前端压力。

热力图颜色应该怎么设置？

建议使用有明确强弱含义的渐变色，例如低值为蓝色或浅色，高值为橙红色或深色。不要使用过多随机颜色。图例中应说明颜色代表相对热度、权重密度或事件密集程度，避免用户误解为精确数值。

OpenLayers、Leaflet 和 Mapbox GL JS 都能做这些展示吗？

可以。Leaflet 生态中有成熟的聚合点和热力图插件，适合轻量项目；OpenLayers 对复杂 GIS 数据源和投影支持较好；Mapbox GL JS 和兼容样式体系适合矢量瓦片和高性能前端渲染。选择工具时应结合数据规模、团队技术栈和部署条件。

结论

让 WebGIS数据展示更直观，关键不是堆更多图层，而是让表达方式服务于业务问题。专题图适合表达区域差异，聚合点适合处理大量点位浏览，热力图适合发现空间热点趋势。

在实际项目中，建议先判断数据类型和用户目标，再决定使用专题图、聚合点还是热力图。对于复杂场景，可以按缩放级别组合多种方法：小比例尺看趋势，中比例尺看聚合，大比例尺看详情。

最后要记住：图例、分级、坐标系、性能和交互细节，往往决定一张 WebGIS 地图是否真正可用。只要把这些基础环节处理好，WebGIS数据展示就能从“把数据画出来”，提升到“让用户一眼看懂”。