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

最新推荐文章于 2024-07-13 23:11:02 发布

wkyb608

最新推荐文章于 2024-07-13 23:11:02 发布

阅读量1k

点赞数

分类专栏： ios 文章标签： flex android api ios encoding query

ios 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

需求

必备知识

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

用户级别

中级

必需的产品

Flash Builder （下载试用版）
Illustrator CS5 （下载试用版）

示例文件

必需的其他产品

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 并执行以下步骤：

选择 File > Import > Flash Builder > Flash Builder Project 并单击 Next。
选择 File，单击 Browse，找到下载的 MobileApp.fxp 项目文件。
选择 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 开发移动应用程序的皮毛。更多信息参见：

原文链接：http://www.infoq.com/cn/news/2011/07/mobile-mapping-app-arcgis

wkyb608

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ArcGIS API for Flex构建Android和iOS移动地图应用程序

目录导入并运行地图应用程序研究应用程序打包应用程序的发布版需求必备知识要求熟悉 ActionScript、CSS 和 Flex skin。应该在完成本教程之前阅读本系列的第 1 部分。用户级别中级必需的产品Flash Builder （下载试用版）Illustrator CS5
复制链接

扫一扫