之前我们介绍过用FGMap在地图上显示标注，其实都只是用了Marker这个对象，今天让我们来看看线和面的画法，其中包括：圆形、长方形、星形、椭圆形、扇形等等。完成这个些功能后，基本的点、线、面对象我们都可以支持了。
这个是新发布的版本，所以请需要的朋友重新下载接口库文件：http://fgmap-webgis.googlecode.com/svn/trunk/lib/FGMapLib.swc
我们的程序运行后的结果是：
是不是看上去还不错呢？告诉你们一个秘密，当鼠标移动到第一排第二个面上的时候，还会有动画效果。
其中扇形是很多朋友在做基站分析的时候用得最多的，现在FGMap可以直接画了，方便大家使用。
上面只是一张图片，需要源码的看下面：
View Code
<?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>
更多漂亮的图形等待你们去实现，记得告诉我一声哦！