[Flex]用Flex构建地图应用 — 利用Google Map API制作自己的地图(2)

Silver 撰写  

接着上期的,这里用两个实例,给大家介绍一下Flex自定义地图制作的流程,看看是怎么从TileLayBase扩展成自定义的地图

首先是live的地图

01.package com.ityao.map
02.{
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 TileLayerBase
14.    {
15.        private var serviceUrls:Array=["http://r0.tiles.ditu.live.com/tiles/r",
16.                                       "http://r1.tiles.ditu.live.com/tiles/r",
17.                                       "http://r2.tiles.ditu.live.com/tiles/r",
18.                                       "http://r3.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-=c
40.                    }
41.                }else{
42.                    if(d<c){
43.                        f+="2";
44.                        e-=c
45.                    }else{
46.                        f+="3";
47.                        d-=c;
48.                        e-=c
49.                    }
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 handler
75.        }
76.    }
77.}

然后是mapABC的地图

01.package com.ityao.map
02.{
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 handler
44.        }
45.    }
46.}

在上面的例子可以看见,其实只要重载loadTile方法就可以了,是不是非常简单?

loadTile的第一个参数是图块坐标,第二个参数是zoom的图层深度
这里有篇很好的文章和实例演示告诉你这些参数是怎么来的,
http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

使用这两个参数,我们要针对不用的图瓦(live或mapABC)去构造图瓦的链接,从而用一块块图瓦拼接出完整的地图。

图瓦的链接是怎么获得的呢?
呵呵,可以是根据不同地图的文档说明(不过通常都很少),通常我在看一个地图的时候,用firefox进行浏览,然后打开”工具”->”页面信息”,如下图所示:
bingditu

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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