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

config.xml文件的配置如下:


1

2

<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 = [email protected];
 42                     numberFormatter.decimalSeparatorTo = decimalSeparator ? decimalSeparator : ".";
 43                     const thousandsSeparator:String = [email protected];
 44                     numberFormatter.thousandsSeparatorTo = thousandsSeparator ? thousandsSeparator : ",";
 45                     numberFormatter.useThousandsSeparator = [email protected] == "true";
 46                     numberFormatter.precision = parseFloat([email protected] || "-1");
 47                     const rounding:String = [email protected];
 48                     numberFormatter.rounding = rounding ? rounding : NumberBaseRoundType.NONE;
 49                     //获取设置坐标显示的字体和颜色样式等
 50                     const color:String = [email protected][0] || [email protected][0];
 51                     coords.setStyle("color", toNumber(color ? color : "0x000000"));
 52                     const fontFamily:String = [email protected][0] || [email protected][0];
 53                     coords.setStyle("fontFamily", fontFamily ? fontFamily : "Verdana");
 54                     const fontSize:String = [email protected][0] || [email protected][0];
 55                     coords.setStyle("fontSize", parseInt(fontSize ? fontSize : "9"));
 56                     const fontWeight:String = [email protected][0] || [email protected][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] || [email protected][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] || [email protected][0] || getDefaultString("latitudeLabel") + ":{1}   " + getDefaultString("longitudeLabel") + ":{0}";//设置坐标显示的文字,比如经度,纬度
 92                             numberFormatter.precision = parseFloat([email protected] || "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] || [email protected][0] || getDefaultString("latitudeLabel") + ":{1}   " + getDefaultString("longitudeLabel") + ":{0}";
 98                             numberFormatter.precision = parseFloat([email protected] || "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

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-23 16:29:12

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(三)显示地图坐标系模块的相关文章

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(一)GIS一张图的系统开发环境以及flexviewer框架

系统的GIS功能实现是基于arcgis api for flex,首先附上系统的主界面图,接下来的是对主界面的模块功能详细讲解: 一.GIS环境软件安装 (1)arcgis desktop的安装,要是不想对地图数据进行样式配置或者数据加工的话,这步可以跳过不用安装,详细的安装步骤见这里: (2)arcgis server的安装,这个是必须的,用来发布webgis的地图服务,比如地图基础服务,路径分析的网络服务,地理编码服务等等,详细的安装步骤见这里: (3)arcsde直连创建地理企业数据库,为

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(二)鹰眼模块

讲解GIS功能模块实现之前,先大概说一下flexviewer的核心配置文件config.xml,系统额GIS功能widget菜单布局.系统的样式.地图资源等等都是在这里配置的,这里对flexviewer不熟悉的朋友,要先去flexviewer官网了解或者网上的其他资源了解才行; 鹰眼模块在config.xml文件的配置如下: <widget right="0" bottom="0" config="widgets/OverviewMap/Overvi

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(六)地图搜索模块

config.xml文件的配置如下: 1 <widget label="地图搜索" icon="assets/images/emergency_resource_over.png" 2 config="widgets/Search/SearchWidget.xml" url="widgets/Search/SearchWidget.swf" /> 源代码目录如下: 地图搜索模块的源代码原理解析,详细的代码在下载的开

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(十三)台风模块

config.xml文件的配置如下: <widget label="台风" icon="assets/images/typhoon.png" config="" url="widgets/ActualWeather/TyphoonWarningWidget.swf"/> 源代码目录如下: 界面效果: 大概的思路如下:从后台数据库获取台风的信息列表,展示在界面的表格里面:点击某条台风选项时候,会动态的在地图上展示台风

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(四)地图导航控件模块

config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation/NavigationWidget.xml" url="widgets/Navigation/NavigationWidget.swf" /> 源代码目录如下: 地图导航控件模块的源代码原理解析,详细的代码在下载的开源flexviewer自带的: 1.地图缩小 2.地图放大

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(五)地图切换以及图层显示模块

config.xml文件的配置如下: <widget right="20" top="55" config="widgets/MapSwitcher/MapSwitcherWidget.xml" url="widgets/MapSwitcher/MapSwitcherWidget.swf" /> 源代码目录如下: 该模块的源代码原理解析,详细的代码在下载的开源flexviewer自带的: 大概的思路如下:MapSw

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(九)地图定位模块

config.xml文件的配置如下: <widget label="地图定位" config="widgets/esri/Location/LocationWidget.xml" icon="assets/images/ditudingwei.png" url="widgets/esri/Location/LocationWidget.swf" /> 源代码目录如下: 界面效果: 大概的思路如下:定位有两种方式:1

南沙政府应急系统之GIS一张图(arcgis api for flex)讲解(七)地图打印模块

config.xml文件的配置如下: 1 <widget label="地图打印" 2 icon="assets/images/map_print.png" config="widgets/Print/PrintWidget.xml" 3 url="widgets/Print/PrintWidget.swf" /> 源代码目录如下: 模块的源代码原理解析,详细的代码在下载的开源flexviewer自带的: 大概的思

天津政府应急系统之GIS一张图(arcgis api for flex)解说(三)显示地图坐标系模块

config.xml文件的配置例如以下: 1 2 <widget left="3" bottom="3" config="widgets/Coordinate/CoordinateWidget.xml" url="widgets/Coordinate/CoordinateWidget.swf" /> 源码文件夹例如以下: 地图坐标系模块的源码原理解析,具体的代码在下载的开源flexviewer自带的: (1)Coo