FGMap默认支持Web墨卡托投影后的瓦片地图数据，也就是现在我们看到的Google Map、Bing Map、百度地图这样的瓦片数据，只要解析所对应的请求地址路径就可以，这个方法在之前的文章中介绍过。今天我们加载一个“经纬度直投”的地图数据类型－－天地图数据，因为投影的方式不一样，所以加载的方式可能会不一样些。“经纬度等间隔直投”和“Web墨卡托”之间的区别大家可以参考一下《天地图-地图投影技术剖析与思考》。
需要加载不同投影下的地图数据，我们需要自己来定义一个投影计算的方式，可以继承IProjection类，IProjection中有两个关键的方法:
fromPixelToLatLng:将像素点转换成对应的经纬度坐标。
fromLatLngToPixel:将经纬度坐标转换成对应的像素。
因为天地图使用的是“经纬度直投”的方式进行投影，所以换算方式比较简单：
1 public function fromPixelToLatLng(pixel:Point, zoom:Number, nowrap:Boolean = false) : LatLng
2 {
3 var x:Number = 0;
4 var y:Number = 0;
5
6 x = pixel.x / (Math.pow(2,zoom) * titeSize) * 360 - 180;
7 y = 90 - pixel.y / (Math.pow(2,zoom-1) * titeSize) * 180;
8
9 var latlng:LatLng = new LatLng(y, x, nowrap);
10 return latlng;
11 }
12
13 public function fromLatLngToPixel(latLng:LatLng, zoom:Number) : Point
14 {
15 var point:Point = new Point(0,0);
16 var x:Number = 0;
17 var y:Number = 0;
18
19 latLng = new LatLng(latLng.lat(),latLng.lng());
20
21 point.x = (latLng.lng() + 180) / 360 * (Math.pow(2,zoom) * titeSize);
22 point.y = (90 - latLng.lat()) / 180 * (Math.pow(2,zoom-1) * titeSize);
23
24 return point;
25 }
大家也可以参考一下这篇文章：http://lt.cjdby.net/thread-1003128-1-1.html
有了这个方法后，我们可以自己定义一个投影，具体代码如下：
TiandituProjection
1 package com.fgmap.expand.core
2 {
3 import com.fgmap.expand.*;
4 import com.fgmap.maps.LatLng;
5 import com.fgmap.maps.interfaces.IProjection;
6
7 import flash.geom.Point;
8
9 public class TiandituProjection implements IProjection
10 {
11 private var _wrapper:Object;
12 private var pixelRange:Array;
13 private var pixelsPerLonDegree:Array;
14 private var pixelOrigo:Array;
15 private var pixelsPerLonRadian:Array;
16 public static const MERCATOR_ZOOM_LEVEL_ZERO_RANGE:Number = 256;
17 private var titeSize:int = 256;
18
19 public function TiandituProjection(zoom:int)
20 {
21 var mapSize:Number = MERCATOR_ZOOM_LEVEL_ZERO_RANGE;
22 var i:int = 0;
23 var mapOrigo:Number = 0;
24 pixelsPerLonDegree = [];
25 pixelsPerLonRadian = [];
26 pixelOrigo = [];
27 pixelRange = [];
28 while (i < zoom)
29 {
30 mapOrigo = mapSize / 2;
31 pixelsPerLonDegree.push(mapSize / 360);
32 pixelsPerLonRadian.push(mapSize / (2 * Math.PI));
33 pixelOrigo.push(new Point(mapOrigo, mapOrigo));
34 pixelRange.push(mapSize);
35 mapSize = mapSize * 2;
36 i++;
37 }
38 }
39
40 public function fromPixelToLatLng(pixel:Point, zoom:Number, nowrap:Boolean = false) : LatLng
41 {
42 var x:Number = 0;
43 var y:Number = 0;
44
45 x = pixel.x / (Math.pow(2,zoom) * titeSize) * 360 - 180;
46 y = 90 - pixel.y / (Math.pow(2,zoom-1) * titeSize) * 180;
47
48 var latlng:LatLng = new LatLng(y, x, nowrap);
49 return latlng;
50 }
51
52 public function fromLatLngToPixel(latLng:LatLng, zoom:Number) : Point
53 {
54 var point:Point = new Point(0,0);
55 var x:Number = 0;
56 var y:Number = 0;
57
58 latLng = new LatLng(latLng.lat(),latLng.lng());
59
60 point.x = (latLng.lng() + 180) / 360 * (Math.pow(2,zoom) * titeSize);
61 point.y = (90 - latLng.lat()) / 180 * (Math.pow(2,zoom-1) * titeSize);
62
63 return point;
64 }
65
66 public function get interfaceChain() : Array
67 {
68 return ["IProjection"];
69 }
70
71 public function get wrapper() : Object
72 {
73 return this._wrapper;
74 }
75
76 public function tileCheckRange(param1:Point, param2:Number, param3:Number) : Boolean
77 {
78 var x:Number = 0;
79 var y:Number = 0;
80 x = pixelRange[param2];
81 if (param1.y < 0 || param1.y * param3 >= x)
82 {
83 return false;
84 }
85 if (param1.x < 0 || param1.x * param3 >= x)
86 {
87 y = Math.floor(x / param3);
88 param1.x = param1.x % y;
89 if (param1.x < 0)
90 {
91 param1.x = param1.x + y;
92 }
93 }
94 return true;
95 }
96
97 public function getWrapWidth(param1:Number) : Number
98 {
99 return pixelRange[param1];
100 }
101
102 public function set wrapper(param1:Object) : void
103 {
104 this._wrapper = param1;
105 return;
106 }
107
108 }
109 }
当然，这里会做一些处理，因为天地图的图数据分为“线划地图”和“影像地图”两种，而每一类中，又分为底图和标注，所以我们需要在程序中加以区分，天地图资源的分类可以参见：http://www.tianditu.com/guide/resource.jsp
有了这些信息后，，我们在自定义一个地图类型对数据进行处理：
TiandituTileLayer
1 package com.fgmap.expand.core
2 {
3 import com.fgmap.maps.Copyright;
4 import com.fgmap.maps.CopyrightCollection;
5 import com.fgmap.maps.LatLng;
6 import com.fgmap.maps.LatLngBounds;
7 import com.fgmap.maps.TileLayerBase;
8 import com.fgmap.maps.interfaces.ICopyrightCollection;
9
10 import flash.display.DisplayObject;
11 import flash.display.Loader;
12 import flash.events.IOErrorEvent;
13 import flash.geom.Point;
14 import flash.net.URLRequest;
15
16 public class TiandituTileLayer extends TileLayerBase
17 {
18 public static const EMAP:String = "EMap";//矢量地图
19 public static const ANNO:String = "Anno";//矢量标注
20 public static const IMGANNO:String = "ImgAnno";//影像标注
21 public static const IMG:String = "Img";//影像地图
22
23 private var mapMinZoom:int = 1; //最小显示等级
24 private var mapMaxZoom:int = 18;//最大显示等级
25 private var _mapType:String = EMAP;
26
27 public function TiandituTileLayer(tileSize:Number,mapMinZoom:Number,mapMaxZoom:Number,alpha:Number)
28 {
29 var copyrightCollection:CopyrightCollection = new CopyrightCollection();
30 //创建一个自己的版权说明
31 copyrightCollection.addCopyright(
32 new Copyright("TiandituData" + MapType,
33 new LatLngBounds(new LatLng(-180, -90),
34 new LatLng(180, 90)), 0,
35 "天地图数据",18));
36
37 super(copyrightCollection, mapMinZoom, mapMaxZoom, alpha); //调用父类的方法
38 }
39
40 public function get MapType():String
41 {
42 return _mapType;
43 }
44
45 public function set MapType(value:String):void
46 {
47 _mapType = value;
48 }
49
50 //覆盖加载地图数据的方法，这个很重要，地图数据从这里读取
51 override public function loadTile(tilePos:Point, zoom:Number):DisplayObject {
52 var testLoader:Loader = new Loader();
53
54 var z:Number = Math.pow(2,zoom - 1) - Math.pow(2,zoom - 2) - 1;
55 var x:Number = tilePos.x;
56 z = Math.pow(2,zoom - 2);
57 var y:Number = tilePos.y;
58
59 var layerName:String = "";
60 var strURL:String = "";
61 switch(_mapType){
62 case EMAP:
63 if (zoom <= 10) {
64 layerName = "A0512_EMap";
65 } else if (zoom == 11 || zoom == 12) {
66 layerName = "B0627_EMap1112";
67 } else if (zoom >= 13 && zoom <= 18) {
68 layerName = "siwei0608";
69 }
70 break;
71 case IMG:
72 if (zoom <= 10) {
73 layerName = "sbsm0210";
74 } else if (zoom == 11) {
75 layerName = "e11";
76 } else if (zoom == 12) {
77 layerName = "e12";
78 } else if (zoom == 13) {
79 layerName = "e13";
80 } else if (zoom == 14) {
81 layerName = "eastdawnall";
82 } else if (zoom >= 15 && zoom <= 18) {
83 layerName = "sbsm1518";
84 }
85 break;
86 case ANNO:
87 if (zoom <= 10) {
88 layerName = "AB0512_Anno";
89 } else {
90 strURL = "http://www.tianditu.com/js/GeoSurfJSAPI/img/blank.gif";
91 }
92 break;
93 case IMGANNO:
94 if (zoom <= 10) {
95 layerName = "A0610_ImgAnno";
96 } else if(zoom >= 11 && zoom <= 14){
97 layerName = "B0530_eImgAnno";
98 } else if(zoom > 14 && zoom < 19){
99 layerName = "siweiAnno68";
100 } else {
101 strURL = "http://www.tianditu.com/js/GeoSurfJSAPI/img/blank.gif";
102 }
103 break;
104 }
105
106 var num:int = Math.random()* 3;
107 if(strURL == ""){
108 strURL = encodeURI("http://tile" + num + ".tianditu.com/DataServer?" +
109 "T=" + layerName +
110 "&X=" + x +
111 "&Y=" + y +
112 "&L=" + zoom +
113 "&d=2009-10-22T20:25:15&cd=9999-12-31T00:00:00");
114 }
115 var urlRequest:URLRequest;
116 urlRequest = new URLRequest(strURL); //没有地图时显示的内容
117
118 testLoader.load(urlRequest);
119 testLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
120
121 return testLoader;
122 }
123
124 //出错处理
125 private function ioErrorHandler(event:IOErrorEvent):void {
126 trace("ioErrorHandler: " + event);
127 }
128 }
129 }
最后，我们将“线划地图”和“影像地图”加载到我们的地图中来：
FGMapTianditu
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"
5 xmlns:maps="com.fgmap.maps.*"
6 minWidth="955" minHeight="600">
7 <fx:Declarations>
8 <!-- 将非可视元素（例如服务、值对象）放在此处 -->
9 </fx:Declarations>
10 <s:Panel width="800" height="600" title="FGMap加载天地图数据">
11 <maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>
12 </s:Panel>
13
14 <fx:Script>
15 <![CDATA[
16 import com.fgmap.expand.core.*;
17 import com.fgmap.maps.*;
18 import com.fgmap.maps.MapMouseEvent;
19 import com.fgmap.maps.controls.MapTypeControl;
20 import com.fgmap.maps.controls.NavigationControl;
21 import com.fgmap.maps.controls.OverviewMapControl;
22 import com.fgmap.maps.controls.ScaleControl;
23 import com.fgmap.maps.interfaces.IMapType;
24 import com.fgmap.maps.overlays.*;
25
26 private var marker:Marker;
27
28 private var centreLatlng:LatLng = new LatLng(39.90509127978099,116.39769769279956818);//人民英雄纪念碑。
29
30 private var tiandituAnno:TiandituTileLayer = null;
31 private var TiandituAnno:TileLayerOverlay = null;
32 //地图加载完成后执行的方法
33 protected function onMapreadyHandler(event:MapEvent):void
34 {
35 map.enableContinuousZoom(); //启用连续平滑缩放。
36 map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
37 map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
38 map.addControl(new NavigationControl());//供用户更改地图的各项导航参数，包括缩放级别、中心位置和空间方位角。
39 map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
40
41 var normalMapType:IMapType = MapType.NORMAL_MAP_TYPE; //定义一个地图类型
42 var tileLayers:Array = new Array();
43
44 //天地图矢量
45
46 var tdtemaplTileLayer:TiandituTileLayer = new TiandituTileLayer(normalMapType.getTileSize(),1,18,1)
47 tdtemaplTileLayer.MapType = TiandituTileLayer.EMAP;
48 tileLayers.push(tdtemaplTileLayer); //地图类型
49 var TdtEmapMapType:IMapType = new MapType(tileLayers,new TiandituProjection(18),"矢量");//创建自己的地图类型
50 map.addMapType(TdtEmapMapType); //增加到地图上
51
52 tiandituAnno = new TiandituTileLayer(normalMapType.getTileSize(),1,10,1)
53 tiandituAnno.MapType = TiandituTileLayer.ANNO;
54 TiandituAnno = new TileLayerOverlay(tiandituAnno,256,new TiandituProjection(18));//创建自己的地图类型
55 //tileLayers.push(tiandituAnno);
56 //var TdtAnnoMapType:IMapType = new MapType(tileLayers,new TiandituProjection(18),"标注");//创建自己的地图类型
57 //map.addMapType(TdtAnnoMapType); //增加到地图上
58
59 //天地图影像
60 var tdtimgTileLayer:TiandituTileLayer = new TiandituTileLayer(normalMapType.getTileSize(),1,18,1)
61 tdtimgTileLayer.MapType = TiandituTileLayer.IMG;
62 tileLayers = new Array();
63 tileLayers.push(tdtimgTileLayer); //地图类型
64 var TdtImgMapType:IMapType = new MapType(tileLayers,new TiandituProjection(18),"影像");//创建自己的地图类型
65 map.addMapType(TdtImgMapType); //增加到地图上
66
67 map.setMapType(TdtEmapMapType); //设置自己的地图可见
68
69 map.addEventListener(MapEvent.MAPTYPE_CHANGED,onMapTypeChanged);
70
71 map.addOverlay(TiandituAnno); //加载标注覆盖层
72
73 //移除原来的地图类型
74 // for(var i:int=0;i < MapType.DEFAULT_MAP_TYPES.length;i++){
75 // map.removeMapType(MapType.DEFAULT_MAP_TYPES[i]);
76 // }
77
78 map.setCenter(centreLatlng,5); //设置地图的中心点。
79 marker = new Marker(centreLatlng); //建立一个标注。
80 //map.addOverlay(marker); //在地图上显示此标注。
81 BindMarker(marker);
82 }
83
84 private function onMapTypeChanged(e:MapEvent):void {
85 map.removeOverlay(TiandituAnno);
86 if(map.getCurrentMapType().getName() == "矢量"){
87 tiandituAnno = new TiandituTileLayer(256,1,10,1)
88 tiandituAnno.MapType = TiandituTileLayer.ANNO;
89 TiandituAnno = new TileLayerOverlay(tiandituAnno,256,new TiandituProjection(18));
90 map.addOverlay(TiandituAnno); //加载标注覆盖层
91 }else if(map.getCurrentMapType().getName() == "影像"){
92 tiandituAnno = new TiandituTileLayer(256,1,18,1)
93 tiandituAnno.MapType = TiandituTileLayer.IMGANNO;
94 TiandituAnno = new TileLayerOverlay(tiandituAnno,256,new TiandituProjection(18));
95 map.addOverlay(TiandituAnno); //加载标注覆盖层
96 }else{
97 map.removeOverlay(TiandituAnno); //移除标注覆盖层
98 }
99 }
100
101 private function BindMarker(marker:Marker):void {
102 var markerOptions:MarkerOptions = new MarkerOptions();
103 markerOptions.draggable = true;//设置标注可以拖动
104
105 //定义一个标注
106 //var marker:Marker = new Marker(map.getCenter(),markerOptions);
107
108 marker.setOptions(markerOptions);
109
110 var infoOptions:InfoWindowOptions = new InfoWindowOptions();
111 infoOptions.title = "我的坐标是";
112 infoOptions.content = marker.getLatLng().toString();
113 //标注拖动时关闭提示框
114 marker.addEventListener(MapMouseEvent.DRAG_START,function(e:Event):void{
115 marker.closeInfoWindow();
116 });
117 //拖动接受时显示提示框
118 marker.addEventListener(MapMouseEvent.DRAG_END,function(e:Event):void{
119 infoOptions.content = marker.getLatLng().toString();
120 marker.openInfoWindow(infoOptions);
121 });
122 //点击标注时显示提示框
123 marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
124 infoOptions.content = marker.getLatLng().toString();
125 marker.openInfoWindow(infoOptions);
126 });
127
128 map.addOverlay(marker);//在地图上显示这个标注
129 marker.openInfoWindow(infoOptions);//打开对话框
130 }
131 ]]>
132 </fx:Script>
133 </s:Application>
下面就是我们看到的运行结果，线划地图：
影像地图：
到此，我们就可以完全的加载上天地图的数据了。
但是，细心的童鞋可能会发现同一个经纬度，在不同的地图下，位置不对，这是因为各地图厂商都对自己的地图数据进行了偏移，是人为加上去的，所以会有偏差，如果真实使用中，这个需要进行偏移纠正的，这是另一个话题了。
这里只给出一个加载的方式，如果正式使用各地图商的数据，请与他们联系！
完整的项目代码从这里下载：https://files.cnblogs.com/liongis/FGMapTianditu.zip