diff --git a/example/lib/main.dart b/example/lib/main.dart index 7465594fa..7cf4012d0 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -19,6 +19,7 @@ import './pages/overlay_image.dart'; import './pages/plugin_api.dart'; import './pages/plugin_scalebar.dart'; import './pages/plugin_zoombuttons.dart'; +import './pages/polygon.dart'; import './pages/polyline.dart'; import './pages/reset_tile_layer.dart'; import './pages/sliding_map.dart'; @@ -61,6 +62,7 @@ class MyApp extends StatelessWidget { MovingMarkersPage.route: (context) => MovingMarkersPage(), CirclePage.route: (context) => CirclePage(), OverlayImagePage.route: (context) => OverlayImagePage(), + PolygonPage.route: (context) => PolygonPage(), SlidingMapPage.route: (_) => SlidingMapPage(), WMSLayerPage.route: (context) => WMSLayerPage(), CustomCrsPage.route: (context) => CustomCrsPage(), diff --git a/example/lib/pages/polygon.dart b/example/lib/pages/polygon.dart new file mode 100644 index 000000000..112c887eb --- /dev/null +++ b/example/lib/pages/polygon.dart @@ -0,0 +1,97 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_map/flutter_map.dart'; +import 'package:latlong2/latlong.dart'; + +import '../widgets/drawer.dart'; + +class PolygonPage extends StatelessWidget { + static const String route = 'polygon'; + + @override + Widget build(BuildContext context) { + var notFilledPoints = [ + LatLng(51.5, -0.09), + LatLng(53.3498, -6.2603), + LatLng(48.8566, 2.3522), + ]; + + var filledPoints = [ + LatLng(55.5, -0.09), + LatLng(54.3498, -6.2603), + LatLng(52.8566, 2.3522), + ]; + + var notFilledDotedPoints = [ + LatLng(49.29, -2.57), + LatLng(51.46, -6.43), + LatLng(49.86, -8.17), + LatLng(48.39, -3.49), + ]; + + var filledDotedPoints = [ + LatLng(46.35, 4.94), + LatLng(46.22, -0.11), + LatLng(44.399, 1.76), + ]; + + return Scaffold( + appBar: AppBar(title: Text('Polygons')), + drawer: buildDrawer(context, PolygonPage.route), + body: Padding( + padding: EdgeInsets.all(8.0), + child: Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 8.0, bottom: 8.0), + child: Text('Polygons'), + ), + Flexible( + child: FlutterMap( + options: MapOptions( + center: LatLng(51.5, -0.09), + zoom: 5.0, + ), + layers: [ + TileLayerOptions( + urlTemplate: + 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', + subdomains: ['a', 'b', 'c']), + PolygonLayerOptions(polygons: [ + Polygon( + points: notFilledPoints, + isFilled: false, // By default it's false + borderColor: Colors.red, + borderStrokeWidth: 4.0, + ), + Polygon( + points: filledPoints, + isFilled: true, + color: Colors.purple, + borderColor: Colors.purple, + borderStrokeWidth: 4.0, + ), + Polygon( + points: notFilledDotedPoints, + isFilled: false, + isDotted: true, + borderColor: Colors.green, + borderStrokeWidth: 4.0, + ), + Polygon( + points: filledDotedPoints, + isFilled: true, + isDotted: true, + borderStrokeWidth: 4.0, + borderColor: Colors.lightBlue, + color: Colors.lightBlue, + ), + ]), + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/example/lib/widgets/drawer.dart b/example/lib/widgets/drawer.dart index 087f91cdc..064a07325 100644 --- a/example/lib/widgets/drawer.dart +++ b/example/lib/widgets/drawer.dart @@ -20,6 +20,7 @@ import '../pages/overlay_image.dart'; import '../pages/plugin_api.dart'; import '../pages/plugin_scalebar.dart'; import '../pages/plugin_zoombuttons.dart'; +import '../pages/polygon.dart'; import '../pages/polyline.dart'; import '../pages/reset_tile_layer.dart'; import '../pages/sliding_map.dart'; @@ -98,6 +99,12 @@ Drawer buildDrawer(BuildContext context, String currentRoute) { PolylinePage.route, currentRoute, ), + _buildMenuItem( + context, + const Text('Polygons'), + PolygonPage.route, + currentRoute, + ), _buildMenuItem( context, const Text('MapController'), diff --git a/lib/src/layer/polygon_layer.dart b/lib/src/layer/polygon_layer.dart index 05ab0be6f..c1bbcaba0 100644 --- a/lib/src/layer/polygon_layer.dart +++ b/lib/src/layer/polygon_layer.dart @@ -35,6 +35,7 @@ class Polygon { final Color borderColor; final bool disableHolesBorder; final bool isDotted; + final bool isFilled; late final LatLngBounds boundingBox; Polygon({ @@ -45,6 +46,7 @@ class Polygon { this.borderColor = const Color(0xFFFFFF00), this.disableHolesBorder = false, this.isDotted = false, + this.isFilled = false, }) : holeOffsetsList = null == holePointsList || holePointsList.isEmpty ? null : List.generate(holePointsList.length, (_) => []); @@ -193,9 +195,9 @@ class PolygonPainter extends CustomPainter { void _paintDottedLine(Canvas canvas, List offsets, double radius, double stepLength, Paint paint) { var startDistance = 0.0; - for (var i = 0; i < offsets.length - 1; i++) { - var o0 = offsets[i]; - var o1 = offsets[i + 1]; + for (var i = 0; i < offsets.length; i++) { + var o0 = offsets[i % offsets.length]; + var o1 = offsets[(i + 1) % offsets.length]; var totalDistance = _dist(o0, o1); var distance = startDistance; while (distance < totalDistance) { @@ -247,7 +249,8 @@ class PolygonPainter extends CustomPainter { } else { canvas.clipRect(rect); paint - ..style = PaintingStyle.fill + ..style = + polygonOpt.isFilled ? PaintingStyle.fill : PaintingStyle.stroke ..color = polygonOpt.color; var path = Path();