南沙政府应急系统之GIS一张图（arcgis api for flex）讲解（三）显示地图坐标系模块

config.xml文件的配置如下：

<widget left= "3"  bottom= "3"
config= "widgets/Coordinate/CoordinateWidget.xml"  url= "widgets/Coordinate/CoordinateWidget.swf"  />

源代码目录如下：

 

 地图坐标系模块的源代码原理解析，详细的代码在下载的开源flexviewer自带的：

（1）CoordinateWidget.xml

        

1 <?xml version="1.0" ?>
2 <configuration label="Coordinates (default)">
3     <!-- geo, dms, mercator 主要是坐标输出单位，默认的是经纬度 -->
4     <outputunit>geo</outputunit> 
5 </configuration>

(2)CoordinateWidget.mxml

  1 <?xml version="1.0" encoding="utf-8"?>
 19 <viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
 20                    xmlns:s="library://ns.adobe.com/flex/spark"
 21                    xmlns:mx="library://ns.adobe.com/flex/mx"
 22                    xmlns:viewer="com.esri.viewer.*"
 23                    layout="horizontal"
 24                    widgetConfigLoaded="basewidget_widgetConfigLoadedHandler(event)">
 25     <fx:Script>
 26         <![CDATA[
 27             import com.esri.ags.events.MapEvent;
 28             import com.esri.ags.geometry.MapPoint;
 29             import com.esri.ags.utils.WebMercatorUtil;
 30 
 31             import mx.formatters.NumberBaseRoundType;
 32             import mx.utils.StringUtil;
 33 
 34             private var m_template:String;
 35             private var m_func:Function = substitute;
 36 
 37             protected function basewidget_widgetConfigLoadedHandler(event:Event):void
 38             {
 39                 if (configXML)
 40                 {
                        //下面是读取CoordinateWidget.xml配置文件的资源，要是配置了的话
 41                     const decimalSeparator:String = configXML.numberformatter.@decimalseparator;
 42                     numberFormatter.decimalSeparatorTo = decimalSeparator ? decimalSeparator : ".";
 43                     const thousandsSeparator:String = configXML.numberformatter.@thousandsseparator;
 44                     numberFormatter.thousandsSeparatorTo = thousandsSeparator ? thousandsSeparator : ",";
 45                     numberFormatter.useThousandsSeparator = configXML.numberformatter.@usethousandsseparator == "true";
 46                     numberFormatter.precision = parseFloat(configXML.numberformatter.@precision || "-1");
 47                     const rounding:String = configXML.numberformatter.@rounding;
 48                     numberFormatter.rounding = rounding ? rounding : NumberBaseRoundType.NONE;
 49                     //获取设置坐标显示的字体和颜色样式等
 50                     const color:String = configXML.labelstyle.@color[0] || configXML.label.@color[0];
 51                     coords.setStyle("color", toNumber(color ? color : "0x000000"));
 52                     const fontFamily:String = configXML.labelstyle.@fontfamily[0] || configXML.label.@fontfamily[0];
 53                     coords.setStyle("fontFamily", fontFamily ? fontFamily : "Verdana");
 54                     const fontSize:String = configXML.labelstyle.@fontsize[0] || configXML.label.@fontsize[0];
 55                     coords.setStyle("fontSize", parseInt(fontSize ? fontSize : "9"));
 56                     const fontWeight:String = configXML.labelstyle.@fontweight[0] || configXML.label.@fontweight[0];
 57                     coords.setStyle("fontWeight", fontWeight ? fontWeight : "bold");
 58 
 59                     // If no template specified, show them with a space in between (except for special case below)
 60                     m_template = configXML.labels.template[0] || configXML.label.@template[0] || "{0} {1}";
 61 
 62                     if (map.loaded)
 63                     {
 64                         map_loadHandler(null);
 65                     }
 66                     else
 67                     {
 68                         map.addEventListener(MapEvent.LOAD, map_loadHandler);//加载地图
 69                     }
 70                 }
 71 
 72                 function map_loadHandler(event:MapEvent):void
 73                 {
 74                     map.removeEventListener(MapEvent.LOAD, map_loadHandler);
 75                     const wkid:int = map.spatialReference.wkid; //获取地图的空间坐标参考系
 76                     m_func = substitute;
 77                     const outputUnit:String = configXML.outputunit;//获取地图的坐标显示单位，从配置文件获取
 78                     if (outputUnit === "mercator")//判断地图的坐标体系，墨卡托情况下执行
 79                     {
 80                         if (wkid === 4326 || wkid === 4269 || wkid === 4267)
 81                         {
 82                             m_func = geographicToMercator;//调用地理坐标系转换墨卡托坐标系
 83                         }
 84                     }
 85                     else if (outputUnit === "geo")//地理坐标系情况下执行
 86                     {
 87                         if (wkid === 102100 || wkid === 102113 || wkid === 3857)
 88                         {
 89                             m_func = mercatorToGeographic;//调用墨卡托坐标系转换地理坐标系
 90                             // special default for geographic outputs
 91                             m_template = configXML.labels.template[0] || configXML.label.@template[0] || getDefaultString("latitudeLabel") + ":{1}   " + getDefaultString("longitudeLabel") + ":{0}";//设置坐标显示的文字，比如经度，纬度
 92                             numberFormatter.precision = parseFloat(configXML.numberformatter.@precision || "6");//设置坐标显示的位数
 93                         }
 94                         else if (wkid === 4326 || wkid === 4269 || wkid === 4267)
 95                         {
 96                             // special default for geographic outputs
 97                             m_template = configXML.labels.template[0] || configXML.label.@template[0] || getDefaultString("latitudeLabel") + ":{1}   " + getDefaultString("longitudeLabel") + ":{0}";
 98                             numberFormatter.precision = parseFloat(configXML.numberformatter.@precision || "6");
 99                         }
100                     }
101                     else if (outputUnit === "dms")//经纬度显示单位为度分秒形式情况下执行
102                     {
103                         if (wkid === 102100 || wkid === 102113 || wkid === 3857)
104                         {
105                             m_func = mercatorToDMS;
106                         }
107                         else if (wkid === 4326 || wkid === 4269 || wkid === 4267)
108                         {
109                             m_func = geographicToDMS;
110                         }
111                     }
112                     map.addEventListener(MouseEvent.MOUSE_MOVE, map_mouseMoveHandler);//监听地图鼠标移动事件，用来获取地图经纬度的
113                 }
114             }
115 
116             private function toNumber(value:String):int//转换单位计算
117             {
118                 if (value.substr(0, 2) == "0x")
119                 {
120                     return parseInt(value, 16);
121                 }
122                 return parseInt(value, 10);
123             }
124 
125             private function mercatorToGeographic(web:MapPoint):String//墨卡托转换地理坐标系的函数
126             {
127                 const geo:MapPoint = WebMercatorUtil.webMercatorToGeographic(web) as MapPoint;//arcgis api封装好的转换函数
128                 return StringUtil.substitute(m_template,
129                                              numberFormatter.format(geo.x),
130                                              numberFormatter.format(geo.y));
131             }
132 
133             private function mercatorToDMS(web:MapPoint):String//墨卡托转换经纬度度分秒形式的函数
134             {
135                 const geo:MapPoint = WebMercatorUtil.webMercatorToGeographic(web) as MapPoint; 
136                 return StringUtil.substitute(m_template, DegToDMS.format(geo.x, DegToDMS.LON), DegToDMS.format(geo.y, DegToDMS.LAT));
137             }
138 
139             private function geographicToMercator(geo:MapPoint):String//地理坐标系转换墨卡托的函数
140             {
141                 const web:MapPoint = WebMercatorUtil.geographicToWebMercator(geo) as MapPoint;
142                 return StringUtil.substitute(m_template,
143                                              numberFormatter.format(web.x),
144                                              numberFormatter.format(web.y));
145             }
146 
147             private function substitute(mapPoint:MapPoint):String
148             {
149                 return StringUtil.substitute(m_template,
150                                              numberFormatter.format(mapPoint.x),
151                                              numberFormatter.format(mapPoint.y));
152             }
153 
154             private function geographicToDMS(mapPoint:MapPoint):String
155             {
156                 const x:String = DegToDMS.format(mapPoint.x, DegToDMS.LON);
157                 const y:String = DegToDMS.format(mapPoint.y, DegToDMS.LAT);
158                 return StringUtil.substitute(m_template, x, y);
159             }
160 
161             private function map_mouseMoveHandler(event:MouseEvent):void
162             {
163                 const mapPoint:MapPoint = map.toMapFromStage(event.stageX, event.stageY);//获取鼠标移动的地图经纬度
164                 coords.text = m_func(mapPoint);
165             }
166         ]]>
167     </fx:Script>
168 
169     <fx:Declarations>
170         <mx:NumberFormatter id="numberFormatter"/>
171     </fx:Declarations>
172     <viewer:filters>
173         <mx:GlowFilter alpha="1"
174                        blurX="3"
175                        blurY="3"
176                        color="0xFFFFFF"
177                        strength="7"/>
178     </viewer:filters>
179     <s:Label id="coords" color="0x000000"/>//显示经纬度的位置，显示label
180 </viewer:BaseWidget>

