ー
ッ
1
目次
... 2
ー ッ い ... 2
ArcGIS API for Flex と ... 2
ArcGIS API for Flex 開発環境 ... 2
Web ッ ン ー ョン 開発 ... 3
API ン ー ... 3
Web ッ ン ー ン 開発 ... 7
API 参照 追加 ... 7
Map コン ー 追加 ... 14
ケーション 配置 ... 19
ーカ ArcGIS for Server サービスを追加する ... 22
ーカ ArcGIS for Server サービス パテ を変更する ... 26
次 ッ ... 29
ArcGIS for Developers : ArcGIS API for Flex ... 29
ッ ... 34
種類 ... 34
ッ サービス ... 36
ッ サービス REST エン ン ... 36
ーチ ... 39
ーチ REST エン ン ... 40
2
こ
ー
ッ
つい
ー ッ 初 ArcGIS API for Flex 使用 Web ッ ン ー
ン 構築 開発者 方 基本的 開発手順 流 紹介 本書 読 い く
ArcGIS API for Flex 使用 Web ッ ン ー ン開発 基礎 理解
出来
ArcGIS API for Flex
ArcGIS API for Flex ArcGIS 提供 Web ー ン開発 API 1 あ
Adobe Flex 高い操作性・表現力 ArcGIS for Server や ArcGIS Online ン ン GIS
ソー 統合 ー ン 開発 提供 API
ArcGIS API for Flex
開発環境
本 以下 環境 ArcGIS API for Flex 用い Web ッ ン ー ン 開発
手順 紹介 本 手順 実行 前 以下 環境 使用 ン 適切 ッ ッ
い 必要 あ
Adobe Flash Builder 4.7
ン ーネッ ン ー ン ー IIS
本 使用 Adobe Flash Builder 4.7 (以下 Flash Builder) Flex ー ン ー
ン ー ー 設計 統合開発環境
ン ーネッ ン ー ン ー IIS Microsoft Windows 提供 Web ー
ン ーネン
ArcGIS API for Flex ー 最新 動作環境 下記 参照く い
ArcGIS API for Flex 動作環境:
3
Web
ッ ン
ー ョン 開発
API
ン ー
ArcGIS API for Flex 用い Web ッ ン ー ン 開発 API
入手 必要 あ 以下 手順 従い ArcGIS for Developers API 入手 下 い
1. ArcGIS for Developers 開発者 ン 作成
ArcGIS API for Flex 使用 ArcGIS for Developers 開発者 ン
ArcGIS Online 組織向け ン ン 必要 ArcGIS for Developers 開発者
ン 作成方法 い 下記 ー ArcGIS for Developers 開発者 ン 作成
参照く い
http://www.esrij.com/products/arcgis-api-for-flex/documents/
2. ArcGIS for Developers ン ー ー
ArcGIS for Developers 開発者 ン ArcGIS Online 組織向け ン
ン ン ン 必要
ン ー ー :
4
3. ArcGIS API for Flex [DOWNLOAD] ン ッ ン ー
過去 ー ン ン ー 場合 右側 あ ン ー ン 選択
5
4. ン ー zip 展開 API 含 以下 う
含 い
libs :ArcGIS API for Flex API
locale : ー 用 各国語 入 い
含 い UI ン ーネン ッ ー ン
際 使用
oauth :OAuth2.0 実装 際 使用 ー ン3.5以
降
src :API ン API 含 ー ン ー
6
5. ン ー ン ー 場合 GitHub 入手
https://github.com/Esri/arcgis-samples-flex/releases
使用 ー ン [Source code(zip)] く [Source code(tar.gz)] ン ッ
ン ー ン ー ン ー 任意
7
Web
ッ ン
ー ョン 開発
以下 手順 Flash Builder 用い ArcGIS API for Flex 使用 Web ッ ン ー
ン ン 作成
API
参照 追加
8
2. [新規 Flex ] ッ [ 名] 指定 [次 ]
9
10
4. 新 い ArcGIS API for Flex 参照 追加 [
] 選択 [SWC 追加] ン ッ
[SWC 追加] 上述 API ン ー 入手
API 格納 い 内 [agslib-3.7-2014-11-06.swc] 選択
[OK] ン ッ
11
5. [終了] ン ッ 新 い 作成 終了
12
6. 新 い 作成 Flex 領域 MXML ー ン
13
7. Flex ン ー ー ッ 追加 ン ー引数 -locale ja_JP 変更
設定 行う ArcGIS API for Flex 使用 際 自動的 日本語 ソー
14
Map
コン
ー
追加
次 Web ッ ン ー ン上 地図 表示 ー 記述
1. application 内 [Map] ン ー 配置 map 内 ArcGIS
Online 背景地図 追加 追加 ー 以下 う
<esri:Map>
<esri:ArcGISTiledMapServiceLayer
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Ma p/MapServer"/>
</esri:Map>
application 内 ArcGIS API for Flex 名前空間 設定
xmlns:esri=ナhttp://www.esri.com/2008/agsナ
15
2. 実行 Flash Builder [実行] ー [実行] > [Web
16
17
時点 ッ や ー 地図 ー ン操作 可能
Web ッ ン ー ン 正常 実行 い 確認 閉
ー ン 終了 下 い
ッ 操作 関 主 ー ッ 機能:
ッ 移動
ー 前方 回転 拡大
ー 後方 回転 縮小
SHIFT + ッ 拡大
SHIFT + CTRL + ッ 縮小
SHIFT + ッ ッ 位置 中心 表示
ッ ッ 位置 中心 拡大
矢印 ー 上下左右 ー 方向 移動
3. 地図 初期表示範囲 日本付近 う 変更 <esri:Map> 内 以下 ー
追記 実行 行い
18
ー ン起動時 表示範囲 日本付近 確認
19
ー ョン 配置
以下 作成 ー ン ネッ ワー 上 公開 手順 紹介 OS
Windows 7 Web ー ン ーネッ ン ー ン ー (IIS) 使用 場合
紹介 異 OS Web ー 使用 場合 適宜設定 行 く い
20
2. [ ー 書 出 ] 内容 確認 [終了] ン ッ
ー 書 出 先 [bin-release] 必要 応
変更 下 い
3. IIS ー ン 配置 作成 Windows
ー 開 C:\Inetpub\wwwroot 移動 wwwroot 直下 作成
名 同 MyFlexApp 作成
4. 書 出 先 ( < ー >\Adobe Flash Builder 4.7\
名\bin-release) Windows ー 開 内
21
5. Web 開 ー 以下 URL 記述 ー ン
http://localhost/MyFlexApp/MyFlexApp.html
22
ー
ArcGIS for Server
サー
を追加 る
ArcGIS for Server ー ArcGIS Online 提供 い 背景地図 ッ ー 上
自身 公開 い ArcGIS for Server ッ ー 重 合わ
ー ArcGIS for Server ッ ー 追加 手順 説明
手順 あ ArcGIS for Server ッ ッ ー 公開 く必要 あ
ー ArcGIS for Server ー 追加 ArcGIS for Server REST ー
必要 あ
1. Windows 登録 い [Services Directory] 起動 Web
上 直接 URL 入力 ArcGIS Services Directory 表示
http://{hostname}:6080/arcgis/rest/services
2. [Services:] ン 公開 い GIS ー 一覧表示
3. 中 ッ ッ ー 公開 い 選択 以下 ン
一覧 ー 名 ナjapanナ いう ッ ッ ー 選択
23
4. ー URL 確認 URL 現在公開 い ッ ー
REST ー ン ン URL ッ ー ー
24
6. Map ン ー 追加 ッ 3 同様 表示 ー 追加
追加 例 ッ ー 行う
<esri:ArcGISDynamicMapServiceLayer> 追加 ッ 4, 5
確認 REST ー ン ン URL 指定 赤字 ー 追加部
分
<esri:Map x="0" y="0" width="500" height="500">
<esri:extent> <esri:Extent xmin="12664.701.873" ymin="1966722.781" xmax="18149425.343" ymax="6356169.06"/> </esri:extent> <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest /services/World_Street_Map/MapServer"/> <esri:ArcGISDynamicMapServiceLayer url="http://localhost/arcgis/rest/services/japan /MapServer" /> </esri:Map>
公開 い ッ ー 種類 別 使用 必要 あ
公開 ッ ー 種類 び い 後述 ッ ー
参照く い
25
8. Web ー ン ArcGIS Online World Street Map
ー ー ArcGIS Server 公開 ッ ー 重 合わ ( ッ
26
ー
ArcGIS for Server
サー
を変更 る
次 ー ArcGIS for Server ッ ー 変更
透過率 変更
1. <esri:ArcGISDynamicMapServiceLayer> 行 以下 う 変更 (赤字
ー 追加部分 )
<esri:ArcGISDynamicMapServiceLayer
url=http://localhost/arcgis/rest/services/japan/MapServer
alpha="0.6" />
ー ン 配置 同様 ー ー 配置 行い
ー ArcGIS Server 公開 ッ ー 付近 拡大表示
27
2. 上記 ッ 2 透過 設定 確認 ー 使用 透過率 動的
変更 う ー ン 変更 以下 う
<esri:ArcGISDynamicMapServiceLayer> 変更 <s:HSlider> 追加
ー Panel 使用 い <s:Panel> 以降 そ ソー (赤
字 ー 追加・変更部分 )
<esri:ArcGISDynamicMapServiceLayer
url=”http://localhost/arcgis/rest/services/japan/MapServer”
alpha="{mapAlpha.value}" />
</esri:Map>
<s:Panel left="50" top="5" title="透過" height="60" width="200">
<s:HGroup top="10" left="10">
<s:Label text="0" />
<s:HSlider id="mapAlpha" minimum="0.00" maximum="1.00" value="1" liveDragging="true" snapInterval="0.01" width="150" />
<s:Label text="1" />
</s:HGroup>
28
3. ー ン 配置 同様 ー 書 出 配置 行い
ー ン左下 ー ー 表示 透過率 変更 可能
確認 く い
以上 ン ー ン 開発 終了 高度 ー ン 開発
29
次
ッ
本 ー ッ ArcGIS API for Flex 用い Web ッ ン ー ン 開発
最 基本的 開発手順 い 紹介 今後 高度 ー ン 開発
ArcGIS for Developers 参照く い ArcGIS for Developers API 開発 必要
参考 ン や ン 集約 い
ArcGIS for Developers : ArcGIS API for Flex
30 Guide ( )
API 利用 開発手順や 追加や ン 表現 編集 解析 各機能 実装方法
31 API Reference ( )
32 Samples ( )
API 用い ン 集 実際 ー ン 操作可能 ソー ー 確認
公開 い ン ソー ー GitHub ン ー
33 Forums ( )
34
ッ
種類
Map 追加 そ ー ソー 違い ッ ー ー
2 種類 分け
Map 内 ー ソー 多く GIS ー 提供 ッ ー ッ ー
自身 ほ 場合 複数 構成 あ ー 管理者 各 ッ
ー 内 う ン や色 使用 地図上 表示 定義 い
ッ ー 定義 従い ー 上 地図画像 生成 ン 配信
ッ ー 内 ー 側 生成 地図画像 ー ソー Map ン
ー 表示
ッ ー あ ー 側 生成 地図画像 ー ソー 使用
ー 側 定義 ン や色 異 方法 地図 表現 一方
GIS サー
ッ サー
地図画像 生成
地図画像 配信
ッ サー
Map コン ー
35
ー ン ー ン上 動的 ン や色 設定
ー ッ ー 構成 複数 1 直接 そ 内
地物 座標 び属性情報 取得 ー ン上 動的 描画 行い
ArcGIS API for Flex ー ン 多く 場合 い ン 情報等 変更 必要 い背景
地図 ッ ー 使用 ー 操作 応 表示 対話的 変更 必要 あ 主題
図 ー 使用
GIS サー
ッ サー
Map コン ー
ー
特定 ら
座標 属性情報を取得
ン 側
36
ッ
サー
ArcGIS API for Flex ArcGIS for Server 公開 REST ー 利用 ArcGIS for
Server ッ ッ ー や ッ ッ ー 様々 ッ ー
REST 形式 公開 API ArcGIS for Server 公開 ッ ー 形
式 あわ 以下 う ッ ー 用意 い
ッ サー :
ArcGISTiledMapServiceLayer
ArcGIS for Server ッ ッ サー を ー ソー
使用 ま
ArcGISDynamicMapServiceLayer ArcGIS for Server ッ ッ サー を ー ソ
ー 使用 ま
ArcGISImageServiceLayer ArcGIS for Server メー サー を ー ソー 使
用 ま
OpenStreetMapLayer OpenStreetMap ッ メー サー を ー ソー
使用 ま
ッ ー ー ソー 指定 URL 属性 ッ ー REST
ン ン 指定 本 ー ッ 紹介 ー 新規作成
ArcGISTiledMapServiceLayer URL 属性 Esri 社 い ArcGIS Online 世界道路
地図 REST ン ン 指定 い
ッ
サー
REST
ン
ン
ArcGIS for Server 公開 い ッ ー REST ン ン ArcGIS for Server
ン ー ー 構成 ArcGIS Services Directory 呼 簡易 Web ー
ン 確認 以下 URL Esri 社 公開 い ッ ー REST
ン ン 確認
ArcGIS Online ArcGIS Services Directory
http://services.arcgisonline.com/arcgis/rest/services
Services: ン 表示 GIS ー 一覧 使用 い ー ッ
38
World_Street_Map ー 移動 ー REST ン ン 表示
39
ー
前述 通 ー ッ ー 異 ッ ー 内 1
座標 属性情報 取得 ン 側 動的 描画 行い 以下 ArcGIS Online 衛星
画像 ッ ー 上 ン ー 描画 例
ー 使用 上図 う ッ 表現 加え 上 地物 動的
選択 ArcGIS for Server ー 連携 Web 編集 時間遷移 ー ン表現
実装 以下 ッ ー 上 ー 選択 地物
40
ー
REST
ン
ン
ー ッ ー 同様 ArcGIS for Server REST ー 利用
ッ ー 異 ー 内 個別 ソー 指定
以下 Esri 社 公開 い ン ー ッ ー 個別 REST ン
ン 確認
1. Esri 社 ン ー 接続 [Specialty] ッ
41
42
3. ESRI_StatesCitiesRivers_USA ッ ー 詳細 表示 ッ ー
Cities (都市) Rivers 河川 States 州 3 含 い
43
4. Cities 詳細 表示 Cities ー REST ン ン
表示 URL ッ ー 使用 REST ン ン 異
URL 最後 ッ ー 内 ID /0 指定 い 点 注目 く
44
5. 以下 例 上記手順 確認 Cities ArcGIS Online 世界道路地図 上
重 い ー FeatureLayer Url 引数 REST ン
ン 指定 い そ 他 FeatureLayer setDefinitionExpression
使用 Cities POP1990 列 値 100000 大 い ー 人口
10 万人以上 取得 いう条件句 設定 い
<esri:Map x="0" y="0" width="800" height="600">
<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services /World_Street_Map/MapServer"/> <esri:FeatureLayer url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/s ervices/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/ 0"
definitionExpression = "POP1990 > 100000">
45
FeatureLayer そ 他 ー ー 取得方式 設定 mode
や 個別値分類や数値分類 色分け表示 renderer
用意 い 詳細 API Reference 参照く い
API Reference:FeatureLayer
46
ArcGIS API for Flex
を利用 た
iOS
・
Android
用
作成方法
Adobe AIR 使う ArcGIS API for Flex 作成 ー ン iOS や Android
用 ネ ッ ー 化
ArcGIS API for Flex ン ー あ BasicMap 例 ArcGIS Online ー
ッ 表示 GPS 機能 現在地 ー ン 作成手順 紹介
ン ー 入手方法 API ン ー 7. 参照く い
47
2. [Flash Builder] - [Flash Builder ] 選択 [次 ] ッ
3. [ 読 込 ] [ ー] 選択 ン ー ン ー
[参照] ン 使用 指定 BasicMap ソー ー \\ mobile\BasicMap
入 い
4. 次 設定 行い 作成 右 ッ 開
5. [Flex ] [SWC 追加] ン ッ 選択
\\ArcGIS_Flex\libs あ agslib-3.6-2013-12-13.swc 選択 下図 う
48 6. そ 他 Flex SDK 含 mx.swc sparkskins.swc 追加
${PROJECT_FRAMEWORKS}/libs/mx/mx.swc
${PROJECT_FRAMEWORKS}/libs/sparkskins.swc
[SWC 追 加 ] ン ッ SWC 追 加 ー
49 同様 手順 ナ${PROJECT_FRAMEWORKS}/libs/sparkskins.swcナ 追加
7. 実行 準備 整い Flash Builder 付属 ー 実行
51
52
作成 起動構成 BasicMap 選択 ー ッ ッ ー 起動方法 選択
ー ッ ッ ー Google Android 起動方法 ッ 上 AIR ー ー
53
54
9. 実機 実行 場合 実行構成 起動方法 上 選択 実際 端末 実行 画
面下 ン 表示 端末 GPS 機能 使 現在地 ー 下図 Android 動作
指 使 ン ン/ ン ワ ッ 拡
55
10. iOS 実行 場合 証明書や ン 必要 詳細
社 参照く い Adobe AIR や iOS ー ン 現在地
ー ン 表 示 い あ そ 場 合 BasicMapHomeView.mxml
myMap_loadHandler ン ン内 if 文 ン く い
背景図 表示 け 簡単 ン 紹介 ArcGIS API for Flex 様々 機能
ArcGIS API for Flex
ー
ッ
2014年12月12日 ジャパン株式会社
http://www.esrij.com/
Copyright(C) Esri Japan. 無断転載 禁
本書 記載 い 社名 商品名 、各社 商標 び登録商標
本書 記載 い 内容 改良 予告 く変更 場合 あ
本書 内容 参考情報 提供 目的 本書 含 情報 そ 使用