mapbox-cartography

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mapbox Cartography Skill

Mapbox制图技能

This skill provides expert cartographic knowledge to help you design effective, beautiful, and functional maps using Mapbox.

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

Core Cartographic Principles

核心制图原则

Visual Hierarchy

视觉层次

Maps must guide the viewer's attention to what matters most:

Most important: POIs, user location, route highlights
Secondary: Major roads, city labels, landmarks
Tertiary: Minor streets, administrative boundaries
Background: Water, land use, terrain

Implementation:

Use size, color intensity, and contrast to establish hierarchy
Primary features: high contrast, larger symbols, bold colors
Background features: low contrast, muted colors, smaller text

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

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

实现方式：

利用尺寸、色彩饱和度和对比度建立层次
核心要素：高对比度、更大的符号、鲜明的颜色
背景要素：低对比度、柔和的颜色、更小的文字

Color Theory for Maps

地图色彩理论

Color Harmony:

Analogous colors: Use colors next to each other on color wheel (blue-green-teal) for cohesive designs
Complementary colors: Use opposite colors (blue/orange, red/green) for high contrast emphasis
Monochromatic: Single hue with varying saturation/brightness for elegant, minimal designs

Color Psychology:

Blue: Water, trust, calm, professional (default for water bodies)
Green: Parks, nature, growth, eco-friendly (vegetation, parks)
Red/Orange: Urgent, important, dining (alerts, restaurants)
Yellow: Caution, highlight, attention (warnings, selected items)
Gray: Neutral, background, roads (infrastructure)

Accessibility:

Ensure 4.5:1 contrast ratio for text (WCAG AA)
Don't rely solely on color to convey information
Test designs with colorblind simulators
Avoid red/green combinations for critical distinctions

色彩和谐：

邻近色：使用色轮上相邻的颜色（蓝-绿-青）打造连贯的设计
互补色：使用对立颜色（蓝/橙、红/绿）实现高对比度强调效果
单色调：单一色相搭配不同饱和度/亮度，打造优雅简约的设计

色彩心理学：

蓝色：代表水域、信任、平静、专业（默认用于水体）
绿色：代表公园、自然、成长、环保（植被、公园）
红/橙色：代表紧急、重要、餐饮（提示、餐厅）
黄色：代表警示、高亮、注意（警告、选中项）
灰色：代表中性、背景、道路（基础设施）

无障碍设计：

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

Typography Best Practices

排版最佳实践

Font Selection:

Sans-serif (Roboto, Open Sans): Modern, clean, high legibility at small sizes - use for labels
Serif (Noto Serif): Traditional, formal - use sparingly for titles or historic maps
Monospace: Technical data, coordinates

Text Sizing:

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

Label Placement:

Point labels: Center or slightly offset (avoid overlap with symbol)
Line labels: Follow line curve, repeat for long features
Area labels: Center in polygon, sized appropriately
Prioritize: Major features get labels first, minor features labeled if space allows

字体选择：

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

文字尺寸：

地点标签（城市、POIs）：11-14px
街道标签：9-11px
要素标签（公园）：10-12px
地图标题：16-20px
版权信息：8-9px

标签放置：

点标签：居中或轻微偏移（避免与符号重叠）
线标签：跟随线条曲线，长要素重复标注
面标签：居中放置在多边形内，尺寸合适
优先级：先标注主要要素，空间允许时再标注次要要素

Map Context Considerations

地图环境考量

Know Your Audience:

General public: Simplify, use familiar patterns (Google/Apple style)
Technical users: Include more detail, technical layers, data precision
Domain experts: Show specialized data, use domain-specific symbology

Use Case Optimization:

Navigation: Emphasize roads, clear hierarchy, route visibility
Data visualization: Muted base map, let data stand out
Storytelling: Guide viewer attention, establish mood with colors
Location selection: Show POIs clearly, provide context
Analysis: Include relevant layers, maintain clarity at different zooms

Platform Considerations:

Mobile: Larger touch targets (44x44px minimum), simpler designs, readable at arm's length
Desktop: Can include more detail, hover interactions, complex overlays
Print: Higher contrast, larger text, consider CMYK color space
Outdoor/Bright: Higher contrast, avoid subtle grays

了解目标受众：

普通大众：简化设计，使用熟悉的样式（类似Google/Apple地图）
技术用户：包含更多细节、技术图层、数据精度
领域专家：展示专业数据，使用领域特定的符号系统

使用场景优化：

导航：强调道路、清晰的层次结构、路线可见性
数据可视化：柔和的底图，让数据成为焦点
叙事性地图：引导观看者注意力，用颜色营造氛围
位置选择：清晰展示POIs，提供环境信息
分析：包含相关图层，在不同缩放级别保持清晰度

平台考量：

移动端：更大的触摸目标（最小44x44px）、更简洁的设计、手臂长度下可读
桌面端：可包含更多细节、悬停交互、复杂叠加层
印刷品：更高对比度、更大文字，考虑CMYK色彩空间
户外/强光环境：更高对比度，避免浅灰色

Mapbox-Specific Guidance

Mapbox专属指导

Style Layer Best Practices

样式图层最佳实践

Layer Ordering (bottom to top):

Background (solid color or pattern)
Landuse (parks, residential, commercial)
Water bodies (oceans, lakes, rivers)
Terrain/hillshade (if using elevation)
Buildings (3D or 2D footprints)
Roads (highways → local streets)
Borders (country, state lines)
Labels (place names, street names)
POI symbols
User-generated content (routes, markers)

图层顺序（从下到上）：

背景（纯色或图案）
土地利用（公园、住宅区、商业区）
水体（海洋、湖泊、河流）
地形/山体阴影（如果使用高程数据）
建筑（3D或2D轮廓）
道路（高速公路→本地街道）
边界（国家、州界）
标签（地名、街道名）
POI符号
用户生成内容（路线、标记）

