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

之前我们介绍过用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 >

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