博客园_liongis

离线地图制作工具

2012-04-27T13:40:00Z

最近有很多朋友都在问我地图下载的工具，其实这样的工具网上已经很多了，搜一下就能找得到，基本原理都是一样：

1.选择一定的地图范围。

2.选择需要下载的地图源。

3.选择需要下载的等级。

4.开始下载。

只是每一个软件都会有自己的特点，为了满足不同的需求而以。其实地图下载下来后，最主要的目的还是要应用起来，这就需要结合离线地图的平台.

Google Map API V3.8.6 的版本我在之前就发布过，有需要的请自己下载。今天更详细的跟大家讲一下这两个步骤如何结合起来。

1.地图的下载

新制作了一个地图下载的工具，界面如下，操作其实已经很简单了，看图就能明白：

目前地图下载工具可以支持Mapabc、谷歌矢量图、谷歌影像图三种图进行下载，如果需要更多的图源，可以跟我联系。

下载完成后，在应用程序的目录下会生成一个maptile目录，这个目录是存放刚才下载的地图数据。

2.加载本地数据

地图数据我们已经下载下来了，我们使用离线版的Google Map API对图片进行加载：

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
6 <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
7 <title>Google Maps JavaScript API v3 Example: Map Simple</title>
8 
9 <script type="text/javascript" src="mapapi3.8.6.js"></script>
10 <script type="text/javascript">
11
12 function LocalMapType() {}
13
14 LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
15 LocalMapType.prototype.maxZoom = 19; //地图显示最大级别
16 LocalMapType.prototype.minZoom = 1; //地图显示最小级别
17 LocalMapType.prototype.name = "本地数据";
18 LocalMapType.prototype.alt = "显示本地地图数据";
19 LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
20 var img = ownerDocument.createElement("img");
21 img.style.width = this.tileSize.width + "px";
22 img.style.height = this.tileSize.height + "px";
23 //地图存放路径
24 //谷歌矢量图 maptile/googlemaps/roadmap
25 //谷歌影像图 maptile/googlemaps/roadmap
26 //MapABC地图 maptile/mapabc/
27 var strURL = "maptile/mapabc/";
28 strURL += zoom + "/" + coord.x + "/" + coord.y + ".PNG";
29
30 img.src = strURL;
31 return img;
32 };
33
34 var localMapType = new LocalMapType();
35
36 function initialize() {
37 var myLatlng = new google.maps.LatLng(39.900827854566344, 116.38339402421877);
38 var myOptions = {
39 center: myLatlng,
40 zoom: 4,
41 streetViewControl: false,
42 mapTypeControlOptions: {
43 mapTypeIds: [
44 google.maps.MapTypeId.ROADMAP,
45 google.maps.MapTypeId.HYBRID,
46 google.maps.MapTypeId.SATELLITE,
47 google.maps.MapTypeId.TERRAIN,
48 'locaMap' ] //定义地图类型
49 }
50 };
51 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
52
53 map.mapTypes.set('locaMap', localMapType); //绑定本地地图类型
54 map.setMapTypeId('locaMap'); //指定显示本地地图
55
56 //var markerOptions = new google.maps.MarkerOptions({draggable:true});
57 var marker = new google.maps.Marker({
58 position: myLatlng,
59 map: map,
60 draggable:true,
61 title:"Hello World!"
62 });
63
64 var infowindow = new google.maps.InfoWindow(
65 { content:"latlng:" + marker.getPosition().toString(),
66 size: new google.maps.Size(50,50)
67 });
68
69 google.maps.event.addListener(marker, 'click', function() {
70 infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6));
71 infowindow.open(map,marker);
72 });
73 }
74 </script>
75 </head>
76 <body onload="initialize()">
77 <div id="map_canvas"></div>
78 </body>
79
80 </html>

示例中是加载本地Mapabc的地图，如果需要其它的地图，只需要把路径改一下即可，如果需要布置到服务器的话，改成服务器地址就行。

地图下载工具和离线版本我都打成一个包，并附带了一部分下载的示例数据，解压后直接打开map-simple.html文件，你应该可以看到本地的地图数据，祝你成功！

地图下载目前只是一个测试版，后续可能还会修改，如果你有什么好的想法，也请告诉我。

本程序只用于学习用。

离线地图制作工具下载

本文链接

[转]flex自定义组件分类在组件面板里放到不同的文件夹下

2012-04-26T14:00:00Z

http://www.ccflash.com/Flex__2011_03__4269.html

前几天有人问到，怎么给flex自定义组件分组呢？自己写的组件全部被放在组件面板的自定义文件夹下了。

这几天我也一直在想这个问题，最后终于找到办法了！

先看一下效果图：

这里我已经把我的自定义组件分别放到了两个文件夹里面。是不是大家想要的效果呢...

步骤一：
新建一个文件我把它命名为design.xml

<?xml version="1.0"?>
<design version="2">
      <categories>
            <category id="Miao1" label="Miao容器"/>
            <category id="Miao2" label="Miao控件"/>
      </categories>

      <components>
            <component name="com.miao.container.EWindow" category="Miao1"/>
            <component name="com.miao.control.ArrowToolTip" category="Miao2"/>
            <component name="com.miao.control.TimeInput" category="Miao2"/>
            <component name="com.miao.control.TimeStepper" category="Miao2"/>
      </components>
</design>

