http://blog.ityao.com/archives/287
接着上期的,这里用两个实例,给大家介绍一下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"
,
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进行浏览,然后打开”工具”->”页面信息”,如下图所示:
然后就发挥你的小宇宙,去猜猜那串图瓦链接怎么来的,呵呵!
我把live的猜出来了,欢迎大家补充别的链接。