今天开始我们的第一课,介绍如何使用FGMap for Flex 来构建一个简单的地图应用。

第一步:下载并解压库文件

下载FGMap的库文件FGMapLib.swc,下载地址是:http://fgmap-webgis.googlecode.com/svn/trunk/lib/FGMapLib.zip

下载后解压后行到一个swc文件。

第二步:新建 Flex 工程

1.在 Flash Builder4 中,选择 “文件 > 新建 >Flex 项目”,或在 “包资源管理器” 窗口中右键单击选择“新建 > Flex 项目”,弹出 “新建 Flex 项目” 对话框。在“ 项目名” 栏中输入项目名称:

FGMap学习之--快速入门

2.单击 “下一步” 按钮,再单击 “下一步” 按钮,转到 “创建一个新的 Flex 工程” 页面。

3.选择 “库路径” 复选项,加载库文件。单击 “添加 SWC” 按钮,弹出 “添加 SWC” 对话框,单击 “浏览” 按钮定位到库文件所在硬盘位置。  

FGMap学习之--快速入门

4.单击 “完成” 按钮完成创建 Flex 工程。可以见到左边 “导航栏” 窗口中新增了 "Flex" 工程,双击 src 文件夹下的FGMapDemo.mxml 在右边窗口打开该文件,此时就可以添加代码了。

FGMap学习之--快速入门

第三步:添加代码,实现地图应用:

FGMapDemo.mxml 中添加如下代码,实现WebGIS的地图访问。需要引用 xmlns:maps="com.fgmap.maps.*"

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 minWidth="600" minHeight="400"
6 xmlns:maps="com.fgmap.maps.*">
7 <fx:Declarations>
8 <!-- 将非可视元素(例如服务、值对象)放在此处 -->
9 </fx:Declarations>
10
11 <maps:Map id="map" width="100%" height="100%" mapevent_mapready="onMapreadyHandler(event)"/>
12
13 <fx:Script>
14 <![CDATA[
15 import com.fgmap.maps.*;
16 import com.fgmap.maps.MapMouseEvent;
17 import com.fgmap.maps.controls.MapTypeControl;
18 import com.fgmap.maps.controls.NavigationControl;
19 import com.fgmap.maps.controls.OverviewMapControl;
20 import com.fgmap.maps.controls.ScaleControl;
21 import com.fgmap.maps.overlays.*;
22
23 private var marker:Marker;
24
25 private var centreLatlng:LatLng =new LatLng(39.911842984749946, 116.400146484375);//北京的一个坐标位置。
26
27 //地图加载完成后执行的方法
28 protected function onMapreadyHandler(event:MapEvent):void
29 {
30 map.enableContinuousZoom(); //启用连续平滑缩放。
31 map.enableScrollWheelZoom(); //启用使用鼠标滚轮缩放。
32 map.addControl(new MapTypeControl()); //供用户在地图类型之间进行切换的按钮。
33 map.addControl(new NavigationControl());//供用户更改地图的各项导航参数,包括缩放级别、中心位置和空间方位角。
34 map.addControl(new ScaleControl()); //比例控件是用于指示当前地图的分辨率和缩放级别的可视指示器。
35
36 map.setCenter(centreLatlng,10); //设置地图的中心点。
37
38 marker =new Marker(centreLatlng); //建立一个标注。
39 map.addOverlay(marker); //在地图上显示此标注。
40 }
41
42 ]]>
43 </fx:Script>
44 </s:Application>

 

第四步:运行工程并浏览

按 Ctr+F11 运行程序,或右键单击 FGMapDemo.mxml 应用程序 --> 运行应用程序就可以在浏览器就可以在浏览器(在“窗口 --> 首先参数 --> 常规 --> Web 浏览器”中可更改默认浏览器)中看到我们可爱的地图喽:

FGMap学习之--快速入门

源码地址:https://files.cnblogs.com/liongis/FGMapDemo1.rar

呵呵,对Google Map For Flex了解的朋友是不是发现很面熟呢?其中的缘由你懂的。。。。。这个是免KEY的哦!当然,也请别用于商业,谢谢!

更多的功能,你们也可以自己去试,如果发现有什么问题的,可与我联系。

Mail:liongis@163.com

QQ:1366940902

相关文章:

  • 2021-07-31
  • 2021-07-14
  • 2021-11-18
  • 2021-10-09
  • 2021-11-23
  • 2022-12-23
  • 2021-06-28
  • 2021-12-02
猜你喜欢
  • 2021-10-09
  • 2021-08-18
  • 2021-09-08
  • 2021-09-13
  • 2021-07-02
  • 2022-12-23
  • 2021-12-31
相关资源
相似解决方案