<category id="Miao1" label="Miao容器"/>表示的是自定义组件的文件夹分类，label就是在组件面板里的文件夹显示名称，
id是引用，在 <component name="com.miao.container.EWindow" category="Miao1"/>里要用到的。
component 表示的是要显示的组件。category对应上面的分类，name就是组件的路径了。
假如你在库里写了许多组件，只想对外显示几个，就可以这样设置了。

步骤二：
把这个design.xml文件放到你的库项目的根目录下(src文件夹里，放其它地方行不行我没试过)。

步骤三：
在库项目属性面板里找到资源选项卡，把刚才的xml文件勾选上。

做完这三部已经大功告成了。
接下来就是编译下库项目，然后在引用了这个库项目的项目里，转到设计视图，看看组件面板里，你的组件是不是已经分类了？
如果没有效果的话，就把库项目和引用库项目的项目清理下重新编译就可以了。

其实还可以更改命名空间哦！
就像这样子

具体怎么改命名空间或者有什么不明白的可以参考这里
http://help.adobe.com/en_US/Flex/4.0/flashbuilder_extensibility/DesignViewExtKitReadme.htm

本文链接

GoogleMapAPIV3.8.6离线包下载

2012-04-12T08:31:00Z

之前发布的GoogleMapAPIV3离线包有朋友反映缺少文件，运行的时候，有些功能不能会出错，所以重新制作了一个离线包。这个离线包是最新的3.8版本，更新内容请查看http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

3.8 February 15, 2012

Fixed:

Regression: Scaled markers rendered incorrectly with invalid "size" parameter ( Issue 3908 )
Map stuck in editing mode when setEditable(false) called while user is dragging control point ( Issue 3842 )

Noticeable changes:

Cross-fade between Street View panoramas.

GoogleMapAPIV3.8.6离线包的下载地址是：http://files.cnblogs.com/liongis/GoogleMapAPI3.8.6.zip

这个只是API的离线版本，不包含地图数据，需要的朋友可自行下载，在程序中加载进来就可以，可以参见我写的加载本地数据的示例。

其实每次制作离线版都是一件很麻烦的事情，需要修改很多的内容。

如果有一个工具可以直接下载并修改就很好了，现在已经完成GoogleMapAPI离线包制作工具的雏形，有以下功能：

1.获取最新的版本信息。

2.制作最新版本的离线包。

3.可制作指定版本的离线包。

4.支持制作不同语言的离线包。

还有更好的想法，可以一起讨论。

本文链接

FGMap加载天地图地图数据

2012-03-26T02:11:00Z

FGMap默认支持Web墨卡托投影后的瓦片地图数据，也就是现在我们看到的Google Map、Bing Map、百度地图这样的瓦片数据，只要解析所对应的请求地址路径就可以，这个方法在之前的文章中介绍过。今天我们加载一个“经纬度直投”的地图数据类型－－天地图数据，因为投影的方式不一样，所以加载的方式可能会不一样些。“经纬度等间隔直投”和“Web墨卡托”之间的区别大家可以参考一下《天地图-地图投影技术剖析与思考》。

需要加载不同投影下的地图数据，我们需要自己来定义一个投影计算的方式，可以继承IProjection类，IProjection中有两个关键的方法:

fromPixelToLatLng:将像素点转换成对应的经纬度坐标。

fromLatLngToPixel:将经纬度坐标转换成对应的像素。

因为天地图使用的是“经纬度直投”的方式进行投影，所以换算方式比较简单：

1 public function fromPixelToLatLng(pixel:Point, zoom:Number, nowrap:Boolean = false) : LatLng
2 {
3 var x:Number = 0;
4 var y:Number = 0;
5
6 x = pixel.x / (Math.pow(2,zoom) * titeSize) * 360 - 180;
7 y = 90 - pixel.y / (Math.pow(2,zoom-1) * titeSize) * 180;
8
9 var latlng:LatLng = new LatLng(y, x, nowrap);
10 return latlng;
11 }
12
13 public function fromLatLngToPixel(latLng:LatLng, zoom:Number) : Point
14 {
15 var point:Point = new Point(0,0);
16 var x:Number = 0;
17 var y:Number = 0;
18
19 latLng = new LatLng(latLng.lat(),latLng.lng());
20
21 point.x = (latLng.lng() + 180) / 360 * (Math.pow(2,zoom) * titeSize);
22 point.y = (90 - latLng.lat()) / 180 * (Math.pow(2,zoom-1) * titeSize);
23
24 return point;
25 }

大家也可以参考一下这篇文章：http://lt.cjdby.net/thread-1003128-1-1.html

有了这个方法后，我们可以自己定义一个投影，具体代码如下：

