数据可视化模式技能

在Mapbox地图上可视化数据的全面模式。涵盖等值区域图、热力图、3D拉伸、数据驱动样式、动画可视化以及数据密集型应用的性能优化。

何时使用此技能

在以下情况下使用此技能：

• - 在地图上可视化统计数据（人口、销售额、人口统计）
• 创建带有颜色编码区域的等值区域图
• 构建热力图或聚类用于密度可视化
• 添加3D可视化（建筑高度、地形高程）
• 基于属性实现数据驱动样式
• 动画化时间序列数据
• 处理需要优化的大型数据集

可视化类型

等值区域图

最佳用途： 区域数据（州、县、邮政编码）、统计比较

模式： 根据数据值对多边形进行颜色编码

javascript
map.on(load, () => {
// 添加数据源（带属性的GeoJSON）
map.addSource(states, {
type: geojson,
data: https://example.com/states.geojson // 带人口属性的要素
});

// 添加数据驱动颜色的填充图层
map.addLayer({
id: states-layer,
type: fill,
source: states,
paint: {
fill-color: [
interpolate,
[linear],
[get, population],
0,
#f0f9ff, // 低人口为浅蓝色
500000,
#7fcdff,
1000000,
#0080ff,
5000000,
#0040bf, // 高人口为深蓝色
10000000,
#001f5c
],
fill-opacity: 0.75
}
});

// 添加边界图层
map.addLayer({
id: states-border,
type: line,
source: states,
paint: {
line-color: #ffffff,
line-width: 1
}
});

// 添加可复用的悬停弹窗
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});

map.on(mousemove, states-layer, (e) => {
if (e.features.length > 0) {
map.getCanvas().style.cursor = pointer;

const feature = e.features[0];
popup
.setLngLat(e.lngLat)
.setHTML(

${feature.properties.name}

人口: ${feature.properties.population.toLocaleString()}

)
.addTo(map);
}
});

map.on(mouseleave, states-layer, () => {
map.getCanvas().style.cursor = ;
popup.remove();
});
});

step vs interpolate： 上面的示例使用interpolate实现平滑的颜色渐变。对于离散颜色桶（例如低/中/高），使用[step, [get, population], #f0f0f0, 500000, #fee0d2, 2000000, #fc9272, 10000000, #de2d26]。当数据有自然分类或边界值精确时，优先使用step。

色阶策略：

javascript
// 线性插值（连续色阶）
fill-color: [
interpolate,
[linear],
[get, value],
0, #ffffcc,
25, #78c679,
50, #31a354,
100, #006837
]

// 步进区间（离散桶）
fill-color: [
step,
[get, value],
#ffffcc, // 默认颜色
25, #c7e9b4,
50, #7fcdbb,
75, #41b6c4,
100, #2c7fb8
]

// 基于案例（分类数据）
fill-color: [
match,
[get, category],
residential, #ffd700,
commercial, #ff6b6b,
industrial, #4ecdc4,
park, #45b7d1,
#cccccc // 默认
]

热力图

最佳用途： 点密度、事件位置、事件聚类

模式： 可视化点的密度

javascript
map.on(load, () => {
// 添加数据源（点）
map.addSource(incidents, {
type: geojson,
data: {
type: FeatureCollection,
features: [
{
type: Feature,
geometry: {
type: Point,
coordinates: [-122.4194, 37.7749]
},
properties: {
intensity: 1
}
}
// ... 更多点
]
}
});

// 添加热力图图层
map.addLayer({
id: incidents-heat,
type: heatmap,
source: incidents,
maxzoom: 15,
paint: {
// 根据强度属性增加权重
heatmap-weight: [interpolate, [linear], [get, intensity], 0, 0, 6, 1],
// 随着缩放级别增加强度
heatmap-intensity: [interpolate, [linear], [zoom], 0, 1, 15, 3],
// 热力图颜色渐变
heatmap-color: [
interpolate,
[linear],
[heatmap-density],
0,
rgba(33,102,172,0),
0.2,
rgb(103,169,207),
0.4,
rgb(209,229,240),
0.6,
rgb(253,219,199),
0.8,
rgb(239,138,98),
1,
rgb(178,24,43)
],
// 根据缩放级别调整半径
heatmap-radius: [interpolate, [linear], [zoom], 0, 2, 15, 20],
// 在更高缩放级别降低不透明度
heatmap-opacity: [interpolate, [linear], [zoom], 7, 1, 15, 0]
}
});

// 在高缩放级别添加单个点的圆形图层
map.addLayer({
id: incidents-point,
type: circle,
source: incidents,
minzoom: 14,
paint: {
circle-radius: [interpolate, [linear], [zoom], 14, 4, 22, 30],
circle-color: #ff4444,
circle-opacity: 0.8,
circle-stroke-color: #fff,
circle-stroke-width: 1
}
});
});

最佳实践

颜色无障碍性

javascript
// 使用ColorBrewer色阶确保无障碍性
// https://colorbrewer2.org/

// 好：顺序（单一色调）
const sequentialScale = [#f0f9ff, #bae4ff, #7fcdff, #0080ff, #001f5c];

// 好：发散（双色调）
const divergingScale = [#d73027, #fc8d59, #fee08b, #d9ef8b, #91cf60, #1a9850];

// 好：定性（不同类别）
const qualitativeScale = [#e41a1c, #377eb8, #4daf4a, #984ea3, #ff7f00];

// 避免：红绿色盲无障碍性
// 使用：蓝橙或紫绿代替

错误处理

javascript
// 处理缺失或无效数据
map.on(load, () => {
map.addSource(data, {
type: geojson,
data: dataUrl
});

map.addLayer({
id: data-viz,
type: fill,
source: data,
paint: {
fill-color: [
case,
[has, value], // 检查属性是否存在
[interpolate, [linear], [get, value], 0, #f0f0f0, 100, #0080ff],
#cccccc // 缺失数据的默认颜色
]
}
});

// 处理地图错误
map.on(error, (e) => {
console.error(地图错误:, e.error);
});
});

数据大小规则

• - < 1 MB：直接使用GeoJSON
• 1–10 MB：根据复杂度考虑使用GeoJSON或矢量瓦片
• >