绝对可以实现！我刚好在几个项目里落地过类似的自定义交通可视化需求，给你逐个拆解Google Maps、Mapbox和Leaflet的具体实现思路：

Google Maps提供了两种核心方式来加载自定义交通数据：

• 自定义折线图层（Custom Polylines）：最直接的方式，把你的道路车道数据（经纬度数组）转换成google.maps.Polyline对象，根据自定义交通状态（比如拥堵/缓慢/顺畅）设置不同的颜色和宽度。
  示例代码片段：

  // 假设你的自定义交通数据格式：{path: [latLng1, latLng2, ...], status: 'congested'}
  const trafficSegments = [
    { path: [{lat: 37.7749, lng: -122.4194}, {lat: 37.7759, lng: -122.4184}], status: 'congested' },
    { path: [{lat: 37.7759, lng: -122.4184}, {lat: 37.7769, lng: -122.4174}], status: 'smooth' }
  ];
  
  // 遍历数据创建折线
  trafficSegments.forEach(segment => {
    const color = segment.status === 'congested' ? '#ff0000' : 
                  segment.status === 'slow' ? '#ffff00' : '#00ff00';
    new google.maps.Polyline({
      path: segment.path,
      strokeColor: color,
      strokeOpacity: 0.8,
      strokeWeight: 6, // 模拟车道宽度
      map: map
    });
  });
  

• Styled Maps 进阶方案：如果你的数据和Google Maps的道路图层匹配，也可以通过样式规则覆盖原有道路颜色，但这种方式依赖Google的道路ID，灵活性不如自定义折线。

Mapbox GL JS是做自定义地图可视化的利器，支持直接加载自定义GeoJSON格式的道路数据，然后通过数据驱动样式实现动态颜色：

1. 先把你的交通数据整理成包含车道几何和状态属性的GeoJSON（比如每个Feature是一条车道，properties里有traffic_status字段）
2. 加载到Mapbox并设置样式：

   map.on('load', () => {
     // 添加自定义数据源
     map.addSource('custom-traffic', {
       type: 'geojson',
       data: './your-traffic-data.geojson' // 本地或远程GeoJSON
     });
   
     // 添加交通图层
     map.addLayer({
       id: 'traffic-lanes',
       type: 'line',
       source: 'custom-traffic',
       paint: {
         'line-width': 6,
         // 根据traffic_status匹配颜色
         'line-color': [
           'match',
           ['get', 'traffic_status'],
           'congested', '#ff4500',
           'slow', '#ffd700',
           'smooth', '#32cd32',
           '#808080' // 默认颜色
         ]
       }
     });
   });
   

Mapbox还支持实时更新数据，只要调用map.getSource('custom-traffic').setData(newData)就能动态刷新交通状态。

作为轻量开源的地图库，Leaflet的灵活性极高，完全支持自定义交通图层：

1. 同样准备好包含交通状态的GeoJSON数据
2. 使用L.geoJSON加载并通过style函数动态设置样式：

   // 定义样式函数
   function trafficStyle(feature) {
     let color;
     switch(feature.properties.trafficLevel) {
       case 3: color = '#dc143c'; break; // 拥堵
       case 2: color = '#ffd700'; break; // 缓慢
       case 1: color = '#32cd32'; break; // 顺畅
       default: color = '#888';
     }
     return {
       color: color,
       weight: 6,
       opacity: 0.8
     };
   }
   
   // 加载并添加到地图
   L.geoJSON(yourTrafficData, {
     style: trafficStyle
   }).addTo(map);
   

如果需要实时更新，你可以先移除旧图层，再重新加载新数据，或者直接修改图层的样式属性。

• 数据格式：确保你的道路数据是标准的地理格式（GeoJSON/经纬度数组），车道的几何要尽可能准确，这样可视化效果才会贴合实际道路。
• 性能优化：如果数据量很大（比如城市级的所有车道），建议简化几何坐标、使用瓦片化的矢量数据，或者分区域加载，避免地图卡顿。
• 坐标系统：确保所有数据使用WGS84坐标系（GPS常用的经纬度格式），和主流地图工具的坐标系一致。

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