1 package com.fgmap.expand.core
2 {
3 import com.fgmap.expand.*;
4 import com.fgmap.maps.LatLng;
5 import com.fgmap.maps.interfaces.IProjection;
6
7 import flash.geom.Point;
8
9 public class TiandituProjection implements IProjection
10 {
11 private var _wrapper:Object;
12 private var pixelRange:Array;
13 private var pixelsPerLonDegree:Array;
14 private var pixelOrigo:Array;
15 private var pixelsPerLonRadian:Array;
16 public static const MERCATOR_ZOOM_LEVEL_ZERO_RANGE:Number = 256;
17 private var titeSize:int = 256;
18
19 public function TiandituProjection(zoom:int)
20 {
21 var mapSize:Number = MERCATOR_ZOOM_LEVEL_ZERO_RANGE;
22 var i:int = 0;
23 var mapOrigo:Number = 0;
24 pixelsPerLonDegree = [];
25 pixelsPerLonRadian = [];
26 pixelOrigo = [];
27 pixelRange = [];
28 while (i < zoom)
29 {
30 mapOrigo = mapSize / 2;
31 pixelsPerLonDegree.push(mapSize / 360);
32 pixelsPerLonRadian.push(mapSize / (2 * Math.PI));
33 pixelOrigo.push(new Point(mapOrigo, mapOrigo));
34 pixelRange.push(mapSize);
35 mapSize = mapSize * 2;
36 i++;
37 }
38 }
39
40 public function fromPixelToLatLng(pixel:Point, zoom:Number, nowrap:Boolean = false) : LatLng
41 {
42 var x:Number = 0;
43 var y:Number = 0;
44
45 x = pixel.x / (Math.pow(2,zoom) * titeSize) * 360 - 180;
46 y = 90 - pixel.y / (Math.pow(2,zoom-1) * titeSize) * 180;
47
48 var latlng:LatLng = new LatLng(y, x, nowrap);
49 return latlng;
50 }
51
52 public function fromLatLngToPixel(latLng:LatLng, zoom:Number) : Point
53 {
54 var point:Point = new Point(0,0);
55 var x:Number = 0;
56 var y:Number = 0;
57
58 latLng = new LatLng(latLng.lat(),latLng.lng());
59
60 point.x = (latLng.lng() + 180) / 360 * (Math.pow(2,zoom) * titeSize);
61 point.y = (90 - latLng.lat()) / 180 * (Math.pow(2,zoom-1) * titeSize);
62
63 return point;
64 }
65
66 public function get interfaceChain() : Array
67 {
68 return ["IProjection"];
69 }
70
71 public function get wrapper() : Object
72 {
73 return this._wrapper;
74 }
75
76 public function tileCheckRange(param1:Point, param2:Number, param3:Number) : Boolean
77 {
78 var x:Number = 0;
79 var y:Number = 0;
80 x = pixelRange[param2];
81 if (param1.y < 0 || param1.y * param3 >= x)
82 {
83 return false;
84 }
85 if (param1.x < 0 || param1.x * param3 >= x)
86 {
87 y = Math.floor(x / param3);
88 param1.x = param1.x % y;
89 if (param1.x < 0)
90 {
91 param1.x = param1.x + y;
92 }
93 }
94 return true;
95 }
96
97 public function getWrapWidth(param1:Number) : Number
98 {
99 return pixelRange[param1];
100 }
101
102 public function set wrapper(param1:Object) : void
103 {
104 this._wrapper = param1;
105 return;
106 }
107
108 }
109 }

当然，这里会做一些处理，因为天地图的图数据分为“线划地图”和“影像地图”两种，而每一类中，又分为底图和标注，所以我们需要在程序中加以区分，天地图资源的分类可以参见：http://www.tianditu.com/guide/resource.jsp

有了这些信息后，，我们在自定义一个地图类型对数据进行处理：