Zoom Level Strategy

缩放级别策略

Zoom 0-4 (World to Continent):

Major country boundaries
Ocean and sea labels
Capital cities only

Zoom 5-8 (Country to State):

State/province boundaries
Major cities
Major highways
Large water bodies

Zoom 9-11 (Metro Area):

City boundaries
Neighborhoods
All highways and major roads
Parks and landmarks

Zoom 12-15 (Neighborhood):

All streets
Building footprints
POIs (restaurants, shops)
Street names

Zoom 16-22 (Street Level):

All detail
House numbers
Parking lots
Fine-grained POIs

缩放级别0-4（全球到大洲）：

主要国家边界
海洋标签
仅显示首都城市

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

州/省边界
主要城市
主干道
大型水体

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

城市边界
社区
所有高速公路和主干道
公园和地标

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

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

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

全部细节
门牌号
停车场
精细化POIs

Color Palette Templates

调色板模板

Light Theme (Day/Professional):

json

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

Dark Theme (Night Mode):

json

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

High Contrast (Accessibility):

json

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

Vintage/Retro:

json

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

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

json

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

深色主题（夜间模式）：

json

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

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

json

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

复古风格：

json

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

Common Mapping Scenarios

常见地图场景

Scenario: Restaurant Finder App

场景：餐厅查找应用

Requirements:

Restaurants must be highly visible
Street context for navigation
Muted background (food photos overlay)

Recommendations:

Use bold, warm colors for restaurant markers (red, orange)
Gray out background (low saturation)
Keep street labels clear but not dominant
High contrast for selected restaurant
Mobile-optimized touch targets

需求：

餐厅必须高度可见
提供导航所需的街道环境
柔和的背景（叠加美食照片）

建议：

使用鲜明的暖色调（红、橙）作为餐厅标记
降低背景饱和度（灰度处理）
保持街道标签清晰但不过于突出
选中的餐厅使用高对比度
优化移动端触摸目标

Scenario: Real Estate Map

场景：房地产地图

Requirements:

Property boundaries clearly visible
Neighborhood context
Price differentiation

Recommendations:

Use color scale for price ranges (green=affordable, red=expensive)
Show parks and amenities prominently
Include school zones if relevant
Label neighborhoods clearly
Show transit access

需求：

清晰显示物业边界
社区环境信息
价格区分

建议：

使用颜色梯度表示价格区间（绿色=经济适用，红色=高端）
突出显示公园和配套设施
如有需要，包含学区范围
清晰标注社区名称
显示交通便利性

Scenario: Data Visualization Overlay

场景：数据可视化叠加层

Requirements:

Data layer is primary focus
Base map provides context only
Multiple data points may cluster

Recommendations:

Monochromatic, low-contrast base map
Use data-ink ratio principle (minimize non-data elements)
Base map grayscale or single muted hue
Remove unnecessary labels
Consider using light base for dark data, vice versa

需求：

数据图层是核心焦点
底图仅提供环境信息
多个数据点可能聚集

建议：

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

Scenario: Navigation/Routing

场景：导航/路线规划

Requirements:

Route must be unmissable
Turn-by-turn clarity
Current location always visible

Recommendations:

Route in high-contrast color (blue or purple)
Animate route line or use dashed pattern
Large, clear turn indicators
Dim unrelated features
User location: pulsing blue dot
Next turn: prominent arrow/icon

需求：

路线必须清晰可见
转向指引明确
始终显示当前位置

建议：

路线使用高对比度颜色（蓝色或紫色）
路线动画或使用虚线样式
大尺寸、清晰的转向指示器
淡化无关要素
用户位置：脉动蓝点
下一个转向：醒目的箭头/图标

Performance Optimization

性能优化

Style Performance:

Minimize layer count (combine similar layers)
Use expressions instead of multiple layers for variants
Simplify complex geometries at lower zooms
Use sprite sheets for repeated icons
Leverage tileset simplification

Loading Speed:

Preload critical zoom levels
Use style optimization tools
Minimize external resource calls
Compress images in sprite sheets

样式性能：

最小化图层数量（合并相似图层）
使用表达式替代多图层实现变体
在低缩放级别简化复杂几何图形
使用精灵表处理重复图标
利用瓦片集简化功能

加载速度：

预加载关键缩放级别
使用样式优化工具
最小化外部资源调用
压缩精灵表中的图片

Testing Your Design

测试设计

Common Mistakes to Avoid

需避免的常见错误

Too many colors: Stick to 5-7 main colors maximum
Insufficient contrast: Text must be readable
Overcrowding: Not everything needs a label
Ignoring zoom levels: Show appropriate detail for scale
Poor label hierarchy: Organize by importance
Inconsistent styling: Maintain visual consistency
Neglecting performance: Complex styles slow rendering
Forgetting mobile: Test on actual devices

颜色过多：最多使用5-7种主色调
对比度不足：文字必须可读
内容拥挤：并非所有内容都需要标签
忽略缩放级别：根据比例显示合适的细节
标签层次混乱：按重要性组织标签
样式不一致：保持视觉一致性
忽视性能：复杂样式会降低渲染速度
忘记移动端：在实际设备上测试

When to Use This Skill

何时使用本技能

Invoke this skill when:

Designing a new map style
Choosing colors for map elements
Making decisions about visual hierarchy
Optimizing for specific use cases
Troubleshooting visibility issues
Ensuring accessibility
Creating themed maps (dark mode, vintage, etc.)

在以下场景调用本技能：

设计新的地图样式
为地图要素选择颜色
制定视觉层次决策
针对特定使用场景优化
排查可见性问题
确保无障碍设计
创建主题地图（夜间模式、复古风格等）