日本地震引起的核泄漏再一次引起我们对核使用的关注，我们是否知道我们离核电站有多远呢？
今天我们将使用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 }
源代码可以从这里下载：
搜狗的坐标也是经过偏移的，这个应该和百度地图一样。但这和我们之前的地图坐标不一样，所以中间需要去转换，程序中的坐标是已经转换好的。
转换算法这里不便贴出来，如果哪位朋友有这几种地图间坐标转换的需要，可以找我。