FGMap学习之--添加自己的地图数据

自定义地图加载

最新推荐文章于 2025-09-11 16:40:35 发布

转载最新推荐文章于 2025-09-11 16:40:35 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liongis/archive/2011/03/16/1985551.html

文章标签：

#大数据

今天进入我们的正题，如何来加载自己的地图数据，这里使用的数据可以自己生成，也可以从网上下载，放到本机或自己的服务器上，只要修改对应的路径就行。

仍然在上次的例子上来增加：

在项目的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 >

完成后，我们把程序运行起来，结果是：