绘制折线最后更新时间: 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;
    });
  }

添加纹理线效果

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

Polyline属性说明

在地图上添加普通Polyline

在地图上添加虚线

在地图上添加大地曲线

在地图上添加纹理线

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