写点什么

使用 ArcGIS API for Flex 构建 Android 和 iOS 移动地图应用程序

  • 2011-07-07
  • 本文字数:4702 字

    阅读完需:约 15 分钟

目录

需求

必备知识

要求熟悉 ActionScript、CSS 和 Flex skin。应该在完成本教程之前阅读本系列的第 1 部分。

用户级别

中级

必需的产品

示例文件

必需的其他产品

  • Esri ArcGIS API for Flex——免费下载,不需要许可证密钥

下载

位置,位置,还是位置。这不仅是房地产商的座右铭,也是 Google、Facebook、Foursquare 等许多 web 先锋的信条,他们都在自己的服务中加入了位置功能。随着移动设备越来越普及,与我们的日常生活密不可分,需要开发包含位置感知、移动功能和地图资产的应用程序,从而向用户提供创新的令人兴奋的新功能。这些新功能会增加开发成本,尤其是对于要开发在所有设备上运行的移动应用程序的开发人员。对于这些开发人员,Flex 和 Flash Platform 让他们能够用单一代码基构建应用程序并把它部署到多种设备上,这有助于降低成本并简化跨平台应用程序的开发。

在本文中,我要介绍如何使用 ArcGIS API for Flex 构建可以部署在 Android 和 Apple iOS 设备上的地图应用程序。本文的示例移动应用程序使用 ArcGIS API for Flex 从 ArcGIS.com 查询美国各州的几何形状信息,当移动设备处于 portrait 状态时显示州名的列表,当移动设备处于 landscape 状态时显示地图并突出显示选择的州。尽管这个应用程序听起来简单,但实际上并不太简单。它会演示 Flex Mobile 框架的一些方面以及如何使用 ArcGIS API for Flex。

导入并运行地图应用程序

下载本教程的示例文件之后,打开 Flash Builder 4.5.1 并执行以下步骤:

  1. 选择 File > Import > Flash Builder > Flash Builder Project 并单击 Next。
  2. 选择 File,单击 Browse,找到下载的 MobileApp.fxp 项目文件。
  3. 选择 Import New Copy Of Project 并单击 Finish。

可以使用 Android 模拟器或在物理 Android 设备上运行这个应用程序。可以使用 Run Configurations (Run > Run Configuration) 添加一个 Mobile 应用程序并定义 Launch Method(见图 1)。

图 1. 为 MobileApp 设置运行配置

研究应用程序

如果打开 MobileApp.mxml,就可以看到主应用程序的源代码。

MobileApp.mxml

复制代码
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
splashScreenImage="@Embed('/assets/Default.png')"
firstView="views.QueryView">
</s:ViewNavigatorApplication>

这个应用程序的主类是 ViewNavigatorApplication 的子类。它通过 splashScreenImage 属性在应用程序启动时显示一个嵌入的图像。另外,它把应用程序的第一个视图(见图 2)设置为 QueryView 类的实例。

图 2. 应用程序的第一个视图

第一个视图(即主视图)让用户输入一个 SQL where 子句,这个子句作为从 ArcGIS.com 上的 REST 资源获取美国各州的几何形状信息和名称的查询任务的筛选器。可以在 QueryView.mxml 中找到源代码。

QueryView.mxml

复制代码
<?xml version="1.0" encoding="utf-8"?>
<s:View
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Query"
keyDown="this_keyDownHandler(event)">
<fx:Script>
<![CDATA[
private function this_keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode === Keyboard.SEARCH)
{
pushView();
}
}
private function pushView():void
{
navigator.pushView(QueryExecuteView, whereInput.text);
}
]]>
</fx:Script>
<s:actionContent>
<s:Button
icon="@Embed('/assets/search.png')"
click="pushView()"/>
</s:actionContent>
<s:TextInput id="whereInput"
width="100%"
left="5" right="5" top="10"
text="STATE_NAME like 'M%'"/>
</s:View>

QueryView 是 View 的子类,它的 title 属性设置为 “Query”。它垂直地布置子组件。在这里,它只有一个子组件,一个让用户输入 SQL where 子句的 TextInput 实例。在操作内容部分中定义一个 Button 实例(出现在屏幕的右上角),它的 icon 属性引用一个嵌入的放大镜图像,它的单击事件处理函数显示一个 QueryExecuteView 实例,通过 data 属性传递文本输入控件的值。