1 package com.fgmap.expand.core
2 {
3 import com.fgmap.maps.Copyright;
4 import com.fgmap.maps.CopyrightCollection;
5 import com.fgmap.maps.LatLng;
6 import com.fgmap.maps.LatLngBounds;
7 import com.fgmap.maps.TileLayerBase;
8 import com.fgmap.maps.interfaces.ICopyrightCollection;
9
10 import flash.display.DisplayObject;
11 import flash.display.Loader;
12 import flash.events.IOErrorEvent;
13 import flash.geom.Point;
14 import flash.net.URLRequest;
15
16 public class TiandituTileLayer extends TileLayerBase
17 {
18 public static const EMAP:String = "EMap";//矢量地图
19 public static const ANNO:String = "Anno";//矢量标注
20 public static const IMGANNO:String = "ImgAnno";//影像标注
21 public static const IMG:String = "Img";//影像地图
22
23 private var mapMinZoom:int = 1; //最小显示等级
24 private var mapMaxZoom:int = 18;//最大显示等级
25 private var _mapType:String = EMAP;
26
27 public function TiandituTileLayer(tileSize:Number,mapMinZoom:Number,mapMaxZoom:Number,alpha:Number)
28 {
29 var copyrightCollection:CopyrightCollection = new CopyrightCollection();
30 //创建一个自己的版权说明
31 copyrightCollection.addCopyright(
32 new Copyright("TiandituData" + MapType,
33 new LatLngBounds(new LatLng(-180, -90),
34 new LatLng(180, 90)), 0,
35 "天地图数据",18));
36
37 super(copyrightCollection, mapMinZoom, mapMaxZoom, alpha); //调用父类的方法
38 }
39
40 public function get MapType():String
41 {
42 return _mapType;
43 }
44
45 public function set MapType(value:String):void
46 {
47 _mapType = value;
48 }
49
50 //覆盖加载地图数据的方法，这个很重要，地图数据从这里读取
51 override public function loadTile(tilePos:Point, zoom:Number):DisplayObject {
52 var testLoader:Loader = new Loader();
53
54 var z:Number = Math.pow(2,zoom - 1) - Math.pow(2,zoom - 2) - 1;
55 var x:Number = tilePos.x;
56 z = Math.pow(2,zoom - 2);
57 var y:Number = tilePos.y;
58
59 var layerName:String = "";
60 var strURL:String = "";
61 switch(_mapType){
62 case EMAP:
63 if (zoom <= 10) {
64 layerName = "A0512_EMap";
65 } else if (zoom == 11 || zoom == 12) {
66 layerName = "B0627_EMap1112";
67 } else if (zoom >= 13 && zoom <= 18) {
68 layerName = "siwei0608";
69 }
70 break;
71 case IMG:
72 if (zoom <= 10) {
73 layerName = "sbsm0210";
74 } else if (zoom == 11) {
75 layerName = "e11";
76 } else if (zoom == 12) {
77 layerName = "e12";
78 } else if (zoom == 13) {
79 layerName = "e13";
80 } else if (zoom == 14) {
81 layerName = "eastdawnall";
82 } else if (zoom >= 15 && zoom <= 18) {
83 layerName = "sbsm1518";
84 }
85 break;
86 case ANNO:
87 if (zoom <= 10) {
88 layerName = "AB0512_Anno";
89 } else {
90 strURL = "http://www.tianditu.com/js/GeoSurfJSAPI/img/blank.gif";
91 }
92 break;
93 case IMGANNO:
94 if (zoom <= 10) {
95 layerName = "A0610_ImgAnno";
96 } else if(zoom >= 11 && zoom <= 14){
97 layerName = "B0530_eImgAnno";
98 } else if(zoom > 14 && zoom < 19){
99 layerName = "siweiAnno68";
100 } else {
101 strURL = "http://www.tianditu.com/js/GeoSurfJSAPI/img/blank.gif";
102 }
103 break;
104 }
105
106 var num:int = Math.random()* 3;
107 if(strURL == ""){
108 strURL = encodeURI("http://tile" + num + ".tianditu.com/DataServer?" +
109 "T=" + layerName +
110 "&X=" + x +
111 "&Y=" + y +
112 "&L=" + zoom +
113 "&d=2009-10-22T20:25:15&cd=9999-12-31T00:00:00");
114 }
115 var urlRequest:URLRequest;
116 urlRequest = new URLRequest(strURL); //没有地图时显示的内容
117
118 testLoader.load(urlRequest);
119 testLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
120
121 return testLoader;
122 }
123
124 //出错处理
125 private function ioErrorHandler(event:IOErrorEvent):void {
126 trace("ioErrorHandler: " + event);
127 }
128 }
129 }

最后，我们将“线划地图”和“影像地图”加载到我们的地图中来：

