如何在Mapbox或其他地图SDK中显示共线并行公交线路？

问题背景 #

我正在开发一个展示任意城市公交线路的项目，目前使用Mapbox GL渲染地图（但不限于该库）。通过Transitland tiles API能渲染公交线路，但视觉效果不理想：

注：为保证画面清晰，已隐藏公交路线。

我需要实现的效果是：在任意缩放级别下，将芝加哥环线这类"共线"路线显示为并行并排的线条，参考苹果地图的展示效果：

现有可复现代码 #

只需替换开头的密钥即可运行：

JavaScript 代码 #

const accessToken = MAPBOX_ACCESS_TOKEN;
const transitlandApiKey = TRANSITLAND_API_KEY;

map = new mapboxgl.Map({
  accessToken,
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v11',
  center: [-87.6250549, 41.8786351],
  zoom: 13,
})

map.on('style.load', () => {

  // 添加Transitland数据源
  map.addSource('routes', {
    type: 'vector',
    tiles: [
      `https://transit.land/api/v2/tiles/routes/tiles/{z}/{x}/{y}.pbf?apikey=${transitlandApiKey}`
    ],
    maxzoom: 14
  })

  map.addLayer({
    id: 'routes',
    type: 'line',
    source: 'routes',
    'source-layer': 'routes',
    layout: {
      'line-cap': 'round',
      'line-join': 'round',
    },
    paint: {
      'line-width': 2.0,
      'line-color': [
        'match',
        ['get', 'route_type'],
        0, // 有轨电车、街车、轻轨
        ['coalesce', ['get', 'route_color'], 'blue'],
        1, // 地铁
        ['coalesce', ['get', 'route_color'], 'red'],
        2, // 铁路
        'red', // Amtrak
        3, // 公交
        ['coalesce', ['get', 'route_color'], 'lightblue'],
        'grey' // 默认颜色
      ],
      'line-opacity': [
        'match',
        ['get', 'route_type'],
        0, // 有轨电车、街车、轻轨
        1,
        1, // 地铁
        1,
        2, // 铁路
        1,
        0
      ]
    }
  })
})

HTML 代码 #

<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>

<div id="map" style="width: 500px; height: 400px;"></div>

实现方案 #

1. Mapbox GL 内置动态偏移方案 #

利用Mapbox GL的line-offset样式属性，根据线路唯一标识（如route_id）为共线线路分配不同的横向偏移量，直接实现并行效果。

关键修改示例：在图层paint属性中添加动态偏移逻辑

'line-offset': [
  'match',
  ['get', 'route_id'],
  'chi_blue_line', 1.5,
  'chi_red_line', -1.5,
  'chi_green_line', 3,
  'chi_brown_line', -3,
  0 // 默认无偏移
]

对于任意城市的动态数据，可通过queryRenderedFeatures在地图加载/缩放时，实时获取视口内的共线路线，统计数量后平均分配偏移值（比如2条线偏移±1px，3条线偏移-2、0、2px）。

2. 矢量瓦片预处理方案 #

如果追求大规模场景的性能，可在数据层提前处理：

• 解析Transitland的PBF瓦片，识别共线的线路几何
• 使用GIS工具（如Turf.js）对每条共线线路的几何做偏移计算
• 将偏移后的几何重新打包为自定义矢量瓦片，再加载到Mapbox中

3. 前端实时几何处理方案 #

结合Turf.js在前端动态处理线路：

• 监听地图zoom、moveend事件
• 获取当前视口内的所有公交线路，按路段分组识别共线关系
• 对每组共线路线计算偏移量，用Turf.lineOffset生成偏移后的几何
• 将处理后的几何添加为临时图层展示

内容的提问来源于stack exchange，提问作者Alex Wohlbruck