http://blog.ityao.com/archives/287
接着上期的,这里用两个实例,给大家介绍一下Flex自定义地图制作的流程,看看是怎么从TileLayBase扩展成自定义的地图
首先是live的地图
01.package com.ityao.map02.{03. import com.google.maps.CopyrightCollection;04. import com.google.maps.TileLayerBase;05. 06. import flash.display.DisplayObject;07. import flash.display.Loader;08. import flash.events.IEventDispatcher;09. import flash.events.IOErrorEvent;10. import flash.geom.Point;11. import flash.net.URLRequest;12. 13. public class LiveDituTileLayerBase extends TileLayerBase14. {15. private var serviceUrls:Array=["http://r0.tiles.ditu.live.com/tiles/r",19. private var serviceUrlSuffix:String = ".png?g=29";20. 21. public function LiveDituTileLayerBase()22. {23. super(new CopyrightCollection("http://cn.bing.com/ditu/"),0,19)24. }25. 26. private function getTileUrl(p:Point,zoom:int):String{ 27. 28. var c:Number=Math.pow(2,zoom);29. var d:Number=p.x;30. var e:Number=p.y;31. var f:String="";32. for(var g:int=0;g<zoom;g++){33. c=c/2;34. if(e<c){35. if(d<c){36. f+="0"37. }else{38. f+="1";39. d-=c40. }41. }else{42. if(d<c){43. f+="2";44. e-=c45. }else{46. f+="3";47. d-=c;48. e-=c49. }50. }51. }52. var h:int=(p.x+p.y)%serviceUrls.length;53. return serviceUrls[h]+f+serviceUrlSuffix;54. 55. } 56. 57. public override function loadTile(tilePos:Point, zoom:Number):DisplayObject{58. 59. var loader:Loader = new Loader();60. configureListeners(loader.contentLoaderInfo);61. var url:String = getTileUrl(tilePos,zoom);62. var tileUrl:URLRequest = new URLRequest(url);63. trace(tilePos.toString()+" z:"+zoom + " url:"+url);64. loader.load(tileUrl);65. return loader;66. 67. }68. 69. private function configureListeners(dispatcher:IEventDispatcher):void{70. dispatcher.addEventListener(IOErrorEvent.IO_ERROR,_secondaryLoad);71. } 72. 73. private function _secondaryLoad(event:IOErrorEvent):void{74. //image fail to load handler75. }76. }77.}然后是mapABC的地图
01.package com.ityao.map02.{03. import com.google.maps.CopyrightCollection;04. import com.google.maps.TileLayerBase;05. 06. import flash.display.DisplayObject;07. import flash.display.Loader;08. import flash.events.IEventDispatcher;09. import flash.events.IOErrorEvent;10. import flash.geom.Point;11. import flash.net.URLRequest;12. 13. public class MapABCDituTileLayerBase extends TileLayerBase{14. 15. public function MapABCDituTileLayerBase(){16. super(new CopyrightCollection("http://www.mapabc.com"),0,17)17. }18. 19. private function getTileUrl(p:Point,zoom:int):String{20. var url:String = "http://emap" + ((p.x + p.y) % 4) + ".mapabc.com/mapabc/maptile?v=";21. url += "w2.99" ;22. url += "&x=" + p.x + "&y=" + p.y + "&zoom=" + (17-zoom);23. return url;24. } 25. 26. public override function loadTile(tilePos:Point, zoom:Number):DisplayObject{27. 28. var loader:Loader = new Loader();29. configureListeners(loader.contentLoaderInfo);30. var url:String = getTileUrl(tilePos,zoom);31. var tileUrl:URLRequest = new URLRequest(url);32. trace(tilePos.toString()+" z:"+zoom + " url:"+url);33. loader.load(tileUrl);34. return loader;35. 36. }37. 38. private function configureListeners(dispatcher:IEventDispatcher):void{39. dispatcher.addEventListener(IOErrorEvent.IO_ERROR,_secondaryLoad);40. } 41. 42. private function _secondaryLoad(event:IOErrorEvent):void{43. //image fail to load handler44. }45. }46.}在上面的例子可以看见,其实只要重载loadTile方法就可以了,是不是非常简单?
loadTile的第一个参数是图块坐标,第二个参数是zoom的图层深度
这里有篇很好的文章和实例演示告诉你这些参数是怎么来的,
http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/
使用这两个参数,我们要针对不用的图瓦(live或mapABC)去构造图瓦的链接,从而用一块块图瓦拼接出完整的地图。
图瓦的链接是怎么获得的呢?
呵呵,可以是根据不同地图的文档说明(不过通常都很少),通常我在看一个地图的时候,用firefox进行浏览,然后打开”工具”->”页面信息”,如下图所示:

然后就发挥你的小宇宙,去猜猜那串图瓦链接怎么来的,呵呵!
我把live的猜出来了,欢迎大家补充别的链接。
Mikel