mapbox-style-patterns

Mapbox 样式模式技能

此技能提供经过实践验证的样式模式和图层配置，适用于常见的地图场景。

模式库

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

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

视觉要求：

• 兴趣点必须一目了然
• 提供用于导航的街道环境信息
• 中性背景（便于叠加照片/内容）
• 针对移动设备优化

推荐图层：

{
  "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：使用平台是什么？

• 移动设备 -> 简化内容、增大触控目标、减少细节
• 桌面设备 -> 可以包含更多细节和复杂内容
• 两者兼顾 -> 采用移动优先设计，并针对桌面设备增强

图层优化模式

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

{
  "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/real-estate.md	模式 2：房地产地图——物业边界、价格颜色编码、配套设施标记
references/data-viz-base.md	模式 3：数据可视化底图——用于分级统计图/热力图叠加的极简灰度底图
references/navigation.md	模式 4：导航/路线规划地图——路线显示、用户位置、转向箭头
references/dark-mode.md	模式 5：深色模式/夜间主题——近黑色背景、降低亮度
references/delivery-logistics.md	模式 6：配送/物流地图——实时追踪、区域、司机标记、预计到达时间徽标
references/expressions-clustering.md	数据驱动表达式模式 + 密集兴趣点的聚类
references/common-modifications.md	3D 建筑、地形/山体阴影、自定义标记
references/interactions.md	addInteraction、setFeatureState 和 appearances 的区别——它们如何配合，以及各自的适用时机

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

测试模式

视觉回归检查清单

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

何时使用此技能

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

• 为特定用例创建新的地图样式
• 查找图层配置示例
• 实现常见的地图模式
• 优化现有样式
• 需要适用于典型场景的成熟方案
• 调试样式问题
• 学习 Mapbox 样式最佳实践