本章节将对绘制折线、绘制虚线、分段颜色绘制折线、分段纹理绘制折线进行说明。通过这些功能可以绘制各种各样的规划路线或物体轨迹。

通过BMFPolyline类来设置折线的属性，绘制折线的示例代码如下：

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.865, 116.304);
coordinates[1] = BMFCoordinate(39.825, 116.354);
coordinates[2] = BMFCoordinate(39.855, 116.394);
coordinates[3] = BMFCoordinate(39.805, 116.454);
coordinates[4] = BMFCoordinate(39.865, 116.504);

/// 颜色索引,索引的值都是0,表示所有线段的颜色都取颜色集colors的第一个值
List<int> indexs = [0, 0, 0, 0];    
 
/// 颜色
List<Color> colors = List(4);     
colors[0] = Colors.blue;     
colors[1] = Colors.orange;
colors[2] = Colors.red;
colors[3] = Colors.green;

/// 创建polyline
BMFPolyline colorsPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
        colors: colors,
        width: 16,
        lineDashType: BMFLineDashType.LineDashTypeNone,
        lineCapType: BMFLineCapType.LineCapButt,
        lineJoinType: BMFLineJoinType.LineJoinRound);

/// 添加polyline
myMapController?.addPolyline(colorsPolyline);

显示效果如图：

BMFPolyline包含多种可供设置的属性。常用属性如下：

示例代码如下：

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.865, 116.304);
coordinates[1] = BMFCoordinate(39.825, 116.354);
coordinates[2] = BMFCoordinate(39.855, 116.394);
coordinates[3] = BMFCoordinate(39.805, 116.454);
coordinates[4] = BMFCoordinate(39.865, 116.504);

/// 颜色索引
List<int> indexs = [2, 3, 2, 3];

/// 颜色集
List<Color> colors = List(4);
colors[0] = Colors.blue;
colors[1] = Colors.orange;
colors[2] = Colors.red;
colors[3] = Colors.green;

BMFPolyline colorsPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
      colors: colors,
      width: 16,
      dottedLine: true,
      lineDashType: BMFLineDashType.LineDashTypeDot,
    );

/// 添加polyline
myMapController?.addPolyline(_colorsPolyline);

显示效果如图：

示例代码如下：

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.865, 116.304);
coordinates[1] = BMFCoordinate(39.825, 116.354);
coordinates[2] = BMFCoordinate(39.855, 116.394);
coordinates[3] = BMFCoordinate(39.805, 116.454);
coordinates[4] = BMFCoordinate(39.865, 116.504);

/// 颜色索引
List<int> indexs = [2, 3, 2, 3];

/// 颜色集
List<Color> colors = List(4);
colors[0] = Colors.blue;
colors[1] = Colors.orange;
colors[2] = Colors.red;
colors[3] = Colors.green;

/// 创建polyline
BMFPolyline colorsPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
        colors: colors,
        width: 16,
        lineDashType: BMFLineDashType.LineDashTypeNone,
        lineCapType: BMFLineCapType.LineCapButt,
        lineJoinType: BMFLineJoinType.LineJoinRound);
myMapController?.addPolyline(colorsPolyline);

显示效果如图：

示例代码如下：

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.965, 116.304);
coordinates[1] = BMFCoordinate(39.925, 116.354);
coordinates[2] = BMFCoordinate(39.955, 116.394);
coordinates[3] = BMFCoordinate(39.905, 116.454);
coordinates[4] = BMFCoordinate(39.965, 116.504);

/// 纹理索引
List<int> indexs = [2, 3, 2, 3];

/// 纹理集合
List<String> textures = List(4);
textures[0] = 'resoures/traffic_texture_smooth.png';
textures[1] = 'resoures/traffic_texture_slow.png';
textures[2] = 'resoures/traffic_texture_unknown.png';
textures[3] = 'resoures/traffic_texture_smooth.png';


/// 创建polyline
BMFPolyline texturesPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
        textures: textures,
        width: 16,
        dottedLine: true,
        lineDashType: BMFLineDashType.LineDashTypeNone,
        lineCapType: BMFLineCapType.LineCapButt,
        lineJoinType: BMFLineJoinType.LineJoinRound);

/// 添加polyline
myMapController?.addPolyline(texturesPolyline);

显示效果如图：

Since 3.1.0 地图Flutter插件支持绘制大地曲线 示例代码如下：

List<BMFCoordinate> coords = [];
coords.add(BMFCoordinate(36.53, -121.47));
coords.add(BMFCoordinate(22.33, 114));

_geodesicLine = BMFGeodesicLine(
coordinates: coords,
width: 5,
strokeColor: Colors.blue,
lineDirectionCross180: BMFLineDirectionCross180Type.EAST_TO_WEST);
myMapController.addGeodesicLine(_geodesicLine);

显示效果如图：

示例代码如下：

/// 渐变线点
List<BMFCoordinate> coords = [
BMFCoordinate(39.965, 116.404),
BMFCoordinate(39.925, 116.454),
BMFCoordinate(39.955, 116.494),
BMFCoordinate(39.905, 116.554),
BMFCoordinate(39.965, 116.604)
];

/// 分段索引
List<int> indexs = [0, 1, 0, 1];

/// 颜色数组
List<Color> colors = [
Color.fromARGB(123, 0, 0, 255),
Color.fromARGB(123, 255, 0, 0),
Color.fromARGB(123, 0, 255, 0),
Color.fromARGB(123, 255, 214, 0)
];

/// 构造渐变线
_gradientLine = BMFGradientLine(
    coordinates: coords,
    indexs: indexs,
    colors: colors,
    width: 10
);
myMapController.addGradientLine(_gradientLine);

显示效果如图：

点击polyline会回调setMapOnClickedOverlayCallback接口设置的回调方法。
示例代码如下：

myMapController?.setMapOnClickedOverlayCallback(
        callback: (BMFPolyline polyline) {
      print('地图点击覆盖物回调，只支持polyline=${polyline.toMap()}');
    });