详细分析 ▾
运行时依赖
版本
地图制图技能初始发布： - 为 Mapbox 提供地图设计原则、色彩理论、视觉层级、排版与制图最佳实践的专业指导。 - 包含关于配色方案、图层排序与缩放策略的实用建议。 - 提供无障碍建议及示例主题（浅色、深色、高对比、复古）。 - 概述移动端、桌面端、印刷等地图上下文的最佳实践及多种地图用例。 - 提供场景化指导与性能提示的参考文件。
安装命令
点击复制技能文档
核心制图原则
视觉层级 地图必须引导观众关注最重要的信息： - 最重要：POI、用户位置、路线高亮 - 次要：主干道、城市标签、地标 - 第三级：次要街道、行政边界 - 背景：水域、土地利用、地形
实现方法： - 使用大小、颜色强度与对比度建立层级 - 主要要素：高对比度、更大符号、鲜明色彩 - 背景要素：低对比度、柔和色彩、更小文字
地图色彩理论
色彩和谐： - 相邻色：在色环上相邻的颜色（蓝-绿-青）用于统一设计 - 互补色：使用相反色（蓝/橙、红/绿）实现高对比强调 - 单色：单一色相通过不同饱和度/明度变化，打造优雅极简设计
色彩心理： - 蓝色：水域、信任、冷静、专业（水体默认色） - 绿色：公园、自然、成长、环保（植被、公园） - 红/橙：紧急、重要、餐饮（警示、餐厅） - 黄色：注意、高亮、提醒（警告、选中项） - 灰色：中性、背景、道路（基础设施）
无障碍： - 文本对比度需达 4.5:1（WCAG AA） - 不单独依赖颜色传递信息 - 使用色盲模拟器测试设计 - 避免红绿组合用于关键区分
配色模板： Light Theme（日间/专业）：
{
"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上）会产生“漂浮标签”问题：街名显示却看不到道路。
High Contrast（无障碍）：
{
"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）：传统、正式——仅用于标题或历史地图 - 等宽：技术数据、坐标
字号建议：
地点标签（城市、POI）：11–14px
街道标签：9–11px
要素标签（公园等）：10–12px
地图标题：16–20px
来源标注：8–9px
标签放置： - 点标签：居中或略偏移（避免与符号重叠） - 线标签：沿线曲线，长要素需重复 - 面标签：置于多边形中心，尺寸合适 - 优先级：先标主要要素，空间充足再标次要
缩放级别策略
Zoom 0-4（世界到洲）： - 主要国界线 - 海洋与海域标签 - 仅首都
Zoom 5-8（国家到州/省）： - 州/省边界 - 主要城市 - 主要高速 - 大型水体
Zoom 9-11（都市区）： - 城市边界 - 社区 - 所有高速及主干道 - 公园与地标
Zoom 12-15（社区）： - 所有街道 - 建筑轮廓 - POI（餐厅、商店） - 街名
注意： Mapbox 托管的 Streets 样式默认在 zoom 14 左右显示大多数 POI。自定义样式建议从 zoom 12 开始显示 POI——此时密度可控，用户正在浏览。zoom 14 已偏晚；zoom 10（都市区尺度）太早，会导致图标严重堆叠。
Zoom 16-22（街景）： - 所有细节 - 门牌号 - 停车场 - 精细 POI
Mapbox 专属实现指南
样式图层最佳实践
图层顺序（从底到顶）： 1. 背景（纯色或图案） 2. 土地利用（公园、住宅、商业） 3. 水体（海洋、湖泊、河流） 4. 地形/山体阴影（如使用高程） 5. 建筑（3D 或 2D 轮廓） 6. 道路（高速→本地道） 7. 边界（国界线、州界线） 8. 标签（地名、街名） 9. POI 符号 10. 用户生成内容（路线、标记）
常见错误： 开发者常把应用的路线线或活动标记放在 POI 符号_下方_，理由是“POI 必须保持可见”。这是反的——用户生成内容（你的路线、选中位置、用户定位）是最重要的层，必须渲染在所有内容之上，包括 POI。路线线盖住 POI 图标可以接受；路线被 POI 图标遮挡则不行。
地图场景考量
了解受众： - 大众用户：简化，使用熟悉范式（Google/Apple 风格） - 技术用户：展示更多细节、技术层、数据精度 - 领域专家：显示专业数据，使用领域专用符号
平台差异： - 移动端：更大触控目标（最小 44×44px），更简洁设计，臂距可读 - 桌面端：可包含更多细节、悬停交互、复杂叠加 - 印刷：更高对比、更大文字，考虑 CMYK 色域 - 户外/强光：更高对比，避免浅灰
用例优化： - 导航：强调道路、清晰层级、路线可见 - 数据可视化：淡化底图，让数据突出 - 故事叙述：引导观众注意，用色彩营造氛围 - 地点选择：清晰展示 POI，提供上下文 - 分析**：包含相关图层，在不同缩放保持清晰