FGMap学习之各类对象的使用方法(圆形、长方形、星形、椭圆形、扇形)

之前我们介绍过用FGMap在地图上显示标注，其实都只是用了Marker这个对象，今天让我们来看看线和面的画法，其中包括：圆形、长方形、星形、椭圆形、扇形等等。完成这个些功能后，基本的点、线、面对象我们都可以支持了。

这个是新发布的版本，所以请需要的朋友重新下载接口库文件：http://fgmap-webgis.googlecode.com/svn/trunk/lib/FGMapLib.swc

我们的程序运行后的结果是：

是不是看上去还不错呢？告诉你们一个秘密，当鼠标移动到第一排第二个面上的时候，还会有动画效果。

其中扇形是很多朋友在做基站分析的时候用得最多的，现在FGMap可以直接画了，方便大家使用。

上面只是一张图片，需要源码的看下面：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600" 
               xmlns:maps="com.fgmap.maps.*">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <s:Panel width="100%" height="100%" title="FGMap API 各种对象的画法">
        <maps:Map id="map" width="100%" height="100%" mapevent_mapready="map_mapevent_mapreadyHandler(event)"/>
    </s:Panel>

    <fx:Script>
        <![CDATA[
            import com.fgmap.maps.*;
            import com.fgmap.maps.MapMouseEvent;
            import com.fgmap.maps.controls.MapTypeControl;
            import com.fgmap.maps.controls.NavigationControl;
            import com.fgmap.maps.controls.OverviewMapControl;
            import com.fgmap.maps.controls.ScaleControl;
            import com.fgmap.maps.interfaces.IMapType;
            import com.fgmap.maps.overlays.*;
            
            import flash.filters.DropShadowFilter;
            import mx.effects.Glow;
            
            private var marker:Marker;

            private var centreLatlng:LatLng = new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。
            
            private var glowEffect:Glow;
            
            protected function map_mapevent_mapreadyHandler(event:MapEvent):void
            {
                map.enableContinuousZoom();    //启用连续平滑缩放。
                map.enableScrollWheelZoom();    //启用使用鼠标滚轮缩放。
                map.addControl(new MapTypeControl());    //供用户在地图类型之间进行切换的按钮。
                map.addControl(new NavigationControl());//供用户更改地图的各项导航参数，包括缩放级别、中心位置和空间方位角。
                map.addControl(new ScaleControl());    //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
                map.addControl(new OverviewMapControl());//鹰眼图
                
                map.removeMapType(MapType.PHYSICAL_MAP_TYPE);    //删除地形图片
                map.removeMapType(MapType.SATELLITE_MAP_TYPE);    //删除影像图片
                
                map.setCenter(new LatLng(43,-79.5),7);
                var point:LatLng = new LatLng();
                
                //设置折线的样式
                var polylineoptions:PolylineOptions = new PolylineOptions({  
                    strokeStyle: {    
                        thickness: 3,    
                        color: 0x0000ff,   
                        alpha: 0.5,    
                        pixelHinting: false  
                    },
                    tooltip: "我是Polyline"
                });
                
                //设置面的样式
                var polygonOptions:PolygonOptions = new PolygonOptions({  
                    strokeStyle: {    
                        thickness: 3,    
                        color: 0x0000ff,    
                        alpha: 0.5,    
                        pixelHinting: false
                    },  
                    fillStyle: {
                        color: 0x00ff00,    
                        alpha: 0.5
                    },
                    tooltip: "我是Polygon"
                });
                
                point = new LatLng(45,-81);
                var lat:Number = point.lat();
                var lon:Number = point.lng();
                var latOffset:Number = 0.3;
                var lonOffset:Number = 0.3;
                var polyline:Polyline = new Polyline([
                    new LatLng(lat, lon - lonOffset),
                    new LatLng(lat + latOffset, lon),
                    new LatLng(lat, lon + lonOffset),
                    new LatLng(lat - latOffset, lon),
                    new LatLng(lat, lon - lonOffset)
                ], 
                    new PolylineOptions({ 
                        strokeStyle: {
                            color: 0x0000ff,
                            thickness: 3,
                            alpha: 0.7}, 
                        tooltip:"我是Polyline"
                    }));
                map.addOverlay(polyline); 

                point = new LatLng(45,-80);
                lat = point.lat();
                lon = point.lng();
                var polygon:Polygon = new Polygon([
                    new LatLng(lat, lon - lonOffset),
                    new LatLng(lat + latOffset, lon),
                    new LatLng(lat, lon + lonOffset),
                    new LatLng(lat - latOffset, lon),
                    new LatLng(lat, lon - lonOffset)
                ], 
                    new PolygonOptions({ 
                        strokeStyle: {
                            color: 0x0000ff,
                            thickness: 3,
                            alpha: 0.7}, 
                        fillStyle: {
                            color: 0x0000ff,
                            alpha: 0.7},
                        tooltip:"我是Polygon"
                    }));
                map.addOverlay(polygon); 
                
                var myFilters:Array = new Array();
                myFilters.push(new DropShadowFilter());
                polygon.foreground.filters = myFilters;
                
                // 在面上增加动画效果
                glowEffect = new Glow();
                glowEffect.alphaFrom = 1;
                glowEffect.alphaTo = 0;
                glowEffect.blurXFrom = 0;
                glowEffect.blurXTo = 255;
                glowEffect.blurYFrom = 0;
                glowEffect.blurYTo = 255;
                glowEffect.color = 0x0000FF;
                glowEffect.duration = 2000;
                glowEffect.strength = 2;
                
                glowEffect.target = polygon.foreground;
                
                polygon.addEventListener(MapMouseEvent.ROLL_OVER, function(event:MapMouseEvent): void {
                    glowEffect.stop();
                    glowEffect.play();
                });
                
                // === 圆 ===
                point = new LatLng(44,-81);
                polylineoptions.tooltip = "我是PolylineCircle";
                map.addOverlay(new PolylineCircle(point,30000,polylineoptions));
                
                // === 正方形 ===
                point = new LatLng(44,-80);
                polylineoptions.strokeStyle.color = 0xff0000;
                polylineoptions.tooltip = "我是PolylineRegularPoly";
                map.addOverlay(new PolylineRegularPoly(point,30000,4,0,polylineoptions));
                
                // === 星形 ===
                point = new LatLng(44,-79);
                polylineoptions.strokeStyle.color = 0x0000ff;
                polylineoptions.tooltip = "我是PolylineStar";
                map.addOverlay(new PolylineStar(point,30000,10000,5,0,polylineoptions));
                
                // ==- 规则长方形 ===
                point = new LatLng(44,-78);
                polylineoptions.strokeStyle.color = 0xff0000;
                polylineoptions.tooltip = "我是PolylineShape";
                map.addOverlay(new PolylineShape(point,50000,10000,50000,10000,30,4,polylineoptions,true));
                polygonOptions.fillStyle.color = 0xff0000;
                polygonOptions.tooltip = "我是PolygonShape";
                map.addOverlay(new PolygonShape(point,50000,10000,50000,10000,-60,4,polygonOptions,true));

                // === Filled Circle ===
                point = new LatLng(43,-81);
                polygonOptions.fillStyle.color = 0x00ff00;
                polygonOptions.tooltip = "我是PolygonCircle";
                map.addOverlay(new PolygonCircle(point,30000,polygonOptions));
                
                // === Pentagon === 
                point = new LatLng(43,-80);
                polygonOptions.fillStyle.color = 0xffff00;
                polygonOptions.tooltip = "我是PolygonRegularPoly";
                map.addOverlay(new PolygonRegularPoly(point,30000,5,0,polygonOptions));
                
                // === 5-pointed Star ===
                point = new LatLng(43,-79);
                polygonOptions.fillStyle.color = 0xff0000;
                polygonOptions.tooltip = "我是PolygonStar";
                map.addOverlay(new PolygonStar(point,30000,10000,5,0,polygonOptions));
                
                // === Ellipse ===
                point = new LatLng(43,-78);
                polygonOptions.fillStyle.color = 0x0000ff;
                polygonOptions.tooltip = "我是PolygonEllipse";
                map.addOverlay(new PolygonEllipse(point,30000,10000,-45,polygonOptions));
                
                // === Elliptical flash ===
                point = new LatLng(42,-81);
                polygonOptions.fillStyle.color = 0xffff00;
                polygonOptions.tooltip = "我是PolygonShape";
                map.addOverlay(new PolygonShape(point,50000,25000,45000,20000,60,100,polygonOptions));
                
                // === 增加画扇形的方法 ===
                point = new LatLng(42,-80);
                //map.addOverlay(new PolylineShape(point,30000,30000,-30000,-30000,0,10));
                polylineoptions.tooltip = "我是PolylineSector";
                map.addOverlay(new PolylineSector(point,30000,0,45,polylineoptions));
                polygonOptions.tooltip = "我是PolygonShape";
                map.addOverlay(new PolygonSector(point,30000,90,135,polygonOptions));
                map.addOverlay(new PolylineSector(point,30000,180,225,polylineoptions));
                map.addOverlay(new PolygonSector(point,30000,270,315,polygonOptions));
                
                // === Hexagonal grid ===
                point = new LatLng(42,-78.8);
                polygonOptions.tooltip = "我是PolygonRegularPoly";
                polygonOptions.strokeStyle.thickness = 1;
                map.addOverlay(new PolygonRegularPoly(point,25000,6,90,polygonOptions));
                var d:Number=2*25000*Math.cos(Math.PI/6);
                polygonOptions.fillStyle.color = 0x00ffff;
                map.addOverlay(new PolygonRegularPoly(point.eOffsetBearing(d, 30),25000,6,90,polygonOptions));
                polygonOptions.fillStyle.color = 0xff0000;
                map.addOverlay(new PolygonRegularPoly(point.eOffsetBearing(d, 90),25000,6,90,polygonOptions));
                polygonOptions.fillStyle.color = 0x00ffff;
                map.addOverlay(new PolygonRegularPoly(point.eOffsetBearing(d,150),25000,6,90,polygonOptions));
                polygonOptions.fillStyle.color = 0xffff00;
                map.addOverlay(new PolygonRegularPoly(point.eOffsetBearing(d,210),25000,6,90,polygonOptions));
                polygonOptions.fillStyle.color = 0x0000ff;
                map.addOverlay(new PolygonRegularPoly(point.eOffsetBearing(d,270),25000,6,90,polygonOptions));
                polygonOptions.fillStyle.color = 0xffff00;
                map.addOverlay(new PolygonRegularPoly(point.eOffsetBearing(d,330),25000,6,90,polygonOptions));
            }

        ]]>
    </fx:Script>
</s:Application>

更多漂亮的图形等待你们去实现，记得告诉我一声哦！