FGMap学习之--自定义标注(示例：核电站离我们有多远)

日本地震引起的核泄漏再一次引起我们对核使用的关注，我们是否知道我们离核电站有多远呢？
今天我们将使用FGMap在地图将我们身边的核电站标注出来，使用到的是自己定义标注。
这个自定义标注中由一张图片，文字标签，背景图三部分组成。

数据来源来自搜狗地图，本人不知道是否正确。

我们的主程序代码如下：

 

View Code

1 <? xml version = " 1.0 " encoding = " utf-8 " ?>
2   < s:Application xmlns:fx = " http://ns.adobe.com/mxml/2009 "
3 xmlns:s = " library://ns.adobe.com/flex/spark "
4 xmlns:mx = " library://ns.adobe.com/flex/mx " minWidth = " 800 " minHeight = " 600 "
5 xmlns:maps = " com.fgmap.maps.* " >
6 < s:layout >
7 < s:BasicLayout / >
8 < / s:layout>
9 < fx:Declarations >
10 <!-- 将非可视元素（例如服务、值对象）放在此处 -->
11 < / fx:Declarations>
12
13 < s:Panel width = " 100% " height = " 100% " title = " 核电站离我们有多远 " >
14 < maps:Map id = " map " width = " 100% " height = " 100% "
15 mapevent_mapready = " map_mapevent_mapreadyHandler(event) "/ >
16 < / s:Panel>
17
18 < fx:Script >
19 <! [CDATA[
20 import com.SogouMap.PlantData;
21 import com.control.CustomIconSprite;
22 import com.fgmap.maps. * ;
23 import com.fgmap.maps.MapMouseEvent;
24 import com.fgmap.maps.controls.MapTypeControl;
25 import com.fgmap.maps.controls.NavigationControl;
26 import com.fgmap.maps.controls.OverviewMapControl;
27 import com.fgmap.maps.controls.ScaleControl;
28 import com.fgmap.maps.interfaces.IMapType;
29 import com.fgmap.maps.overlays. * ;
30
31 import mx.charts.PieChart;
32 import mx.collections.ArrayCollection;
33
34 private var marker:Marker;
35
36 private var centreLatlng:LatLng = new LatLng( 39.911842984749946 , 116.400146484375 ); // 北京的一个坐标位置。
37
38 protected function map_mapevent_mapreadyHandler(event:MapEvent): void
39 {
40 map.enableContinuousZoom(); // 启用连续平滑缩放。
41 map.enableScrollWheelZoom(); // 启用使用鼠标滚轮缩放。
42 map.addControl( new MapTypeControl()); // 供用户在地图类型之间进行切换的按钮。
43 map.addControl( new NavigationControl()); // 供用户更改地图的各项导航参数，包括缩放级别、中心位置和空间方位角。
44 map.addControl( new ScaleControl()); // 比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
45
46 map.setCenter(centreLatlng, 4 ); // 设置地图的中心点。
47 map.setMapType(MapType.NORMAL_MAP_TYPE); // 设置默认为缺省地图
48
49 showInMap();
50 }
51
52 private function showInMap(): void {
53 var data:ArrayCollection = PlantData.data;
54 var points:Array = PlantData.latlngs;
55 for ( var i: int = 0 ; i < data.length; i ++ ){
56 var p:Object = data[i];
57
58 var latlng:LatLng = new LatLng(points[i][ 0 ],points[i][ 1 ]);
59 trace(latlng.toUrlValue());
60
61 var markerOptions:MarkerOptions = new MarkerOptions({
62 hasShadow: false ,
63 tooltip:p.caption,
64 icon: new CustomIconSprite(p.caption,p.Style.id) // 自定义标注，参数为名称和图标样式
65 });
66 var pMarker:Marker = new Marker(latlng,markerOptions); // 创建标注并指定标注样式
67
68 map.addOverlay(pMarker); // 在地图上添加样式
69 }
70 }
71 ]] >
72 < / fx:Script>
73 < / s:Application>

自己定义标注的代码如下：

View Code

1 package com.control
2 {
3 import flash.display.DisplayObject;
4 import flash.display.Sprite;
5 import flash.text.TextField;
6 import flash.text.TextFieldAutoSize;
7
8 public class CustomIconSprite extends Sprite
9 {
10 [Embed( ' assets/style/1.png ' )]
11 private var S2000Img:Class;
12
13 [Embed( ' assets/style/2.png ' )]
14 private var S2001Img:Class;
15
16 [Embed( ' assets/style/3.png ' )]
17 private var S1999Img:Class;
18
19 public function CustomIconSprite(label:String,styleIndex:String = " S2000 " )
20 {
21 var styleClass:DisplayObject;
22 switch (styleIndex){
23 case " S2000 " :
24 styleClass = new S2000Img();
25 break ;
26 case " S2001 " :
27 styleClass = new S2001Img();
28 break ;
29 case " S1999 " :
30 styleClass = new S1999Img();
31 break ;
32 }
33 addChild(styleClass); // 添加图片
34 var labelMc:TextField = createTextField(label); // 创建文本标注
35
36 var sprite:Sprite = new Sprite(); // 创建文本标注的背景
37 var width:Number = labelMc.textWidth + 6 ;
38 var height:Number = labelMc.textHeight + 6 ;
39 sprite.graphics.lineStyle( 1 , 0x000000 , 1 );
40 sprite.graphics.beginFill( 0xffffff , 1 );
41 sprite.graphics.drawRoundRect( 0 - width / 2 , 0 - height / 2 ,width,height, 3 , 3 );
42 labelMc.x = 0 - width / 2 + 3 ;
43 labelMc.y = 0 - height / 2 + 0 ;
44 sprite.addChild(labelMc);
45
46 sprite.x = styleClass.width + width / 2 ;
47 sprite.y = styleClass.y + sprite.height / 2 + height / 2 ;
48 addChild(sprite);
49 cacheAsBitmap = true ;
50 }
51
52 private function createTextField(label:String):TextField {
53 var labelMc:TextField = new TextField();
54 labelMc.autoSize = TextFieldAutoSize.LEFT;
55 labelMc.selectable = false ;
56 labelMc.border = false ;
57 labelMc.embedFonts = false ;
58 labelMc.mouseEnabled = false ;
59
60 labelMc.text = label;
61 labelMc.x = 5 ;
62
63 return labelMc;
64 }
65 }
66 }

源代码可以从这里下载：http://files.cnblogs.com/liongis/FGMapDemo4.rar

搜狗的坐标也是经过偏移的，这个应该和百度地图一样。但这和我们之前的地图坐标不一样，所以中间需要去转换，程序中的坐标是已经转换好的。

转换算法这里不便贴出来，如果哪位朋友有这几种地图间坐标转换的需要，可以找我。

转载于:https://www.cnblogs.com/liongis/archive/2011/03/21/1990675.html