您现在的位置: 开发 > Flutter插件 > 开发指南 > 地图Flutter插件 > 绘制折线

绘制折线 最后更新时间: 2021年01月22日

Polyline提供了绘制折线、虚线、大地曲、纹理线等功能。通过这些功能可以绘制各种各样的规划路线或物体轨迹等。

Polyline属性说明

名称

 说明

 备注

points

覆盖物的坐标点数组

必填项,points不能为空

width

线宽,单位为逻辑像素,同Android中的dp,iOS中的point

可选项,默认值为10

visible

是否可见 

可选项,默认值true

alpha

透明度

可选项,默认值为1.0

geodesic

是否为大地曲线

可选项,默认值为false,该参数仅支持初始化时传入,不可修改

dashLineType

虚线类型

可选项,默认值为none,即非虚线

capType

线头类型

可选项,默认值为butt,即普通头

joinType

连接点类型

可选项,默认值为bevel,斜面连接点

customTexture

自定义纹理图片

可选项,默认为空,注意: 如果设置了自定义纹理图片,则color的设置将无效;该参数仅支持初始化时传入,不可修改

color

绘制颜色

可选项,默认值为0xCCC4E0F0

onTap 

点击回调

可选项,默认为空 

在地图上添加普通Polyline

List<LatLng> _createPoints() {
    final List<LatLng> points = <LatLng>[];
    points.add(LatLng(39.938698, 116.275177));
    points.add(LatLng(39.966069, 116.289253));
    points.add(LatLng(39.944226, 116.306076));
    points.add(LatLng(39.966069, 116.322899));
    points.add(LatLng(39.938698, 116.336975));
    return points;
  }

  void _add() {
    final Polyline polyline = Polyline(
        color: colors[++colorsIndex % colors.length],
        width: 10,
        points: _createPoints(),
        onTap: _onPolylineTapped);
    setState(() {
      _polylines[polyline.id] = polyline;
    });
  }

@override
  Widget build(BuildContext context) {
    final AMapWidget map = AMapWidget(
      onMapCreated: _onMapCreated,
      polylines: Set<Polyline>.of(_polylines.values),
    );
    return Container(
    child: amap,
  );
}

添加后的效果 

在地图上添加虚线

void _add() {
    final Polyline polyline = Polyline(
        color: colors[++colorsIndex % colors.length],
        width: 10,
        points: _createPoints(),
        dashLineType: DashLineType.square,
        onTap: _onPolylineTapped);
    setState(() {
      _polylines[polyline.id] = polyline;
    });
  }

添加后的效果 

在地图上添加大地曲线

List<LatLng> _createPoints() {
    final List<LatLng> points = <LatLng>[];
    final int polylineCount = _polylines.length;
    final int offset = polylineCount * (-1);
    points.add(LatLng(39.905151 + offset, 116.401726));
    points.add(LatLng(38.905151 + offset, 70.401726));
    return points;
  }

  void _add() {
    final Polyline polyline = Polyline(
        color: colors[++colorsIndex % colors.length],
        width: 10,
        geodesic: true,
        points: _createPoints());

    setState(() {
      _polylines[polyline.id] = polyline;
    });
    //移动到合适的范围
    LatLngBounds bound =
        LatLngBounds(southwest: LatLng(25.0, 70.0), northeast: LatLng(45, 117));
    CameraUpdate update = CameraUpdate.newLatLngBounds(bound, 10);
    _controller?.moveCamera(update);
  }

添加后的效果 

在地图上添加纹理线

  void _add() {
    final Polyline polyline = Polyline(
        width: 20,
        customTexture:
            BitmapDescriptor.fromIconPath('assets/texture_green.png'),
        joinType: JoinType.round,
        points: _createPoints());

    setState(() {
      _polylines[polyline.id] = polyline;
    });
  }

添加纹理线效果 


 

 

 

 

新用户
福利
示例
中心
常见
问题