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

baacloud免费翻墙vpn注册使用

Silver 撰写  

现 在地图应用已经成为网络应用的一个大类了,各个大的网站几乎都有自己的地图产品。最出名的莫过于国外的Google Map和国内的都市圈地图,前面Daniel Yang介绍了都市圈的Flex源代码,小弟也来一个介绍Flex构建地图的系列,希望能够让大家分享到地图开发的乐趣。

不过自己毕竟不是GIS科班出身,也没从事过GIS或者地图的真正商业开发,研究地图应用开发,纯属兴趣,所以不足之处,敬请斧正:)

构建Flex地图应用,首选Google的地图API来实现,有以下原因:

  1. 支持自定义扩展地图类型
  2. 有丰富的图形标注工具
  3. 有多种数据接口
  4. 详细的文档支持

Google map API的这些特点,可以使我们快速地开发出各式各样的地图web应用,由于本帖不是替google map打广告,就不一一介绍这些特点的详细情况了,本帖更关注于第一个特点,利用Google map api来构建属于自己的地图。

或者大家会问:构建自己的地图?可以是什么样子的呢?
小弟天马行空地替大家想象了一下,我初步想大家可以构建这样的一些应用:

  • 在专业的地图服务器里写script导出图瓦(动态或静态),然后制作自己的地图应用,最好的例子就是google地图本身
  • 利用网络的地图图瓦资源,构造地图应用,如利用API来显示e都市的三维地图,或者如后面演示的显示别的厂商如google的对手bingo的地图,mapABC的地图等
  • 通过修改现成的地图图瓦,来创造自己的地图。呵呵,站在巨人的肩膀上啊,例如你可以抓取google的图瓦,把上面的藏南地区全改回中文,然后发布出去
  • 发布大型的图画作品,例如你是卖画或者什么别的艺术品,或者你要做游戏地图,可以把照片割成图瓦,挂到网上去,让大家可以在不同分辨层次下欣赏作品
  • 协同进行艺术创作,把地图想象成大图画,大家可以在一个图画上创作,通过Map API可以进行宏观创作或者细节创作
  • … 更多更多好点子,欢迎在评论里面留言

首先贴一个swf,给大家看看用Google Map API来显示Live地图和MapABC地图的效果。


实现这个效果的步骤如下:

  1. 使用Flex的google map api,首先要去这里 下载
  2. 注册一个api使用的key,在这个页面进行注册
  3. 创建flex项目,项目目录结构如下图所示:
    mapsampleproject
    前面下载的SDK里面的map_flex_1_16.swc(下载时间不同,可能版本号不一致)需要放在项目的lib目录里面去。
  4. 创建mapsample.mxml主程序,代码如下:
    01.<?xml version="1.0" encoding="utf-8"?>
    02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    03.    <maps:Map xmlns:maps="com.google.maps.*" language="zh-CN" id="map"
    04.        mapevent_mapready="onMapReady(event)"
    05.        width="100%" height="100%" key="{mapKey}"/>
    06.    <mx:Script>
    07.        <![CDATA[
    08.            import com.ityao.map.MapABCDituTileLayerBase;
    09.            import com.ityao.map.GoogleDituTileLayerBase;
    10.            import com.ityao.map.LiveDituTileLayerBase;        
    11. 
    12.            import com.google.maps.overlays.TileLayerOverlay;
    13.            import com.google.maps.controls.MapTypeControl;
    14.            import com.google.maps.controls.PositionControl;
    15.            import com.google.maps.controls.ZoomControl;
    16.            import com.google.maps.LatLng;
    17.            import com.google.maps.Map;
    18.            import com.google.maps.MapEvent;
    19.            import com.google.maps.MapType;   
    20. 
    21.            //key for http://blog.ityao.com/
    22.            private static const mapKey:String = "ABQIAAAAjg2LNPeLd2SY_LMC4kTfyhREhvxbmPPYdzuafsMTRfCiNgtm-xT_QN9uPU6M7JTAKA4l_ycXr_8HOg";
    23.            private function onMapReady(event:Event):void {                  
    24. 
    25.                map.addControl(new ZoomControl());
    26.                map.addControl(new PositionControl());
    27.                map.addControl(new MapTypeControl());
    28.                map.removeMapType(MapType.PHYSICAL_MAP_TYPE);
    29.                map.removeMapType(MapType.SATELLITE_MAP_TYPE);
    30.                map.removeMapType(MapType.HYBRID_MAP_TYPE);
    31. 
    32.                //Live地图
    33.                var liveTileBase:LiveDituTileLayerBase = new LiveDituTileLayerBase();
    34.                var liveTileLayers:Array = new Array();
    35.                liveTileLayers.push(liveTileBase);
    36.                var liveMapType:MapType = new MapType(liveTileLayers,map.MERCATOR_PROJECTION,"Live地图");
    37.                liveTileBase.setMapType(liveMapType);
    38.                map.addMapType(liveMapType);
    39. 
    40.                //mapABC地图
    41.                var mapABCDituTileLayerBase:MapABCDituTileLayerBase = new MapABCDituTileLayerBase();
    42.                var mapABCDituTileLayers:Array = new Array();
    43.                mapABCDituTileLayers.push(mapABCDituTileLayerBase);
    44.                var mapABCDituMapType:MapType = new MapType(mapABCDituTileLayers,map.MERCATOR_PROJECTION,"mapABC地图");
    45.                mapABCDituTileLayerBase.setMapType(mapABCDituMapType);
    46.                map.addMapType(mapABCDituMapType);
    47.                //设置缺省的地图中心和地图类型
    48.                map.setCenter(new LatLng(23.09656,113.19219), 10);
    49.            }
    50.        ]]>
    51.    </mx:Script>
    52.</mx:Application>

    注意需要在程序中修改mapKey变量成为你前面注册的google map api key。

  5. 在主程序里面,我们创建了两种自定义的地图类型,并且添加了这两种类型进google地图中进行显示

定制自定义地图,如果地图的投影方法和google map一致的话,那只要继承TileLayerBase并重载里面的loadTile(加载图瓦)方法就可以了,下一篇将用live地图和mapABC地图为大家做介绍。

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

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

支付宝扫一扫打赏

微信扫一扫打赏