1 <?xml version="1.0" encoding="utf-8"?>
2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:mx="library://ns.adobe.com/flex/mx"
5 xmlns:maps="com.fgmap.maps.*"
6 minWidth="955" minHeight="600">
7 <fx:Declarations>
8 
9 </fx:Declarations>
10 <s:Panel width="800" height="600" title="FGMap加载天地图数据">
11 <maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>
12 </s:Panel>
13
14 <fx:Script>
15 <![CDATA[
16 import com.fgmap.expand.core.*;
17 import com.fgmap.maps.*;
18 import com.fgmap.maps.MapMouseEvent;
19 import com.fgmap.maps.controls.MapTypeControl;
20 import com.fgmap.maps.controls.NavigationControl;
21 import com.fgmap.maps.controls.OverviewMapControl;
22 import com.fgmap.maps.controls.ScaleControl;
23 import com.fgmap.maps.interfaces.IMapType;
24 import com.fgmap.maps.overlays.*;
25
26 private var marker:Marker;
27
28 private var centreLatlng:LatLng = new LatLng(39.90509127978099,116.39769769279956818);//人民英雄纪念碑。
29
30 private var tiandituAnno:TiandituTileLayer = null;
31 private var TiandituAnno:TileLayerOverlay = null;
32 //地图加载完成后执行的方法
33 protected function onMapreadyHandler(event:MapEvent):void
34 {
35 map.enableContinuousZoom(); //启用连续平滑缩放。
36 map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
37 map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
38 map.addControl(new NavigationControl());//供用户更改地图的各项导航参数，包括缩放级别、中心位置和空间方位角。
39 map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
40
41 var normalMapType:IMapType = MapType.NORMAL_MAP_TYPE; //定义一个地图类型
42 var tileLayers:Array = new Array();
43
44 //天地图矢量
45
46 var tdtemaplTileLayer:TiandituTileLayer = new TiandituTileLayer(normalMapType.getTileSize(),1,18,1)
47 tdtemaplTileLayer.MapType = TiandituTileLayer.EMAP;
48 tileLayers.push(tdtemaplTileLayer); //地图类型
49 var TdtEmapMapType:IMapType = new MapType(tileLayers,new TiandituProjection(18),"矢量");//创建自己的地图类型
50 map.addMapType(TdtEmapMapType); //增加到地图上
51
52 tiandituAnno = new TiandituTileLayer(normalMapType.getTileSize(),1,10,1)
53 tiandituAnno.MapType = TiandituTileLayer.ANNO;
54 TiandituAnno = new TileLayerOverlay(tiandituAnno,256,new TiandituProjection(18));//创建自己的地图类型
55 //tileLayers.push(tiandituAnno);
56 //var TdtAnnoMapType:IMapType = new MapType(tileLayers,new TiandituProjection(18),"标注");//创建自己的地图类型
57 //map.addMapType(TdtAnnoMapType); //增加到地图上
58
59 //天地图影像
60 var tdtimgTileLayer:TiandituTileLayer = new TiandituTileLayer(normalMapType.getTileSize(),1,18,1)
61 tdtimgTileLayer.MapType = TiandituTileLayer.IMG;
62 tileLayers = new Array();
63 tileLayers.push(tdtimgTileLayer); //地图类型
64 var TdtImgMapType:IMapType = new MapType(tileLayers,new TiandituProjection(18),"影像");//创建自己的地图类型
65 map.addMapType(TdtImgMapType); //增加到地图上
66
67 map.setMapType(TdtEmapMapType); //设置自己的地图可见
68
69 map.addEventListener(MapEvent.MAPTYPE_CHANGED,onMapTypeChanged);
70
71 map.addOverlay(TiandituAnno); //加载标注覆盖层
72
73 //移除原来的地图类型
74 // for(var i:int=0;i < MapType.DEFAULT_MAP_TYPES.length;i++){
75 // map.removeMapType(MapType.DEFAULT_MAP_TYPES[i]);
76 // }
77
78 map.setCenter(centreLatlng,5); //设置地图的中心点。
79 marker = new Marker(centreLatlng); //建立一个标注。
80 //map.addOverlay(marker); //在地图上显示此标注。
81 BindMarker(marker);
82 }
83
84 private function onMapTypeChanged(e:MapEvent):void {
85 map.removeOverlay(TiandituAnno);
86 if(map.getCurrentMapType().getName() == "矢量"){
87 tiandituAnno = new TiandituTileLayer(256,1,10,1)
88 tiandituAnno.MapType = TiandituTileLayer.ANNO;
89 TiandituAnno = new TileLayerOverlay(tiandituAnno,256,new TiandituProjection(18));
90 map.addOverlay(TiandituAnno); //加载标注覆盖层
91 }else if(map.getCurrentMapType().getName() == "影像"){
92 tiandituAnno = new TiandituTileLayer(256,1,18,1)
93 tiandituAnno.MapType = TiandituTileLayer.IMGANNO;
94 TiandituAnno = new TileLayerOverlay(tiandituAnno,256,new TiandituProjection(18));
95 map.addOverlay(TiandituAnno); //加载标注覆盖层
96 }else{
97 map.removeOverlay(TiandituAnno); //移除标注覆盖层
98 }
99 }
100
101 private function BindMarker(marker:Marker):void {
102 var markerOptions:MarkerOptions = new MarkerOptions();
103 markerOptions.draggable = true;//设置标注可以拖动
104
105 //定义一个标注
106 //var marker:Marker = new Marker(map.getCenter(),markerOptions);
107
108 marker.setOptions(markerOptions);
109
110 var infoOptions:InfoWindowOptions = new InfoWindowOptions();
111 infoOptions.title = "我的坐标是";
112 infoOptions.content = marker.getLatLng().toString();
113 //标注拖动时关闭提示框
114 marker.addEventListener(MapMouseEvent.DRAG_START,function(e:Event):void{
115 marker.closeInfoWindow();
116 });
117 //拖动接受时显示提示框
118 marker.addEventListener(MapMouseEvent.DRAG_END,function(e:Event):void{
119 infoOptions.content = marker.getLatLng().toString();
120 marker.openInfoWindow(infoOptions);
121 });
122 //点击标注时显示提示框
123 marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
124 infoOptions.content = marker.getLatLng().toString();
125 marker.openInfoWindow(infoOptions);
126 });
127
128 map.addOverlay(marker);//在地图上显示这个标注
129 marker.openInfoWindow(infoOptions);//打开对话框
130 }
131 ]]>
132 </fx:Script>
133 </s:Application>

下面就是我们看到的运行结果，线划地图：

影像地图：

到此，我们就可以完全的加载上天地图的数据了。

但是，细心的童鞋可能会发现同一个经纬度，在不同的地图下，位置不对，这是因为各地图厂商都对自己的地图数据进行了偏移，是人为加上去的，所以会有偏差，如果真实使用中，这个需要进行偏移纠正的，这是另一个话题了。

这里只给出一个加载的方式，如果正式使用各地图商的数据，请与他们联系！

完整的项目代码从这里下载：http://files.cnblogs.com/liongis/FGMapTianditu.zip

本文链接

[源码]游戏控制者--让小朋友游戏学习两相顾

2012-01-27T15:36:00Z

2012年的新年已到来，在这里先给大家拜个晚年，祝大家在新的一年里，身体健康，工作顺利，阖家欢乐！

废话少说，为什么写这个程序呢？原因是这次春节的时候，几天都和一个朋友的小孩在一起玩，这个小孩才5岁，就迷恋上了《植物大战僵尸》，而且已经玩得很熟练。一天到晚就是挂念着玩游戏，玩具对他已经没有吸引力了，除了电脑上的游戏，手机游戏，IPAD游戏，虽然现在还不认识字，但只要看别人玩一次，他就会试着去玩。也感叹现在的小孩聪明，想想我们5岁的时候，还在玩泥巴，哪有这些东西玩。另一方面也很同情现在的小孩，都是独生子女，没有同伴一起玩，确实无聊，总不能让他一天到晚都发呆吧，但总玩游戏肯定不好，能不能可以游戏学习共兼顾呢，就是能让他们玩一会游戏，就停下来，学习一会？

