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