FGMap学习之添加自己的地图数据

今天进入我们的正题，如何来加载自己的地图数据，这里使用的数据可以自己生成，也可以从网上下载，放到本机或自己的服务器上，只要修改对应的路径就行。

仍然在上次的例子上来增加：

在项目的src目录上点击右键，选择"新建ActionScript类",输入包名、类名及超类：

点击“Finish”后，会在程序中新建出一个MyTileLayer.as的文件，将下面的代码贴入文件中：

package com.examples
{
	import com.fgmap.maps.Color;
	import com.fgmap.maps.Copyright;
	import com.fgmap.maps.CopyrightCollection;
	import com.fgmap.maps.LatLng;
	import com.fgmap.maps.LatLngBounds;
	import com.fgmap.maps.TileLayerBase;
	import com.fgmap.maps.interfaces.ICopyrightCollection;
	import com.fgmap.maps.interfaces.IMap;
	
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.events.*;
	import flash.geom.Point;
	import flash.net.URLRequest;
	
	public class MyTileLayer extends TileLayerBase
	{
		private var mapMinZoom:int = 11;	//最小显示等级
		private var mapMaxZoom:int = 13;	//最大显示等级
		
		public function MyTileLayer(tileSize:Number){
			var copyrightCollection:CopyrightCollection = new CopyrightCollection();

			super(copyrightCollection, mapMinZoom, mapMaxZoom, 1);	//调用父类的方法
			
			//创建一个自己的版权说明
			copyrightCollection.addCopyright(
				new Copyright("MyCopyright",
					new LatLngBounds(new LatLng(-180, -90),
						new LatLng(180, 90)),  0,
					"这是我自己的版本说明"));
		}
		
		//覆盖加载地图数据的方法，这个很重要，地图数据从这里读取
		override public function loadTile(tilePos:Point, zoom:Number):DisplayObject {
			var testLoader:Loader = new Loader();
			var ymax:int = 1 << zoom;
			var y:int = ymax - tilePos.y - 1;
			
			var urlRequest:URLRequest;
			
			if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
				urlRequest =  new URLRequest("assets/tiles/nomap.png");	//没有地图时显示的内容
			}else{
				urlRequest = new URLRequest(
					"assets/tiles/" + zoom+"/"+ tilePos.x + "/" + y +".png");	//地图存放的路径，现在是本地的，也可以是服务器的地址。
			}

			testLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
			testLoader.load(urlRequest);        
			return testLoader;
		}
		
		//出错处理
		private function ioErrorHandler(event:IOErrorEvent):void {
			trace("ioErrorHandler: " + event);
		}
	}
}

在FGMapDemo.mxml文件使用我们刚才写的类：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
minWidth="600" minHeight="400"
xmlns:maps="com.fgmap.maps.*">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>

<maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>

<fx:Script>
<![CDATA[
import com.fgmap.maps.*;
import com.fgmap.maps.MapMouseEvent;
import com.fgmap.maps.controls.MapTypeControl;
import com.fgmap.maps.controls.NavigationControl;
import com.fgmap.maps.controls.OverviewMapControl;
import com.fgmap.maps.controls.ScaleControl;
import com.fgmap.maps.interfaces.IMapType;
import com.fgmap.maps.overlays.*;
import com.examples.MyTileLayer;

private var marker:Marker;

private var centreLatlng:LatLng = new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。

//地图加载完成后执行的方法
protected function onMapreadyHandler(event:MapEvent):void
{
map.enableContinuousZoom(); //启用连续平滑缩放。
map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
map.addControl(new NavigationControl());//供用户更改地图的各项导航参数，包括缩放级别、中心位置和空间方位角。
map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。

map.setCenter(centreLatlng,11); //设置地图的中心点。

marker = new Marker(centreLatlng); //建立一个标注。
map.addOverlay(marker); //在地图上显示此标注。

var normalMapType:IMapType = MapType.NORMAL_MAP_TYPE; //定义一个地图类型
var tileLayers:Array = new Array();
tileLayers.push(new MyTileLayer(normalMapType.getTileSize())); //地图类型
var MyMapType:IMapType = new MapType(tileLayers,normalMapType.getProjection(),"我的地图");//创建自己的地图类型
map.addMapType(MyMapType); //增加到地图上
map.setMapType(MyMapType); //设置自己的地图可见
}

]]>
</fx:Script>
</s:Application>

完成后，我们把程序运行起来，结果是：

这样就加上我们自己的地图了。

到这一步，我们的程序是写完了，不过我们还需要一些准备：

地图图片，我是放在"assets/tiles"目录下，这些数据是用我的切图工具生成出来的。同学们可以换成其它的数据试试，记得要改获取图片地址的方法哦！

别外，我们的FGMap库文件也换了一下，现在升级到1.01了，而且是放到lib目录下。

完整的示例程序请点击这里下载：https://files.cnblogs.com/liongis/FGMapDemo2.rar

如有问题请联系我：

Mail:liongis@163.com

QQ:1366940902