FGMap学习之–加载51地图

现在的位置: 首页 > 综合 > 正文

FGMap学习之–加载51地图

2013年04月18日 ⁄ 综合 ⁄ 共 2580字 ⁄ 字号小中大 ⁄ 评论关闭

继续我们之前的加载各类地图数据之旅，今天我们要加载的地图数据是51地图。51地图的数据和其它的编码方式很不一样，中间有特定的一个算法，根据坐标值可以转换为对应的唯一ID值，当然，这个算法是在前辈的基础上得来的，具体为什么这么写，我也没有看明白。只是通过这种方式，可以把51的地图加载进来，代码如下：

package com.fgmap.maps.examples
{
	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 flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.events.IOErrorEvent;
	import flash.geom.Point;
	import flash.net.URLRequest;
	
	public class LingtuTileLayer extends TileLayerBase
	{
		private var mapMinZoom:int = 1;	//最小显示等级
		private var mapMaxZoom:int = 18;//最大显示等级
		
		private const imgURL:String = "http://cache2.51ditu.com/";

		public function LingtuTileLayer(tileSize:Number)
		{
			var copyrightCollection:CopyrightCollection = new CopyrightCollection();
			
			super(copyrightCollection, mapMinZoom, mapMaxZoom, 1);	//调用父类的方法
			
			//创建一个自己的版权说明
			copyrightCollection.addCopyright(
				new Copyright("LingtuData",
					new LatLngBounds(new LatLng(-180, -90),
						new LatLng(180, 90)),  0,
					"51地图数据"));
		}
		
		//覆盖加载地图数据的方法，这个很重要，地图数据从这里读取
		override public function loadTile(tilePos:Point, zoom:Number):DisplayObject {
			var testLoader:Loader = new Loader();
			
			var strURL:String = "";

			//51地图是从左下角开始为0,0的，所以这里的Y需要翻转一下
			tilePos.y = Math.pow(2,zoom - 1) - (tilePos.y - 1);
			strURL = getTileUrl(tilePos,zoom);
			
			//trace("x:" + tilePos.x + ",y:" + tilePos.y + ",url:" + strURL);
			
			var urlRequest:URLRequest;
			urlRequest =  new URLRequest(strURL);	//没有地图时显示的内容
			
			testLoader.load(urlRequest);
			testLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
			
			return testLoader;
		}
		
		private function getTileUrl(p:Point, zoom:int) : String
		{
			var bx:Number = p.x;
			var by:Number = p.y;
			
			var nGrade:Number = Math.ceil((zoom - 5) / 4);
			var nPreRow:int = 0;
			var nPreCol:int = 0;
			var nPreSize:int = 0;
			var path:String = "";
			for (var i:int = 0; i < nGrade; ++i) {
				var nSize:int = 1 << 4 * (nGrade - i);
				var nRow:int = parseInt((bx - nPreRow * nPreSize) / nSize + "");
				var nCol:int = parseInt((by - nPreCol * nPreSize) / nSize + "");
				path = path + ((nRow > 9 ? (nRow) : ("0" + nRow)) + "" + (nCol > 9 ? (nCol) : ("0" + nCol)) + "/");
				nPreRow = nRow;
				nPreCol = nCol;
				nPreSize = nSize;
			} 

			var id:Number = (((bx)&((1<<20)-1))+(((by)&((1<<20)-1))*Math.pow(2,20))+(((zoom)&((1<<8)-1))*Math.pow(2,40)));
			
			return imgURL + zoom + "/" + path + id + ".png";
		}
		
		private function getZoomFactor (zoom:int):Number {
			return Math.pow(2, (18 - zoom)) * 256
		}
		
		//出错处理
		private function ioErrorHandler(event:IOErrorEvent):void {
			trace("ioErrorHandler: " + event);
		}
	}
}

这里需要注意几个地方：

1.51地图的图片存放规则是从左下开始编号，即左下角为0，0开始，往右X逐渐增加，往上Y逐渐增加（Y方向正好与Google是相反的）。

2.地图在放大的时候，会出现向下的偏移。

3.目前只是地图图片的加载，经纬度换算并未实现，所以如果和Google Map相叠加的话，图片会不一致。

完成的效果图如下：