（3）DegToDMS.as

 1 package widgets.Coordinate
 2 {
 3 
 4 /**
 5  * Utility class to pretty print decimal degree numbers.
 6  * @private
 7  */
 8 public final class DegToDMS
 9 {
10     // Constants to define the format.
11     public static const LAT:String = "lat";
12 
13     public static const LON:String = "lon";
14 
15     /**
16      * Utility function to format a decimal degree number into a pretty string with degrees, minutes and seconds.
17      * @param decDeg the decimal degree number.
18      * @param decDir "lat" for a latitude number, "lon" for a longitude value.
19      * @return A pretty print string with degrees, minutes and seconds.
20      */
21     public static function format(decDeg:Number, decDir:String):String//这个函数主要是用来把经纬度转换度分秒的形式来展示经纬度，比如113度23分23秒等等
22     {
23         var d:Number = Math.abs(decDeg);
24         var deg:Number = Math.floor(d);
25         d = d - deg;
26         var min:Number = Math.floor(d * 60);
27         var av:Number = d - min / 60;
28         var sec:Number = Math.floor(av * 60 * 60);
29         if (sec == 60)
30         {
31             min++;
32             sec = 0;
33         }
34         if (min == 60)
35         {
36             deg++;
37             min = 0;
38         }
39         var smin:String = min < 10 ? "0" + min + "' " : min + "' ";
40         var ssec:String = sec < 10 ? "0" + sec + "\" " : sec + "\" ";
41         var sdir:String = (decDir == LAT) ? (decDeg < 0 ? "S" : "N") : (decDeg < 0 ? "W" : "E");
42         return deg + "\xB0 " + smin + ssec + sdir;
43     }
44 }
45 
46 }

      备注：

      GIS技术交流QQ群：432512093