嘿，这个问题我刚好研究过！除了你提到的转多边形或者重复绘制线条的方法，其实还有个更简洁的方案——利用**line-offset**这个数据驱动样式属性，配合多层线条配置就能轻松实现双线效果，完全不需要改动原始GeoJSON数据。

具体实现思路&步骤 #

核心逻辑是：基于同一个GeoJSON源，创建两个线条图层，分别给它们设置相反方向的偏移量，再搭配合适的线条宽度，就能模拟出双线视觉效果。

1. 先添加GeoJSON源 #

这一步和你平时操作一致，把你的线条数据作为源添加到地图：

map.addSource('target-line-source', {
  type: 'geojson',
  data: yourGeoJsonData // 替换成你的实际GeoJSON数据
});

2. 创建两个偏移线条图层 #

给两个图层设置不同的line-offset值（正负控制偏移方向），同时保持线条颜色、宽度一致：

// 左侧偏移的线条
map.addLayer({
  id: 'line-left',
  type: 'line',
  source: 'target-line-source',
  paint: {
    'line-color': '#2ecc71', // 自定义线条颜色
    'line-width': 3, // 单条线的宽度
    'line-offset': -2 // 向左偏移2像素（负数左偏，正数右偏）
  }
});

// 右侧偏移的线条
map.addLayer({
  id: 'line-right',
  type: 'line',
  source: 'target-line-source',
  paint: {
    'line-color': '#2ecc71',
    'line-width': 3,
    'line-offset': 2 // 向右偏移2像素
  }
});

3. 进阶：数据驱动动态调整间距 #

如果你的GeoJSON里有自定义属性（比如double_line_gap），还可以用数据驱动表达式让每条线的双线间距动态变化：

// 动态计算偏移量，间距由GeoJSON属性控制
'line-offset': ['/', ['get', 'double_line_gap'], 2]

这样每条线的双线间距都会根据自身属性自动调整，灵活性拉满。

这个方案的优势 #

• 无需修改原始GeoJSON数据，保持数据结构干净
• 完全基于Mapbox内置样式系统，性能比额外绘制几何图形更优
• 支持实时调整：比如通过交互修改偏移量、线条宽度，效果即时更新

如果需要让双线间距随地图缩放保持实际距离（而非固定像素），还可以结合meters-per-pixel表达式计算偏移量：

'line-offset': ['/', ['get', 'desired_gap_meters'], ['meters-per-pixel']]

这样不管地图缩放到什么级别，双线的实际空间间距都能保持一致。

内容的提问来源于stack exchange，提问作者Anton Piliak