另外,还有一个按键处理函数,它对按下设备上的硬件搜索按钮做出反应(在 Android 设备上搜索按钮在底部)。它也显示一个 QueryExecuteView 实例。

QueryExecuteView 视图(见图 3)是执行包含用户定义的 where 子句的查询的中间步骤。

图 3. 执行查询

QueryExecuteView.mxml

复制代码
<?xml version="1.0" encoding="utf-8"?>
<s:View
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
title="Searching..."
viewActivate="queryTask.execute(query)"
>
<fx:Declarations>
<esri:QueryTask id="queryTask"
executeComplete="navigator.pushView(QueryResultView, event.featureSet)"
showBusyCursor="false"
url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"
useAMF="true"/>
<esri:Query id="query"
outFields="['STATE_NAME']"
returnGeometry="true"
where="{data}"/>
</fx:Declarations>
<s:BusyIndicator
horizontalCenter="0"
verticalCenter="0"/>
</s:View>

在执行查询时,显示一个忙碌标志,让用户能够看出程序正在做某些事情。这个视图声明一个 QueryTask,把它的 url 属性设置为一个提供美国人口统计数据的 ArcGIS REST 端点。useAMF 属性设置为 true,表示产生的数据将以二进制 AMF 格式(而不是 JSON 格式)传输回移动设备,这会产生很好的性能并压缩有效负载。另外,这个视图声明一个 Query 实例,把它的 where 属性绑定到视图的 data 属性(这是在前一个视图中在调用 navigator.pushView 时定义的),把返回的字段限制为只包括‘STATE_NAME',通过设置``returnGeometry="true" 要求返回每个州的几何形状信息。在激活视图时,以查询作为参数调用查询任务的 execute 函数。如果执行成功,会显示一个

QueryResultView 视图显示查询的结果。当指示视图导航器把这个类的实例压入视图堆栈的顶时,创建一个实例,用一个 FeatureSet 类实例的引用调用它的 data 设置方法,然后显示这个视图。FeatureSet 有两个属性:

  • attributes:对象数组,其中的每个对象有一个与Query中定义的 outFields 属性内容匹配的键 / 值对。
  • features:Graphic 实例的数组,其中的每个 Graphic 有一个 geometry 属性。

QueryResultsView.mxml

复制代码
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:esri="http://www.esri.com/2008/ags"
title.landscape="Feature Map"
title.portrait="Feature List">
<fx:Script>
<![CDATA[
import com.esri.ags.FeatureSet;
import mx.collections.ArrayList;
import mx.collections.IList;
[Bindable]
private var listProvider:IList;
override public function set data(value:Object):void
{
super.data = value;
const featureSet:FeatureSet = value as FeatureSet;
if (featureSet)
{
listProvider = new ArrayList(featureSet.attributes);
}
}
]]>
</fx:Script>
<s:states>
<s:State name="portrait"/>
<s:State name="landscape"/>
</s:states>
<s:navigationContent>
<s:Button click="navigator.popToFirstView()" icon="@Embed('/assets/home.png')"/>
</s:navigationContent>
<s:List id="list"
left="0" right="0" top="0" bottom="0"
dataProvider="{listProvider}"
includeIn="portrait"
interactionMode="touch"
labelField="STATE_NAME"/>
<esri:Map id="map"
includeIn="landscape"
zoomSliderVisible="false">
<esri:extent>
<esri:Extent xmin="-137.6" ymin="19.8" xmax="-50.7" ymax="52.9"/>
</esri:extent>
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
<esri:GraphicsLayer graphicProvider="{data.features}">
<esri:symbol>
<esri:SimpleFillSymbol alpha="0.5" color="red">
<esri:outline>
<esri:SimpleLineSymbol alpha="1.0" color="yellow"/>
</esri:outline>
</esri:SimpleFillSymbol>
</esri:symbol>
</esri:GraphicsLayer>
</esri:Map>
</s:View>

视图可以处于两种状态之一:portait 或 landscape。视图的状态由用户拿着设备的方式控制。Flex 移动框架会监视设备的方向并相应地设置视图的状态。这种状态管理机制让您能够根据方向显示查询任务特性。当处于 portrait 状态时,应用程序的标题设置为 Feature List,一个 List 实例填充此视图(见图 4)。列表中的每一行显示一个特性的 STATE_NAME 属性值。

图 4. 处于 portrait 模式的应用程序

