开发 Flutter插件 开发指南 地图Flutter插件 绘制多边形

绘制多边形 最后更新时间: 2021年01月22日

多边形由Polygon类定义。开发者可以通过Polygon来设置多边形的位置、边框和填充颜色等。一个多边形是一组Latlng点按照传入顺序连接而成的封闭图形。 

Polygon属性说明

名称

说明

备注

points

Polygon的坐标点数组,不能为空

必填项,不能为空

final double strokeWidth

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

选填项,默认值为10

final Color strokeColor

边框颜色

选填项,0xCCC4E0F0

final Color fillColor

填充颜色

选填项,0xC4E0F0CC

final bool visible

是否可见

选填项,true

final JoinType joinType

连接点类型,

选填项,默认值bevel,即斜面连接点;该参数不支持copy时修改,仅能在初始化时设置一次 

示例代码

List<LatLng> _createPoints() {
    final List<LatLng> points = <LatLng>[];
    final int polygonCount = _polygons.length;
    final double offset = polygonCount * 0.01;
    points.add(_createLatLng(39.835334 + offset, 116.3710069));
    points.add(_createLatLng(39.843082 + offset, 116.3709830));
    points.add(_createLatLng(39.845932 + offset, 116.3642213));
    points.add(_createLatLng(39.845924 + offset, 116.3595219));
    points.add(_createLatLng(39.841562 + offset, 116.345568));
    points.add(_createLatLng(39.835347 + offset, 116.34575));
    return points;
  }

  void _add() {
    final Polygon polygon = Polygon(
      strokeColor: colors[++colorsIndex % colors.length],
      fillColor: colors[++colorsIndex % colors.length],
      strokeWidth: 15,
      points: _createPoints(),
    );
    setState(() {
      selectedPolygonId = polygon.id;
      _polygons[polygon.id] = polygon;
    });
  }

@override
Widget build(BuildContext context) {
    final AMapWidget map = AMapWidget(
      initialCameraPosition:
          CameraPosition(target: LatLng(39.828809, 116.360364), zoom: 13),
      onMapCreated: _onMapCreated,
      polygons: Set<Polygon>.of(_polygons.values),
    );
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.6,
            width: MediaQuery.of(context).size.width,
            child: map,
          ),
        ],
      ),
    );
  }

显示效果 


返回顶部 示例中心 常见问题 智能客服 公众号
二维码