Mapbox 样式模式技能

本技能为常见地图场景提供经过实战检验的样式模式与图层配置。

模式库

模式1：餐厅/兴趣点查找器

使用场景： 展示餐厅、咖啡馆、酒吧或其他兴趣点的消费类应用

视觉要求：

• - 兴趣点必须立即可见
• 提供导航所需的街道背景
• 中性背景（用于照片/内容叠加）
• 移动端优化

推荐图层：

json
{
layers: [
{
id: background,
type: background,
paint: {
background-color: #f5f5f5
}
},
{
id: water,
type: fill,
source: mapbox-streets,
source-layer: water,
paint: {
fill-color: #d4e4f7,
fill-opacity: 0.6
}
},
{
id: landuse-parks,
type: fill,
source: mapbox-streets,
source-layer: landuse,
filter: [==, class, park],
paint: {
fill-color: #e8f5e8,
fill-opacity: 0.5
}
},
{
id: roads-minor,
type: line,
source: mapbox-streets,
source-layer: road,
filter: [in, class, street, street_limited],
paint: {
line-color: #e0e0e0,
line-width: {
base: 1.5,
stops: [
[12, 0.5],
[15, 2],
[18, 6]
]
}
}
},
{
id: roads-major,
type: line,
source: mapbox-streets,
source-layer: road,
filter: [in, class, primary, secondary, tertiary],
paint: {
line-color: #ffffff,
line-width: {
base: 1.5,
stops: [
[10, 1],
[15, 4],
[18, 12]
]
}
}
},
{
id: restaurant-markers,
type: symbol,
source: restaurants,
layout: {
icon-image: restaurant-15,
icon-size: 1.5,
icon-allow-overlap: false,
text-field: [get, name],
text-offset: [0, 1.5],
text-size: 12,
text-allow-overlap: false
},
paint: {
icon-color: #FF6B35,
text-color: #333333,
text-halo-color: #ffffff,
text-halo-width: 2
}
}
]
}

关键特性：

• - 低饱和度底图（不与照片争抢视觉焦点）
• 高对比度标记（#FF6B35橙色醒目突出）
• 清晰的道路网络（浅灰背景上的白色道路）
• 公园可见但不过分显眼
• 文字光晕提升可读性

模式选择指南

决策树

问题1：主要内容是什么？

• - 用户生成的标记/图钉 -> 兴趣点查找器模式
• 房产数据/边界 -> 房地产模式
• 统计/分析数据 -> 数据可视化模式
• 路线/导航 -> 导航模式
• 实时追踪/配送区域 -> 配送/物流模式（客户标记应通过第二圆形图层 + requestAnimationFrame + setPaintProperty 实现脉冲动画；参见 references/delivery-logistics.md）

问题2：查看环境是什么？

• - 白天/办公室 -> 浅色主题
• 夜晚/暗环境 -> 深色模式
• 环境多变 -> 提供主题切换

问题3：用户的主要操作是什么？

• - 浏览/探索 -> 聚焦兴趣点，丰富细节
• 导航 -> 聚焦道路，路线可见性
• 追踪配送/物流 -> 实时更新、区域、状态
• 分析数据 -> 最小化底图，最大化数据展示
• 选择位置 -> 清晰边界，提供上下文

问题4：平台是什么？

• - 移动端 -> 简化设计，更大的触摸目标，较少细节
• 桌面端 -> 可包含更多细节和复杂度
• 两者兼顾 -> 移动端优先设计，桌面端增强

图层优化模式

性能模式：按缩放级别简化

json
{
id: roads,
type: line,
source: mapbox-streets,
source-layer: road,
filter: [
step,
[zoom],
[in, class, motorway, trunk],
8,
[in, class, motorway, trunk, primary],
12,
[in, class, motorway, trunk, primary, secondary],
14,
true
],
paint: {
line-width: {
base: 1.5,
stops: [
[4, 0.5],
[10, 1],
[15, 4],
[18, 12]
]
}
}
}

参考文件

其他模式和配置可在 references/ 目录中找到。当需要特定模式时，加载相应文件。

加载说明： 读取与用户用例匹配的参考文件。例如，如果实现配送追踪地图，加载 references/delivery-logistics.md。

测试模式

视觉回归检查清单

• - [ ] 在缩放级别测试：4、8、12、16、20
• [ ] 在移动端验证（375px宽度）
• [ ] 在桌面端验证（1920px宽度）
• [ ] 使用密集数据测试
• [ ] 使用稀疏数据测试
• [ ] 检查标签碰撞
• [ ] 验证颜色对比度（WCAG标准）
• [ ] 测试加载性能

何时使用本技能

在以下情况下调用本技能：

• - 为特定用例开始新的地图样式
• 寻找图层配置示例
• 实现常见地图模式
• 优化现有样式
• 需要经过验证的典型场景方案
• 调试样式问题
• 学习Mapbox样式最佳实践