最新Flutter Mapbox_gl版本.addCircleLayer()使用方法及问题解决

你当前代码的核心问题是Mapbox的GeoJSON数据源不支持直接传入List<LatLng>，必须传入符合GeoJSON规范的结构（比如FeatureCollection）。另外实时更新场景下，重复调用addSource和addCircleLayer会导致重复创建资源，也会引发异常。

步骤1：将LatLng列表转换为GeoJSON格式 #

Mapbox要求数据源必须是标准的GeoJSON结构，先写一个工具方法完成格式转换：

Map<String, dynamic> _latLngListToGeoJson(List<LatLng> positions) {
  final features = positions.map((latLng) {
    return {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [latLng.longitude, latLng.latitude] // 注意：Mapbox坐标顺序是[经度, 纬度]
      }
    };
  }).toList();

  return {
    "type": "FeatureCollection",
    "features": features,
  };
}

重点提醒：Mapbox的GeoJSON坐标顺序是经度在前，纬度在后，和FlutterLatLng(lat, lon)的顺序完全相反，这是高频踩坑点

步骤2：修正实时更新的图层与数据源逻辑 #

实时场景下不要重复创建源和图层，判断资源是否存在，存在则更新数据，不存在再创建：

void _projectVehiclePositions(List<LatLng> VehiclePositions) {
  const String sourceId = 'PositionStream';
  const String layerId = 'PositionStream';

  // 转换为合法的GeoJSON数据
  final geoJsonData = _latLngListToGeoJson(VehiclePositions);

  // 处理数据源：存在则更新，不存在则添加
  if (_mapController.isSourceExist(sourceId)) {
    _mapController.updateSource(sourceId, GeoJsonSourceProperties(data: geoJsonData));
  } else {
    _mapController.addSource(sourceId, GeoJsonSourceProperties(data: geoJsonData));

    // 仅当图层不存在时添加（避免重复创建）
    if (!_mapController.isLayerExist(layerId)) {
      _mapController.addCircleLayer(sourceId, layerId, const CircleLayerProperties(
        circleColor: '#E91E63',
        circleRadius: 5.0,
        circleOpacity: 0.8,
        circleStrokeColor: '#FFFFFF',
        circleStrokeWidth: 1.0,
      ));
    }
  }
}

额外优化建议 #

如果你的VehicleData包含自定义属性（比如车辆ID、状态），可以把这些属性存入GeoJSON的properties字段，后续通过图层表达式实现动态样式（比如不同状态的车辆用不同颜色）：

// 转换方法中加入自定义属性
final features = positions.map((latLng, vehicle) {
  return {
    "type": "Feature",
    "properties": {
      "vehicleId": vehicle.id,
      "status": vehicle.status,
    },
    "geometry": {
      "type": "Point",
      "coordinates": [latLng.longitude, latLng.latitude]
    }
  };
}).toList();

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