mapbox-cartography

Mapbox 制图技能

此技能提供专业制图知识，帮助你使用 Mapbox 设计高效、美观且实用的地图。

制图核心原则

视觉层级

地图必须引导观众关注最重要的内容：

• 最重要：兴趣点、用户位置、路线突出显示
• 次要：主要道路、城市标签、地标
• 第三级：次要街道、行政边界
• 背景：水域、土地利用、地形

实现方法：

• 使用尺寸、色彩强度和对比度来建立层级
• 主要要素：高对比度、较大的符号、醒目的颜色
• 背景要素：低对比度、柔和的颜色、较小的文字

地图色彩理论

色彩协调：

• 类似色：使用色轮上相邻的颜色（蓝—绿—青）打造协调统一的设计
• 互补色：使用相反的颜色（蓝／橙、红／绿）来突出强调，形成高对比度
• 单色：使用单一色相搭配不同的饱和度／亮度，打造优雅简约的设计

色彩心理学：

• 蓝色：水域、信任、平静、专业（默认用于水体）
• 绿色：公园、自然、生长、环保（植被、公园）
• 红色／橙色：紧急、重要、餐饮（警报、餐厅）
• 黄色：警示、突出、关注（警告、选中项）
• 灰色：中性、背景、道路（基础设施）

无障碍性：

• 确保文字对比度达到 4.5:1（WCAG AA）
• 不要仅依赖颜色传达信息
• 使用色盲模拟器测试设计
• 避免在关键区分中使用红／绿组合

排版最佳实践

字体选择：

• 无衬线字体（Roboto、Open Sans）：现代、简洁，小字号下易读——用于标签
• 衬线字体（Noto Serif）：传统、正式——少量用于标题或历史地图
• 等宽字体：技术数据、坐标

文字大小：

Place labels (cities, POIs): 11-14px
Street labels: 9-11px
Feature labels (parks): 10-12px
Map title: 16-20px
Attribution: 8-9px

标签放置：

• 点标签：居中或稍微偏移（避免与符号重叠）
• 线标签：沿线条曲线排列，较长的要素需重复标注
• 面标签：置于多边形中心，大小适当
• 优先级：先标注主要要素；空间允许时再标注次要要素

地图情境考量

了解受众：

• 普通公众：简化地图，采用熟悉的样式（Google／Apple 风格）
• 技术用户：包含更多细节、技术图层和精确数据
• 领域专家：展示专业数据，使用领域专属的符号系统

针对使用场景优化：

• 导航：突出道路、明确层级、清晰显示路线
• 数据可视化：使用柔和的底图，让数据更加醒目
• 叙事：引导观众注意力，通过色彩营造氛围
• 位置选择：清晰显示兴趣点，并提供周边环境信息
• 分析：包含相关图层，在不同缩放级别下保持清晰

平台考量：

• 移动端：增大触控目标（至少 44x44px）、简化设计、确保手臂长度范围内清晰可读
• 桌面端：可包含更多细节、悬停交互和复杂叠加层
• 印刷：提高对比度、增大文字，并考虑 CMYK 色彩空间
• 户外／明亮环境：提高对比度，避免使用不明显的灰色

Mapbox 专属指南

样式图层最佳实践

图层顺序（从底到顶）：

1. 背景（纯色或图案）
2. 土地利用（公园、住宅区、商业区）
3. 水体（海洋、湖泊、河流）
4. 地形／晕渲（使用高程数据时）
5. 建筑物（3D 或 2D 轮廓）
6. 道路（高速公路 → 当地街道）
7. 边界（国家、省界）
8. 标签（地名、街道名称）
9. 兴趣点符号
10. 用户生成内容（路线、标记）

缩放级别策略

缩放级别 0-4（世界到洲）：

• 主要国家边界
• 海洋和海域名称
• 仅显示首都

缩放级别 5-8（国家到州）：

• 州/省边界
• 主要城市
• 主要高速公路
• 大型水域

缩放级别 9-11（都市区）：

• 城市边界
• 街区
• 所有高速公路和主要道路
• 公园和地标

缩放级别 12-15（街区）：

• 所有街道
• 建筑轮廓
• 兴趣点（餐厅、商店）
• 街道名称