当处于 landscape 状态时,列表被替换为一个 Map 实例,它显示包含 48 个州的地理区域。这个地图由两层组成。第一层采用平铺方式,把从提供的 URL 获取的形状平铺在一起。第二层是一个 GraphicsLayer 实例,它的数据提供者是 data 属性中提供的特性。使用一个 SimpleFillSymbol 实例在图形层中把每个特性或图形符号化(突出显示),它用半透明的红色填充每个州并把轮廓设置为黄色实线(见图 5)。为了让用户能够导航回主屏幕,在导航内容区域(左上角)中添加一个按钮,它的图标引用一个房屋图像,单击事件处理函数指示导航器返回到第一个视图(在这里是 QueryView)。

图 5. 处于 landscape 模式的应用程序

打包应用程序的发布版

在 FlashBuilder 4.5.1 中,现在可以把项目从 IDE 直接导出到 Android 设备、BlackBerry Tablet OS 设备和 iOS 设备。

首先,选择 Project > Export Release Version 并完成打包过程(见图 6)。

图 6. 导出发布版

如果希望部署到 iOS 设备(见图 7),您必须作为开发人员与 Apple 签约,然后把一个 Provisioning Profile 文件下载到本地计算机上。生成 IPA 文件之后(这要花一段时间),把发布文件夹中的 IPA 文件放到 iTunes 中,同步自己的 iPhone 以传输应用程序。

图 7. 针对 iOS 设备导出发布版

后续研究

本文只涉及到了使用 ArcGIS API for Flex 开发移动应用程序的皮毛。更多信息参见:

2011-07-07 09:222599

评论

发布
暂无评论
发现更多内容

面试加分项!Android项目开发如何设计整体架构?学习路线+知识点梳理

欢喜学安卓

android 程序员 面试 移动开发

阿里发布2021年Redis“神级”手册:基础+原理+应用+集群+拓展+源码,六管齐下

Java架构追梦

Java redis 阿里巴巴 源码 架构

产品经理的大局观——

小匚

产品经理 产品经理训练营

阿里开始“拆”中台?!中台建设何去何从?

博文视点Broadview

深入了解HashMap!

xcbeyond

Java hashmap HashMap底层原理 28天写作

【百度官方技术分享】百度智能小程序框架性能优化实践

百度Geek说

百度智能小程序 小程序云开发 百度 大前端 技术宅

阿里工作6年,熬到P7就剩这份学习笔记了,已助朋友拿到7个Offer

Java 编程 面试 计算机

抽奖小助手——利益相关者

墨狂之逸才

作业:挑一个你喜欢的产品平台,列出产品的利益相关方。

嫉妒的耗子

Springboot使用jasypt需要注意的一个小地方

Sky彬

springboot jasypt

【并发编程的艺术】Java内存模型的顺序一致性

程序员架构进阶

架构 JMM Java内存模型 28天写作

第四次工业革命与龙的故事

脑极体

产品经理课程-第二周

novaln🍉

产品经理训练营第二周作业

产品经理训练营

产品0期-第二周作业

曾烧麦

产品经理训练营

面试学习!我们究竟还要学习哪些Android知识?讲的明明白白!

欢喜学安卓

android 程序员 面试 移动开发

70 张图带你彻底掌握红黑树

Java 数据结构 红黑树

第二次作业提交

涅米丶

Mybatis系列全解(四):全网最全!Mybatis配置文件XML全貌详解

潘大壮

Java 后端 mybatis mybatis源码

产品训练营-第二周-作业

邹小胖

产品经理训练营

【网络篇】- https

双木之林

维基百科技术架构演进分析

Andy

Flink 助力美团数仓增量生产

Apache Flink

flink 流计算

Mybatis系列全解(五):全网最全!详解Mybatis的Mapper映射文件

潘大壮

Java 后端 mybatis mybatis源码

《程序员修炼之道》- 务实的哲学(2)

石云升

读书笔记 程序员 28天写作 软件的熵

如何做好一场技术分享,100%纯干货输出

架构精进之路

技术分享 七日更 28天写作

第二章作业

白知之明

玩遍博客网站,我整理了全套的建站技术栈

老魚

程序员 博客 网站搭建 建站

「Android渲染」图像是怎样显示到屏幕上的?

李小四

Android渲染 AndroidUI RenderingPipeline

追根溯源的产品思维

产品经理训练营

作业 - 第二周

eva

使用ArcGIS API for Flex构建Android和iOS移动地图应用程序_Java_Mansour Raad_InfoQ精选文章