Rectangular overlays using Polygons in GWT

In the following I present a solution to let a user draw a rectangular overlay on a Google map to mark a specific geographical area. It was explicitly required to have a rectangular and not a polygon. The usual behavior with polygons is to let the user mark one point after the other until the user finally marks the first point again to close the polygon. GWT provides a PolygonLineUpdateHandler that is called for the every point except the last one. For the last point there exists a PolygonEndLineHandler. The idea behind my solution is now to let the user only mark two points: the first marks the top-left corner and the second point marks the bottom-right corner of the rectangular. The missing points for the bottom-left and top-right corner and then manually added to the Polygon object. Finally, the last point (the fifth in the polygon) is then set to the top-left corner again.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
private void createRectangular( )
{
   final PolyStyleOptions style = PolyStyleOptions.newInstance( POLYGON_COLOR, 1, 1.0 );
   final Polygon poly = new Polygon( new LatLng[ 0 ], POLYGON_COLOR, 1, 1.0, POLYGON_COLOR, 0.3d );
 
   this.map.addOverlay( poly );
   poly.setDrawingEnabled( );
   poly.setStrokeStyle( style );
 
   poly.addPolygonLineUpdatedHandler( new PolygonLineUpdatedHandler( )
   {
      @Override
      public void onUpdate( final PolygonLineUpdatedEvent event )
      {
         final int numberOfVertices = poly.getVertexCount( );
 
         if ( numberOfVertices == 2 )
         {
            final LatLng bottomRight = poly.getVertex( 1 );
            final LatLng topLeft = poly.getVertex( 0 );
            final LatLng bottomLeft = LatLng.newInstance( bottomRight.getLatitude( ), topLeft.getLongitude( ) );
            final LatLng topRight = LatLng.newInstance( topLeft.getLatitude( ), bottomRight.getLongitude( ) );
 
            poly.insertVertex( 1, bottomLeft );
            poly.insertVertex( 3, topRight );
            poly.insertVertex( 4, topLeft );
            poly.setEditingEnabled( false );
 
            // inform handler about new rectangular
         }
      }
    } );
}

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


*