写点什么

使用 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:222609

评论

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

百度智能云助力自动驾驶全链路研发

Baidu AICLOUD

自动驾驶 全链路

随机高并发查询结果一致性设计实践

京东科技开发者

架构设计 并发 业务场景 企业号 2 月 PK 榜 京东物流

1 理解功能、业务功能和能力

涛哥 数字产品和业务架构

企业架构 业务架构 业务架构师

零基础前端培训学习有用吗

小谷哥

从实测出发,掌握 NebulaGraph Exchange 性能最大化的秘密

NebulaGraph

数据导入

佛萨奇系统开发源码部署技术方案(MetaForce元宇宙)

I8O28578624

天穹:一站式BizDevOps平台介绍

哈哈哈

云原生 后端 链路追踪 压测 网关

特定领域知识图谱融合方案:文本匹配算法(Simnet、Simcse、Diffcse)

汀丶人工智能

自然语言处理 知识图谱 2月日更

软件测试/测试开发 | app自动化测试(Android)--显式等待机制

测试人

软件测试 自动化测试 测试开发 appium app自动化测试

MetaForce佛萨奇系统开发技术流程(成熟代码)佛萨奇2.0源码部署教程

I8O28578624

图解华为云代码检查服务CodeArts Check

华为云PaaS服务小智

天穹-gateway网关系列1:Tesla网关整体介绍

哈哈哈

开源 云原生 后端 网关 #java

过年回去,终于给老人讲清楚两台电脑是如何通信的

华为云开发者联盟

后端 开发 华为云 企业号 2 月 PK 榜 华为云开发者联盟

自动驾驶工具链及仿真平台的应用

Baidu AICLOUD

自动驾驶 工具链

开发小白的高光逆袭:竟然能一眼断定生产环境接口响应时间慢是磁盘性能问题引起的

KINDLING

Java 故障定位 ebpf 生产环境 排障

跨境电商“重新出发”,区块链赋能新玩法

旺链科技

区块链 区块链技术 区块链技术应用

2023 年推荐这 10 个开发者工具

Liam

前端 后端 开发者工具 开发工具 程序员 java

软件研发效能管理工具有哪些?8大效能管理工具盘点

爱吃小舅的鱼

企业管理 管理软件 效能管理

智能合约MetaForce佛萨奇系统开发详细(技术解析)

I8O28578624

城市健康云,打造大健康服务生态

华为云开发者联盟

云计算 后端 华为云 企业号 2 月 PK 榜 华为云开发者联盟

采购LED显示屏时必须了解哪些技术参数?

Dylan

LED显示屏 全彩LED显示屏 led显示屏厂家

StarRocks斩获「2022 掘金引力榜」年度技术品牌传播案例 Top 10!

StarRocks

数据库

科班和培训出来的前端程序员的区别

小谷哥

北京大数据培训中心怎么样

小谷哥

打造合规数据闭环,加速自动驾驶技术研发

Baidu AICLOUD

自动驾驶 数据闭环

软件测试/测试开发 | app自动化测试(Android)--触屏操作自动化

测试人

软件测试 自动化测试 测试开发 appium

国资委79号文解读:国央企OA办公系统信创替代落地实践与标杆案例

数字科技时讯

信创 电子合同 电子签名 企业国产化 OA

java就业培训班怎么选?

小谷哥

前端培训学完课程后如何找工作?

小谷哥

佛萨奇系统开发流程原理,2.0版?佛萨奇源码部署搭建方案程序解析

I8O28578624

如何将使用中的域名平滑迁移到京东云?(以原域名注册、域名解析都在万网为例)

京东科技开发者

域名解析 注册 京东云 京东商城 企业号 2 月 PK 榜

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