缩放级别 16-22（街道级别）：

• 所有细节
• 门牌号
• 停车场
• 精细兴趣点

配色方案模板

浅色主题（日间/专业）：

{
  "background": "#f5f5f5",
  "water": "#a0c8f0",
  "parks": "#d4e7c5",
  "roads": "#ffffff",
  "buildings": "#e0e0e0",
  "text": "#333333"
}

深色主题（夜间模式）：

{
  "background": "#1a1a1a",
  "water": "#0d47a1",
  "parks": "#2e7d32",
  "roads": "#3a3a3a",
  "buildings": "#2d2d2d",
  "text": "#ffffff"
}

高对比度（无障碍）：

{
  "background": "#000000",
  "water": "#0066ff",
  "parks": "#00ff00",
  "roads": "#ffffff",
  "buildings": "#808080",
  "text": "#ffffff"
}

复古/怀旧风格：

{
  "background": "#f4e8d0",
  "water": "#b8d4d4",
  "parks": "#c8d4a4",
  "roads": "#d4c4a8",
  "buildings": "#e4d4c4",
  "text": "#4a3828"
}

常见地图场景

场景：餐厅查找应用

需求：

• 餐厅必须醒目
• 提供用于导航的街道背景信息
• 背景色调柔和（叠加美食照片）

建议：

• 餐厅标记使用醒目的暖色（红色、橙色）
• 将背景灰化（降低饱和度）
• 保持街道标签清晰，但不要过于突出
• 为选中的餐厅提供高对比度显示
• 针对移动设备优化触控目标

场景：房地产地图

需求：

• 清晰显示房产边界
• 提供街区背景信息
• 区分价格

建议：

• 使用颜色渐变表示价格范围（绿色=价格实惠，红色=价格昂贵）
• 突出显示公园和配套设施
• 视情况标出学区
• 清晰标注街区
• 显示公共交通可达性

场景：数据可视化叠加层

需求：

• 数据图层是主要焦点
• 底图仅提供背景信息
• 多个数据点可能会聚集

建议：

• 使用单色、低对比度底图
• 遵循数据墨水比原则（尽量减少非数据元素）
• 底图使用灰度或单一柔和色调
• 移除不必要的标签
• 深色数据可搭配浅色底图，反之亦然

场景：导航/路线规划

需求：

• 路线必须醒目
• 转向指引清晰易懂
• 始终显示当前位置

建议：

• 路线使用高对比度颜色（蓝色或紫色）
• 为路线线条添加动画或使用虚线样式
• 使用醒目、清晰的转向指示
• 调暗无关要素
• 用户位置：脉动蓝点
• 下一转向：醒目的箭头/图标

性能优化

样式性能：

• 尽量减少图层数量（合并相似图层）
• 使用表达式实现变体，而非创建多个图层
• 在较低缩放级别简化复杂几何图形
• 为重复图标使用精灵图集
• 利用瓦片集简化

加载速度：

• 预加载关键缩放级别
• 使用样式优化工具
• 尽量减少外部资源请求
• 压缩精灵图集中的图片

测试设计

检查清单：

• 查看所有相关缩放级别
• 在不同光照条件下测试
• 在实际设备上检查（移动设备、桌面设备）
• 验证颜色的无障碍性（colorblind.org）
• 与目标用户一起评审
• 使用真实的数据密度进行测试
• 检查标签碰撞/重叠
• 验证在较慢设备上的性能

应避免的常见错误

1. 颜色过多：主要颜色最多控制在 5-7 种
2. 对比度不足：文本必须清晰易读
3. 过于拥挤：不必为所有内容都添加标签
4. 忽略缩放级别：根据比例尺显示适当的细节
5. 标签层级不佳：按重要性组织标签
6. 样式不一致：保持视觉一致性
7. 忽视性能：复杂样式会拖慢渲染
8. 忽略移动设备：在实际设备上测试

何时使用此技能

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

• 设计新的地图样式
• 为地图元素选择颜色
• 决定视觉层级
• 针对特定用途进行优化
• 排查可见性问题
• 确保无障碍性
• 创建主题地图（深色模式、复古风格等）