需求就是从这里来的，想了想应该不复杂，主要完成以下几件事情：

1.程序运行后，开始计时，到设定的时间后，窗口最前显示，占住屏幕，隐藏后面的程序。

2.程序能够出一些简单的计算题（目前只有加减法），多少道题可以设定，都答对后程序隐藏，开始计时。

3.能对参数进行设置。

4.手动退出系统时，需要输入密码。

当然，这里面还有一些友好度的设计，如显示这道题的答案，跳过当前题，禁止按ALT+F4退出系统，系统托盘处理等等。

经过几个小时的奋战，终于有了一个结果，效果如下：

设置界面：“游戏时间”是多少分钟后弹出计算的界面，“出题数”是一共要计算多少道题，“出题最小数字和最大数字”是出题数据的范围，因为这个小朋友只有5岁，还只会1到10以内的加减法，所以这里是这么设置的，“退出密码”是设置退出系统时的密码，初始密码是：admin。

退出系统：

可以根据自己的情况进行设置。

如果有需要的朋友，请从这里下载：GameControlSetup.zip

源代码在这里：GameControl.zip

当然，程序也有很多不完善的地方，如现在只有加减法，程序可以通过任务管理器来结束掉任务等等，大家也可以继续扩展，写出更多实用的程序来，如果有什么好的想法，也可以告诉我，一起交流！

本文链接

基于ArcEngine写的GoogleMap地图切割程序

2012-01-16T14:34:00Z

离上写的《基于SuperMap Objects写的GoogleMap地图切割程序(三)》已经有大半年的时间了，这半年时间里，因为杂七杂八的事情比较多，所以也很少更新博客内容，今天是小年，特将最近基于ArcEngine写的Google Map地图切割程序与大家分享。这里我会从数据制作－切图－发布给大家进行介绍，并结合之前做的Google Map API3 离线版，告诉大家如何布署一个真正的离线WebGIS系统：

一.环境准备：

1.ArcEngine:因为我们使用是的是ArcEngine做为平台来开发，所以这个是必须的，版本为9.3。

2.ArcMap:目前切图工具中没有增加地图配置的功能，只能打开已经配置好的地图文件，所以这里还需要有ArcMap来进行地图数据的配置。

3.DotNet：程序是用C#开发的，所以得有这个环境。这个网上很多，大家搜一下就可以了，下载.NET Framework 2.0就可以。

之所以选择用ArcGIS来开发还有一个原因是国内的用户比较多，PJ相对也会多些，如何安装网上也有很多资料，大家可以搜一下。

二.地图配置：

安装完ArcMap和ArcEngine后，我们就可以对需要切割的地图数据进行配置。因为Google Map使用的是WEB WGS84的投影方式，所以我们在配置的时候也需要配置成和Google Map相同的坐标系统，坐标配置文件从这里下载：Google Mercator (world).prj。当然我们还需要准备一份切图用的数据，这里使用的是ESRI公司做的测试数据。

下载地址是：Esri公共地理框架电子地图模板_V1.31 for ArcGIS 9.3.1

对于地图配置和使用，这里已经讲得很清楚，这里也非常感谢ESRI能分享出这些资料来。

配置完的数据应该是下面这个样子：

三.地图切图：

配置好的地图数据我会随后和程序一起打包提供给大家下载。当然，大家也可以使用自己的矢量数据和影像数据，只要通过ArcMap配置好的地图，我们应该都可以用这个程序来进行地图切割。

1.现在我们来运行我们的切图工具，这是地图界面，程序默认加载所在的Data目录下的Map.mxd文件。

这个地图数据的坐标系我已经配置好的，可以用ArcMap直接打开这份地图数据可以看得到。

2.我们切换到切图界面：在这里，我们可以指定需要切图的范围，和需要输出的等级，我已经在程序中设定好了，如果是新数据，请自行设定。

3.切图参数我们都设置好后，点击“地图输出”，选择保存的路径后，系统开始切图工作。　

4.切图完成后，会提示使用的时间和切图的数量:

四.数据发布：

1.再将切完后的地图图片数据拷贝到Google Map API V3离线版所在的tilemap目录下，如果不想自己切图的，也可使用我切好的地图数据进行查看：

2.打开Google Map API V3离线版目录下的maptype-tms.html文件，就可以看到效果：

3.maptype-tms.html文件中默认是加载当前目录下tilemap目录中的图片数据，你也可以指定到其它的目录，当然，如果你把图片放在WEB服务器上，将这个地址改为服务器的地址就可以了，这样就完全可以部署一个属于自己的Google Map地图浏览程序了（提前你是这么多的数据，呵呵）。

让大家久等了，切图相关的下载在这里：

切图工具和地图数据：GMapExprotForArcEngine.zip

Google Map API V3离线版:GoogleMapAPIV3.zip

切图后数据：GoogleMapAPIV3Demo.zip(空间有限，所以只上传了6－8级，9和10级请自己进行切图)

由于水平有限，程序可能会存在不完善的地方，请告诉我，如果你有更好的建议，也请告诉我。

本文链接

GoogleMap地图图片请求数据限制解决办法

2011-12-10T12:33:00Z

