mapbox-cartography

Mapbox 制图技能

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

核心制图原则

视觉层级

地图必须引导查看者关注最重要的内容：

• 最重要：兴趣点（POI）、用户位置、路线高亮
• 次要：主干道、城市标签、地标
• 第三层级：次要街道、行政边界
• 背景：水域、土地利用、地形

实现方式：

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

地图配色理论

色彩协调：

• 类似色：使用色环上彼此相邻的颜色（蓝色-绿色-青绿色），营造协调的设计
• 互补色：使用相对的颜色（蓝色/橙色、红色/绿色），突出高对比度
• 单色：使用同一种色相，并改变饱和度/亮度，打造优雅、简约的设计

色彩心理学：

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

无障碍设计：

• 确保文本对比度至少为 4.5:1（WCAG AA）
• 不要仅依靠颜色传递信息
• 使用色盲模拟器测试设计
• 对关键区别避免使用红色/绿色组合

配色模板：

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

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

深色主题（夜间模式）：

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

**深色主题的道路配色规则：**道路必须使用中性的深灰色（#3a3a3a），与背景明显区分，但不要带有色相。切勿将道路设为琥珀色、蓝色或其他色相——请将颜色留给应用数据图层（路线、标记）。彩色底图道路与彩色数据图层会在视觉上相互竞争。与背景融为一体的本地道路（#1e1e1e 显示在 #1a1a1a 上）会造成“漂浮标签”问题：街道名称下方看不到道路。

高对比度（无障碍设计）：

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

复古风格：

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

地图比例下的字体排印

字体选择：

• 无衬线字体（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

标签放置：

• 点标签：居中或稍微偏移（避免与符号重叠）
• 线标签：沿线的曲线排列，长要素上重复显示
• 区域标签：置于多边形中心，尺寸应适当
• 优先级：先标注主要要素；空间允许时再标注次要要素

缩放级别策略

缩放级别 0-4（全球至大陆）：

• 主要国家边界
• 海洋和海域标签
• 仅标注首都

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

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

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

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

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

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

**注意：**Mapbox 托管的 Streets 样式默认在缩放级别 14 左右显示大多数 POI。对于自定义样式，请从缩放级别 12 开始显示 POI——这是密度适中且用户正在浏览的街区尺度。缩放级别 14 太晚；缩放级别 10（都会区尺度）则太早，会造成严重的图标拥挤。

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

• 所有细节
• 门牌号
• 停车场
• 精细粒度的 POI

Mapbox 专用实现指南

样式图层最佳实践

图层顺序（从底到顶）：

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

常见错误： 开发者经常把应用中的路线线条或活动标记放在 POI 符号_下方_，理由是“POI 必须保持可见”。这恰恰是反过来的——用户生成的内容（路线、选定位置、用户位置）是最重要的图层，必须渲染在所有内容之上，包括 POI。路线线条遮住 POI 图标可以接受；路线被 POI 图标遮挡则不可接受。

地图场景考量

了解受众：

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

平台考量：

• 移动设备： 更大的触控目标（至少 44x44px）、更简洁的设计、便于在手臂伸展距离阅读
• 桌面设备： 可展示更多细节、悬停交互和复杂叠加层
• 打印： 提高对比度、增大文字，并考虑 CMYK 色彩空间
• 户外／明亮环境： 提高对比度，避免使用不明显的灰色

针对使用场景进行优化：

• 导航： 突出道路、明确层级，确保路线清晰可见
• 数据可视化： 使用低调的底图，让数据脱颖而出
• 叙事： 引导观众注意力，用色彩营造氛围
• 位置选择： 清晰展示 POI，并提供背景信息
• 分析： 包含相关图层，并确保在不同缩放级别下都清晰易读

参考文件

如需了解特定主题的详细指导，请按需加载以下参考资料：

• references/scenarios.md — 常见场景指南（餐厅查找、房地产、数据可视化、导航）
• references/performance-testing.md — 性能优化、测试清单和需要避免的常见错误

何时使用此技能

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

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