FGMap学习之-添加自己的地图数据
今天进入我们的正题,如何来加载自己的地图数据,这里使用的数据可以自己生成,也可以从网上下载,放到本机或自己的服务器上,只要修改对应的路径就行。
仍然在上次的例子上来增加:
在项目的src目录上点击右键,选择"新建ActionScript类",输入包名、类名及超类:

点击“Finish”后,会在程序中新建出一个MyTileLayer.as的文件,将下面的代码贴入文件中:
package com.examples
{
import com.fgmap.maps.Color;
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 com.fgmap.maps.interfaces.IMap;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.*;
import flash.geom.Point;
import flash.net.URLRequest;
public class MyTileLayer extends TileLayerBase
{
private var mapMinZoom:int = 11; //最小显示等级
private var mapMaxZoom:int = 13; //最大显示等级
public function MyTileLayer(tileSize:Number){
var copyrightCollection:CopyrightCollection = new CopyrightCollection();
super(copyrightCollection, mapMinZoom, mapMaxZoom, 1); //调用父类的方法
//创建一个自己的版权说明
copyrightCollection.addCopyright(
new Copyright("MyCopyright",
new LatLngBounds(new LatLng(-180, -90),
new LatLng(180, 90)), 0,
"这是我自己的版本说明"));
}
//覆盖加载地图数据的方法,这个很重要,地图数据从这里读取
override public function loadTile(tilePos:Point, zoom:Number):DisplayObject {
var testLoader:Loader = new Loader();
var ymax:int = 1 << zoom;
var y:int = ymax - tilePos.y - 1;
var urlRequest:URLRequest;
if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
urlRequest = new URLRequest("assets/tiles/nomap.png"); //没有地图时显示的内容
}else{
urlRequest = new URLRequest(
"assets/tiles/" + zoom+"/"+ tilePos.x + "/" + y +".png"); //地图存放的路径,现在是本地的,也可以是服务器的地址。
}
testLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
testLoader.load(urlRequest);
return testLoader;
}
//出错处理
private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
}
}
在FGMapDemo.mxml文件使用我们刚才写的类:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400"
xmlns:maps="com.fgmap.maps.*">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>
<fx:Script>
<![CDATA[
import com.fgmap.maps.*;
import com.fgmap.maps.MapMouseEvent;
import com.fgmap.maps.controls.MapTypeControl;
import com.fgmap.maps.controls.NavigationControl;
import com.fgmap.maps.controls.OverviewMapControl;
import com.fgmap.maps.controls.ScaleControl;
import com.fgmap.maps.interfaces.IMapType;
import com.fgmap.maps.overlays.*;
import com.examples.MyTileLayer;
private var marker:Marker;
private var centreLatlng:LatLng = new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。
//地图加载完成后执行的方法
protected function onMapreadyHandler(event:MapEvent):void
{
map.enableContinuousZoom(); //启用连续平滑缩放。
map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
map.addControl(new NavigationControl());//供用户更改地图的各项导航参数,包括缩放级别、中心位置和空间方位角。
map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
map.setCenter(centreLatlng,11); //设置地图的中心点。
marker = new Marker(centreLatlng); //建立一个标注。
map.addOverlay(marker); //在地图上显示此标注。
var normalMapType:IMapType = MapType.NORMAL_MAP_TYPE; //定义一个地图类型
var tileLayers:Array = new Array();
tileLayers.push(new MyTileLayer(normalMapType.getTileSize())); //地图类型
var MyMapType:IMapType = new MapType(tileLayers,normalMapType.getProjection(),"我的地图");//创建自己的地图类型
map.addMapType(MyMapType); //增加到地图上
map.setMapType(MyMapType); //设置自己的地图可见
}
]]>
</fx:Script>
</s:Application>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="600" minHeight="400"
xmlns:maps="com.fgmap.maps.*">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>
<fx:Script>
<![CDATA[
import com.fgmap.maps.*;
import com.fgmap.maps.MapMouseEvent;
import com.fgmap.maps.controls.MapTypeControl;
import com.fgmap.maps.controls.NavigationControl;
import com.fgmap.maps.controls.OverviewMapControl;
import com.fgmap.maps.controls.ScaleControl;
import com.fgmap.maps.interfaces.IMapType;
import com.fgmap.maps.overlays.*;
import com.examples.MyTileLayer;
private var marker:Marker;
private var centreLatlng:LatLng = new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。
//地图加载完成后执行的方法
protected function onMapreadyHandler(event:MapEvent):void
{
map.enableContinuousZoom(); //启用连续平滑缩放。
map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
map.addControl(new NavigationControl());//供用户更改地图的各项导航参数,包括缩放级别、中心位置和空间方位角。
map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
map.setCenter(centreLatlng,11); //设置地图的中心点。
marker = new Marker(centreLatlng); //建立一个标注。
map.addOverlay(marker); //在地图上显示此标注。
var normalMapType:IMapType = MapType.NORMAL_MAP_TYPE; //定义一个地图类型
var tileLayers:Array = new Array();
tileLayers.push(new MyTileLayer(normalMapType.getTileSize())); //地图类型
var MyMapType:IMapType = new MapType(tileLayers,normalMapType.getProjection(),"我的地图");//创建自己的地图类型
map.addMapType(MyMapType); //增加到地图上
map.setMapType(MyMapType); //设置自己的地图可见
}
]]>
</fx:Script>
</s:Application>
完成后,我们把程序运行起来,结果是:

这样就加上我们自己的地图了。
到这一步,我们的程序是写完了,不过我们还需要一些准备:
地图图片,我是放在"assets/tiles"目录下,这些数据是用我的切图工具生成出来的。同学们可以换成其它的数据试试,记得要改获取图片地址的方法哦!
别外,我们的FGMap库文件也换了一下,现在升级到1.01了,而且是放到lib目录下。
完整的示例程序请点击这里下载:http://files.cnblogs.com/liongis/FGMapDemo2.rar
如有问题请联系我:
Mail:liongis@163.com
QQ:1366940902
推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架