最近GoogleMap对于通过API访问的地图服务的请求不再是完全免费，用户每日每个API最多可以生成25000个地图下载任务，对于地图图片则限制在2500张。这会对很多使用Google Map API开发的应用程序有很大的影响，特别是在国内。也到不少朋友的寻问，完全突破的方式还没有，想了一种变通的方式来解决。

这个办法就是在我们的客户端和Google Map地图服务器之间架设一台地图图片缓存服务器，把需要的地图，先缓存在地图图片缓存服务器上，客户端请求时，先从缓存服务器上去获取，如果没有，再从Google Map地图服务器上获取，保存在本地，再从本地返回给客户端，这样就可以减少对Google Map地图图片服务器的请求次数。

当然，这种方法在开始的时候，请求量仍然会很大，不过到后面，数量就会越来越少。

大概流程如下：

流程已经很简单了，中间实现的方式也不复杂，只要能实现上面的功能，使用哪个平台不重要，下面是前端自己定义地图类型的方式：

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>Google Maps JavaScript API v3 Example: Image MapTypes</title>
6 <link href="mapfiles/css/default.css" rel="stylesheet" type="text/css" />
7 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
8 <script>
9 function LocalMapType() {}
10
11 LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
12 LocalMapType.prototype.maxZoom = 15;
13 LocalMapType.prototype.minZoom = 8;
14 LocalMapType.prototype.name = "本地地图";
15 LocalMapType.prototype.alt = "显示本地地图数据";
16 LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
17 var img = ownerDocument.createElement("img");
18 img.style.width = this.tileSize.width + "px";
19 img.style.height = this.tileSize.height + "px";
20 img.onerror = function(){
21 img.src = "c:\\Map\\nomap.png";
22 }
23
24 //var strURL = "C:\\Map\\Google_Hybrid\\" + zoom + "\\" + coord.x + "\\" + coord.y + ".png";
25 var strURL = "http://localhost:8080/gettitle/gettitle.png?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
26 img.src = strURL;
27 return img;
28 };
29
30 var localMapType = new LocalMapType();
31
32 function initialize() {
33 var myLatlng = new google.maps.LatLng(36.867078, 119.286772);
34 var myOptions = {
35 center: myLatlng,
36 zoom: 11,
37 streetViewControl: false,
38 mapTypeControlOptions: {
39 mapTypeIds: ["local"]
40 }
41 };
42
43 var map = new google.maps.Map(document.getElementById("map_canvas"),
44 myOptions);
45
46 map.mapTypes.set('local', localMapType);
47 map.setMapTypeId('local');
48 }
49
50 </script>
51 </head>
52 <body onload="initialize()">
53 <div id="map_canvas" style="width: 640px; height: 480px;"></div>
54 </body>
55 </html>

本文链接

如何处理更改计算机名称导致oracle无法启动

2011-09-27T03:12:00Z

1.安装Oracle后，更改Windows计算机名，导致部分Oracle第三方工具，如:PLSQL Developer无法登陆，并提示ORA-12541:TNS:no listener或ORA-12547:TNS:丢失联系等错误信息的解决方法。

答：从Oracle的错误提示来看,是说TNS:no listener ，估计是某种服务没有启动，打开windows管理工具->服务，一看，有一个OracleOraHome90TNSListener这样的服务，和错误信息题是一致，基本就可以肯定是这个服务所引发的问题。再一看，该服务没有启动，遂手工启动，刷新后一看，该服务居然马上就自动关闭了。重试N次，结果一样。到Google搜索看看，没想到这还是一个普遍的问题，有一个人提出，把安装目录下的listener.ora打开察看。如：d:\oracle\ora90\network\admin\listener.ora。
打开该配置文件后发现如下一段配置信息：
LISTENER =
(DESCRIPTION_LIST =
    (DESCRIPTION =
      (ADDRESS_LIST =
        (ADDRESS = (PROTOCOL = IPC)(KEY = EXTPROC0))
      )
      (ADDRESS_LIST =
        (ADDRESS = (PROTOCOL = TCP)(HOST = local)(PORT = 1521))
      )
    )
)

当看到这一行HOST=local 的时候，问题解决了。原来是由于几天装好Oracle后，又改了Windows的计算机名，而这个配置文件中记录的监听主机名还是原来的名称，这也就怪不得，OracleOraHome90TNSListener服务无法启动了，马上修改为现在的计算机名，再次启动OracleOraHome90TNSListener服务成功，PL/SQL Developer连接Oracle数据库成功，不能登陆故障排除。

总结：Oracle比较强调手动功能调整，将一些配置信息放置在配置文件中。不像SqlServer一样，几乎把任何信息都放在注册表中，当然了这也符合Oracle作为一个跨平台数据库的精神。但对初学者来说，确有一定难度，不像SqlServer那么"傻瓜"，再解决这个问题时，差点又重装一次Oracle，看来遇到问题多Google多分析，还是屡试不爽的。

本文链接

基于SuperMap Objects写的GoogleMap地图切割程序(三)

2011-06-27T02:26:00Z

这个工具主要的功能是将矢量的地图数据，输出成Google Maps一样的图片数据，确切的说是TMS(Tile Map Service)图片编码方式，这样就很方便的使用WEBGIS API对这些图片进行加载，发布成Google Maps一样的地图服务，提高访问速度。当然也可以加载自己的业务数据，集成到现在的业务系统中。有了自己的数据后，可发布于局域网或互联网。

程序请从以下地址下载：

http://files.cnblogs.com/liongis/GMapExport1.2.rar

这次主要是基于之前版本的一个升级，主要修改的内容有：

1.使用新的投影配置，新的配置请参见《SuperMap Desktop中配置Google Maps地图投影》，修改这个原因是因为之前的配置，程序中对地图数据进行了二次投影换算，所以在精度上会有点差别，所以导致在某些地方两副图相接的时候会出现一条白线或重叠的部分。

2.增加了显示TMS编号的功能，可以在切图前更好的看到需要切图的范围和编号是怎么样的。

3.增加“继续上次切图”功能，使程序在切图过程中被中断的情况下，下次可以继续上次未切完的数据再进行切图。

主要的完成功能界面如下：

打开地图后界面：

显示TMS编号：

切图：

下面用FGMap加载我们切出来的地图做个测试：

上面我们看到的是北京地图，我们测试切出来的图是一个全国地图，加载后的界面是：

测试的程序和测试数据请从这里下载：http://files.cnblogs.com/liongis/TMS.rar

如有需要的朋友可以与我联系！

本文链接

SuperMap Desktop中配置Google Maps地图投影

2011-06-24T03:39:00Z

我们先来了解一下Google Maps采用的地图投影

Google Maps、Virtual Earth等网络地理所使用的地图投影，常被称作Web Mercator或Spherical Mercator，它与常规墨卡托投影的主要区别就是把地球模拟为球体而非椭球体。为什么要投影，请参见LionGG的《地图投影为什么》

为什么是圆形球体，而非椭球体？

这说来简单，仅仅是由于实现的方便，和计算上的简单，精度理论上差别0.33%之内，特别是比例尺越大，地物更详细的时候，差别基本可以忽略。Google Maps使用的是WGS 84的参考球体。

Web墨卡托投影坐标系：

以整个世界范围，赤道作为标准纬线，本初子午线作为中央经线，两者交点为坐标原点，向东向北为正，向西向南为负。

X轴：由于赤道半径为6378137米，则赤道周长为2*PI*r = 2*20037508.3427892，因此X轴的取值范围：

[-20037508.3427892,20037508.3427892]。

Y轴：由墨卡托投影的公式可知，同时上图也有示意，当纬度φ接近两极，即90°时，y值趋向于无穷。这是那些“懒惰的工程师”就把Y轴的取值范围也限定在

[-20037508.3427892,20037508.3427892]之间，搞个正方形。

懒人的好处，众所周知，事先切好静态图片，提高访问效率云云。俺只是告诉你为什么会是这样子。因此在投影坐标系（米）下的范围是：最小(-20037508.3427892, -20037508.3427892 )到最大 (20037508.3427892, 20037508.3427892)。

[注：上面这一段内容摘自LionGG的Google Maps地图投影全解析(1)：Web墨卡托投影]

我觉得这一段已经写得很清楚了，所以转过来，其中我们需要重点知道的两点：Google Maps是使用的墨卡托投影，而地球模拟成球体而非椭球体。

上面两点一定要注意，也是我们的配置的重点：

首先我们将数据源设置球体，这里需要修改数据源的投影方式，配置如下：

在需要修改的数据源上，点击右键，选择“属性”，如下图：

这里我们使用的参考椭球体也是WGS_1984，但这里有一个“椭球扁率”为0.0033528107，而Google Maps是球体，所以这个“椭球扁率”我们需要设置为0，这样我们需要“重新设定投影”：

这里选择经纬坐标系统，只是在“地理坐标系”是选择“User Define”，然后下一步：

请参照上面的值进行设定，主要将“赤道半径”设置为：6378137，“扁率”设置为：0，完成后效果如下：

这样就可以了，到此我们的数据源投影设置完成，关闭这个窗口即可。

接下来我们需要设置地图的投影，在地图上点击右键，选择“属性”：

我们这里选择的投影方式为：Mercator，但这里也有一个“椭球扁率”，这个不是我们想要的，所以点击“设置”：

请参照上图进行设定，完成后“下一步”：

这里比例因子我们设置为：1，然后“下一步”：

这样我们就设置完成了，点击“应用”就OK啦！

经过上面的配置，我们就完成了在SuperMap Desktop中对Google Maps相同地图投影的设定，有朋友会问，这样设定后有什么用呢？

这就看每一个人的应用了，我这样来设置是为了能得到和Google Maps一样的投影和坐标，可以用来切图使用，将矢量图生成和Google Maps一样的图片数据。

切图的使用我会别开文章进行介绍，有兴趣的朋友可以关注一下。

由于水平有限，文中难免会有错误，希望朋友们进行指正。

本文链接

博客园_liongis

离线地图制作工具

[转]flex自定义组件分类 在组件面板里放到不同的文件夹下

GoogleMapAPIV3.8.6离线包下载

FGMap加载天地图地图数据

[源码]游戏控制者--让小朋友游戏学习两相顾

基于ArcEngine写的GoogleMap地图切割程序

GoogleMap地图图片请求数据限制解决办法

如何处理更改计算机名称导致oracle无法启动

基于SuperMap Objects写的GoogleMap地图切割程序(三)

SuperMap Desktop中配置Google Maps地图投影

[转]flex自定义组件分类在组件面板里放到不同的文件夹下