オソで発生した土砂崩れ - その前後の状況

2014 年 3 月 22 日、1 か月続いた豪雨の後に、ワシントン州オソ近郊の山が崩壊し、死亡者の数が 43 人に上る土砂崩れが発生しました。 このチュートリアルでは、土砂崩れが発生する前の地域と発生した後の地域を示すアプリを作成して、この悲劇的な出来事に人々の関心が集まるようにします。 崩壊した山と壊滅した地域の衛星画像を使用します。

このチュートリアルは、2023 年 8 月 17 日に最終テストされました。

最終結果の表示​

要件

• 公開者、ファシリテーター、または管理者ロールを持つ ArcGIS 組織アカウント (ソフトウェア アクセスのオプションをご参照ください)

オソで発生した土砂崩れ - その前後の状況

Web マップの作成

画像を解析するか地理空間データを準備した後、対象とする利用者と共有するための手順として、ArcGIS Online でレイヤーとしてこれらのアイテムを公開することがよくあります。 これらのレイヤーを魅力的な方法で提示する優れた手段として、Web アプリへのレイヤーのカプセル化があります。

Web アプリを作成する前に、まず Web マップの対象レイヤーをすべて集める必要があります。 最初に、ArcGIS Online で新しい Web マップを設定します。

1. 「ArcGIS の組織アカウント」にサイン インします。

   注意:

   組織アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。

2. リボンの [マップ] をクリックします。

   

   新しいマップが作成されます。

   ヒント:

   新規セッションが開いている場合、[マップ] をクリックすると新規マップが開きます。 新規セッションが開いていない場合は、既存のマップ (最後に使用していたマップ) が開きます。 既存のマップが開いた場合は、[新規マップ] をクリックします。

   

   次に、対象レイヤーを追加してマップの整理を開始します。 2014 年の地滑りの直後にキャプチャした画像が最初のレイヤーです。

   注意:

   今回のチュートリアルではこのレイヤーがあらかじめ ArcGIS Online に公開されています。 実際のプロジェクトでは、通常はユーザーか組織がこのレイヤーを公開しています。 ArcGIS Living Atlas of the World など、信頼できるソースが提供する既存のレイヤーを使用することもできます。

3. [レイヤー] ウィンドウの [追加] をクリックします。

   

   [レイヤーの追加] ウィンドウが表示されます。

4. [レイヤーの追加] ウィンドウで、[マイ コンテンツ] をクリックして [ArcGIS Online] を選択します。
5. 検索バーに「Aerial Imagery Oso Slide Area owner: esri_event」と入力します。

   複数の結果が表示されます。

6. [Aerial Imagery Oso Slide Area] レイヤーの [追加] ボタンをクリックします。

   

   レイヤーがマップに追加され、マップでレイヤーの範囲が拡大表示されます。 このレイヤーには、ワシントン州スノホミッシュ郡の農村地区 (シアトルの北) で 2014 年に発生したオソの地滑りの直後にキャプチャされた画像が含まれています。 画像の中心にある薄い色のシェープは地滑りの影響によるものです。 地滑りは北側の丘の上で始まり、一気に坂を下って川をせき止め、付近の高速道路を塞いで、スチールヘッド ドライブ地区を完全に覆い隠しました。 この悲劇的な破壊によって、43 人もの人々が命を落としました。

   構築しようとしているマップは大半が画像で構成されるため、衛星画像をベースにしたベースマップを選択します。

7. [コンテンツ] (暗い背景の) ツールバーにある [ベースマップ] をクリックします。 [衛星画像] ベースマップを選択します。

   

   このベースマップは、世界全体の衛星画像を表示し、残りのレイヤーの背景として機能します。 次に、地滑りの影響の境界を表示するためのポリゴン レイヤーを追加します。

8. [コンテンツ] ツールバーの [レイヤー] をクリックします。 [レイヤー] ウィンドウの [追加] をクリックします。
9. [ArcGIS Online] で「Oso Mudslide Impact Area owner:Learn_ArcGIS」を検索します。 [Oso Mudslide Impact Area] レイヤーを追加します。

   レイヤーがマップに追加されます。

   

   このレイヤーは、地滑り自体、地滑りにより近くのスティルアクアミッシュ川がせき止められたことで東側で引き起こされた洪水を含む、地滑りの影響の境界を表しています。 次に、画像が隠れてしまわないようにシンボル化を変更します。

10. [レイヤーの追加] ウィンドウの上部にある戻る矢印をクリックします。

    

    [レイヤー] ウィンドウには、これまでに追加したすべてのレイヤーがリスト表示されます。

11. [Oso Mudslide Impact Area] が選択されていることを確認します。 [設定] (明るい背景の) ツールバーで、[シンボル] をクリックします。

    

12. [スタイル] ウィンドウで、[スタイルの選択] の [場所 (単一シンボル)] で、[スタイル オプション] をクリックします。

    

13. [シンボル スタイル] で編集ボタンをクリックします。
14. [シンボル スタイル] ウィンドウで [色なし] アイコンをクリックします。 [アウトライン色] で、編集ボタンをクリックします。

    

15. [色選択] ウィンドウで、[#] に「ff0000」と入力して、Enter キーを押します。 [完了] をクリックします。

    

16. [アウトライン幅] で、値を [5] に増やします。

    

17. [スタイル オプション] ウィンドウで [完了] をクリックします。 [完了] を再度クリックします。

    これで、画像を不明瞭にすることなく、影響の境界がマップに表示されるようになりました。

    

    次に、より短くてわかりやすい名前にレイヤー名を変更します。

18. [レイヤー] ウィンドウの [Oso Mudslide Impact Area] レイヤーで、[オプション] ボタンをクリックして [名前の変更] を選択します。

    

19. レイヤー「Impact area」の名前を変更し、[OK] をクリックします。
20. 同様に、[Aerial Imagery Oso Slide Area] レイヤーの名前を「Postevent imagery」に変更します。

履歴ベースマップを追加

マップには、デフォルトの画像ベースマップに現在の地形が表示されるという問題があります。 比較のために、地滑り発生前の地形を表示するベースマップを用意しておくとさらに便利です。 このために、履歴画像レイヤーをベースマップとして追加します。

1. [コンテンツ] ツールバーの [ベースマップ] をクリックします。 [ベースマップ] ウィンドウで [現在のベースマップ] をクリックします。

   

2. [衛星画像] の下の [追加] ボタンをクリックします。

   

3. [レイヤーの追加] ウィンドウで、[ArcGIS Online] で「Oso_2012 owner:Learn_ArcGIS」を検索します。 [Oso_2012] レイヤーで [追加] ボタンをクリックします。

   

4. ウィンドウの上部にある戻る矢印をクリックします。 必要に応じて、2012 年の画像が表示されるまで、マップを拡大します。

   

   これで、新しいレイヤーがベースマップの一部になり、災害前の地形が表示されるようになりました。 これはオソで地滑りが発生する 2 年前の 2012 年にキャプチャされた画像なので、地滑りで破壊される前のスチールヘッド ドライブ地区が表示されます。 一部の画像は地滑り後に撮られた画像でカバーされています。

   [Oso_2012] の画像の範囲外までユーザーが縮小すると、通常の画像ベースマップが表示され、シームレスなエクスペリエンスが実現されます。

5. [コンテンツ] ツールバーの [レイヤー] をクリックします。
6. [レイヤー] ウィンドウで [Postevent imagery] をポイントし、[表示設定] ボタンのオンとオフを切り替えて災害前後の地形を比較します。

   

   スチールヘッド ドライブ地区が地滑りによって完全に埋没した様子がわかります。

   

   注意:

   画面のサイズによっては、2 つのレイヤーの違いを確認するために拡大することが必要になります。

   より正確な範囲を選択したらマップを保存します。

7. 必要に応じて、[Postevent imagery] レイヤーを表示します。
8. [Impact Area] レイヤーで、[オプション] ボタンをクリックして [ズーム] を選択します。

   マップ範囲に影響の境界全体が表示されます。

9. [コンテンツ] ツールバーで [保存して開く] をクリックして [名前を付けて保存] を選択します。

   

10. [マップの保存] ウィンドウで、次の情報を入力します。
    • [タイトル] に「2014 Oso Mudslide Imagery and Extent」と入力します。
    • [タグ] で「Oso」、「Washington」、「mudslide」と入力し、各単語の後で Enter キーを押します。
    • [サマリー] に「This web map displays the 2014 Oso mudslide impact area (estimated) and imagery of the aftermath」と入力します。

    

11. [保存] をクリックします。

スケッチ レイヤーの追加

次に、わかりやすくするためにマップにメモを追加します。 スケッチ レイヤーを使用してこれらのメモを追加します。 スケッチ レイヤーの作成は、矢印やラベルなど、少量のフィーチャをマップに追加する良い方法です。 スケッチ レイヤー内のフィーチャはマップと一緒に保存されるため、マップ作成者しか、フィーチャの編集と保存ができません。

1. [Postevent imagery] レイヤーをオフにします。
2. [コンテンツ] ツールバーの [追加] をクリックして、[スケッチ レイヤーの作成] を選択します。

   

   [スケッチ] ウィンドウが表示されます。 さらに、スケッチ レイヤーのジオメトリに対するオプションを含むツールバーがマップに表示されます。

   注意:

   [新しいスケッチ レイヤー] ウィンドウが表示された場合、これは閉じてもかまいません。

3. マップ ツールバーの [ライン] ボタンをクリックします。

   

   [スケッチ] ウィンドウが切り替わり、ライン フィーチャのシンボル オプションが表示されます。

4. [スケッチ] ウィンドウの [色] で、シンボルの編集をクリックします。 色が [#ffffff] であることを確認し、[完了] をクリックします。
5. [幅] で [6] を選択します。 [矢印] で、右側の終端が矢印の形になっているシンボルを選択します。

   

6. 地滑りが始まったエリアのマップをクリックします。

   マップ上にポイントが表示され、そこからラインが伸びたラインをマウス ポインターで操作します。

7. スチールヘッド ドライブ地区の場所をダブルクリックして終点矢印を配置し、ラインを完成させます。

   矢印があることで、地滑りがどの方向から発生したのかがわかります。

   

   注意:

   矢印を変更するには、マップ ツールバーで [選択] ボタンをクリックします。 マップ上でラインをクリックして選択します。 フィーチャのハンドルをドラッグすると、サイズ変更や回転を行うことができます。

   次に、ラベルをいくつか追加します。

8. マップ ツールバーで [テキスト] ボタンをクリックします。

   

   [スケッチ] ウィンドウが切り替わり、テキスト オプションが表示されます。

9. マップ上で、地滑り矢印の開始点の上の場所をクリックします。 [スケッチ] ウィンドウの [コンテンツ] でテキストを「Landslide」に変更します。

   

   テキストがマップ上で更新されます。 テキストにハローを追加して、ベースマップからくっきりと目立つようにします。

10. [スケッチ] ウィンドウで、[ハロー] をオンにします。 [ハロー] の [色] で、編集ボタンをクリックします。

    

11. [色選択] ウィンドウの [#] の横に「2b2b2b」と入力し、Enter キーを押します。 [完了] をクリックします。

    マップ上でテキスト フィーチャがはっきりと表示されるようになりました。

    

    注意:

    テキスト フィーチャの位置を変更する必要がある場合は、マップ ツールバーの [選択] ボタンをクリックします。 テキスト フィーチャをクリックして選択します。 フィーチャ移動シンボルにカーソルが変化するまで、テキスト フィーチャにポイントします。 目的の位置までテキスト フィーチャをドラッグします。

12. 同様に、(被災エリアの東側に位置する) 洪水の上流位置、およびスチールヘッド ドライブ地区にラベルを付けるためのテキスト フィーチャを作成します。 どちらのテキスト フィーチャも黒色のハローが施されていることを確認します。

    

    追加したテキスト フィーチャはラベルです。 次に、被災地区を示す点線を追加します。

13. マップ ツールバーの [ライン] ボタンをクリックします。 マップ上で、[スチールヘッド ドライブ地区] テキスト フィーチャの下をクリックして、地区の中央部を形成する家屋グループの付近をダブルクリックします。

    

14. [スケッチ] ウィンドウの [パターン] で、中サイズの破線の点線を選択します。

    

15. [幅] に「4」と入力します。

    マップ上のラインのストローク スタイルが更新されます。

    

    これでマップ メモ レイヤーは完成です。 次に、マップを完成させて共有します。

16. [スケッチ] ウィンドウを閉じます。 [レイヤー] ウィンドウで [Postevent imagery] レイヤーを再度オンにします。
17. マップで、テキストが画像よりも大きくなりすぎない程度に、すべてのレイヤーが表示されるまで縮小します。
18. [レイヤー] ウィンドウの [スケッチ] レイヤーで、[オプション] ボタンをクリックし、[名前の変更] を選択します。 レイヤーの名前を「Reference Information」に変更します。
19. [コンテンツ] ツールバーで [保存して開く] をクリックして [保存] を選択します。

    最後に、マップを共有します。

20. [コンテンツ] ツールバーの [マップの共有] をクリックします。 [共有] ウィンドウで、[すべての人に公開 (パブリック)] を選択して、[保存] をクリックします。

    災害前後のすべての画像、およびユーザーがマップを理解しやすくするための補足データとメモを含むオンライン マップを構築しました。 災害前の画像と災害後の画像の比較は、この地滑りが引き起こした壊滅的な被害について、説得力のあるストーリーを伝えます (もっとも、レイヤーのオン/オフを切り替えるよりも画像を並べて比較する方が、操作が簡単です)。 次に、Web アプリのマップをカプセル化して機能を強化し、ユーザーにとっての使い勝手を向上させます。

アプリの作成

Web マップが完成したので、これを Web アプリに追加して考えられる最良の方法で情報を提示します。 アプリは、Web マップを取得し、ユーザー エクスペリエンスを向上させる機能とツールを追加します。 ここでの目的は、オーディエンスが簡単に画像を比較できるようにすることです。 スワイプ機能を備えたアプリを作成し、ユーザーが災害前後の画像をスワイプで切り替えられるようにします。

1. [コンテンツ] ツールバーで [アプリの作成] ボタンをクリックし、[Instant Apps] を選択します。

   

   ArcGIS Instant Apps が新しいタブで開きます。 Instant Apps では、アプリの作成に使用されるアプリ テンプレートが提供されます。ここでは、スワイプ機能を含む [メディア マップ] テンプレートを使用します。

2. [メディア マップ] の [選択] をクリックします。

   

   ヒント:

   テンプレートを選択する前にテンプレートの詳細を確認するには、テンプレート名の横にある矢印をクリックします。

3. [アプリの作成 - メディア マップ] ウィンドウの [タイトル] に「Oso Mudslide Before and After」と入力します。

   

4. [アプリの作成] をクリックします。

   テンプレートに基づいてアプリが作成されます。 マップが表示され、カスタマイズのためのオプションが含まれます。

   

   マップの片側にはアプリを構成するウィンドウがあります。 このウィンドウには 4 つのステップがあり、それぞれが一連の異なるオプションを提供します。 まず、アプリのスワイプ機能を有効にします。スワイプ ツールを検索すると、ツールを追加することができます。

5. [検索設定] をクリックします。 [検索設定] ウィンドウで「Swipe」を検索し、結果の中から [スワイプ ツール] をクリックします。

   

   高速モードをオフにするよう求める通知が表示されます。 高速モードは、Instant Apps でアプリを構成する際のデフォルト モードで、効率的な構成を行えます。 スワイプ ツールは高速モードの設定に含まれないため、スワイプ ツールを有効にするには、高速モードをオフにする必要があります。

6. [高速モードをオフにする] ウィンドウで、[続行] をクリックします。

   対話機能のオプションを含む [対話機能] ウィンドウが表示されます。

7. [スワイプ ツール] をオンにします。

   

   ツールを構成するためのオプションが表示されます。 スワイプするレイヤーを設定し、スワイプ バーの方向を変更できます。 デフォルトで災害後の画像を表示し、スワイプ ツールが使用されると非表示になるよう設定します。 この効果を実現するには、スワイプ ツールで前に表示するレイヤーとして災害後の画像を指定します。

8. [前に表示するレイヤーの選択] で [Postevent imagery] を展開します。 [画像] をオンにします。

   

9. マップ上で、スワイプ バーを前後にドラッグして機能をテストします。

   

   このツールを使用すると、災害前後の地域の様子をより簡単に比較できるようになります。 説得力のあるこの画像には、スチールヘッド ドライブ地区がこの地滑りによって完全に埋没し、ほとんど何も形跡が残っていないことが示されています。

その他の機能の追加

次に、アプリに便利な機能をさらに追加します。 具体的には、ユーザーが災害の規模を理解できるよう、縮尺記号と計測ツールを追加します。

1. [検索設定] をクリックし、「Scalebar」を検索します。 検索結果のリストで [縮尺記号] をクリックします。

   

   [対話機能] ウィンドウが表示されます。

2. [ナビゲート] の下で [縮尺記号] をオンにします。

   

   マップの下隅に縮尺記号が追加されます。

   

   このウィンドウには計測ツールもあるので、検索する必要はありません。

3. [対話機能] ウィンドウで [計測ツール] をオンにします。

   

   マップの上隅に [計測を開く] ボタンが追加されます。

   

4. [計測を開く] ボタンをクリックします。 計測ツールバーで [面積の計測] ボタンをクリックします。

   

5. マップ上でポリゴンを描画します。 ダブルクリックして描画を終了します。

   描画したポリゴンの面積が平方メートル単位で、周長がメートル単位で表示されます。

   

   このツールを使用すると、地滑りの距離と、影響を受けた面積を計測できます。

6. [消去] ボタンをクリックします。

   

   計測が消去されます。

7. [計測を開く] ボタンをクリックし、計測ツールバーを閉じます。

   最後に、[凡例を開く] ボタンを削除します。これは [計測を開く] ボタンの下にあります。 このボタンはアプリにデフォルトで含まれていますが、このマップでは便利ではありません。

8. [検索設定] をクリックし、「Legend」を検索します。 検索結果のリストで [凡例] をクリックします。

   凡例オプションを含む [情報] ウィンドウが表示されます。

9. [凡例] をオフにします。

   

   [凡例を開く] ボタンがアプリから削除されます。

アプリの完成

アプリを起動してウィジェットをテストする前に、アプリの目的に関するテキスト情報を追加し、テーマを変更します。

1. [情報] をクリックします。

   

   [概要] ウィンドウが表示されます。

2. [アプリの詳細] をクリックします。

   

3. [概要パネル] をオンにします。 [概要パネルのコンテンツ] で [編集] をクリックします。

   

4. [概要パネルのコンテンツ] ウィンドウで、次のテキストをコピーして貼り付けるか、入力します。

   「This app shows imagery from the 2014 Oso mudslide in Snohomish County, Washington. Use the Swipe tool to compare imagery from before and after the slide.

   The red outline shows the extent of the slide's impact, including flooding.

   This disaster led to the deaths of 43 people and caused millions of dollars of damage.」と入力します。

   

5. [閉じる] をクリックします。

   マップ上部の [計測を開く] ボタンの横に [概要パネルを開く] ボタンが表示されます。 [概要パネルを開く] ボタンをクリックすると、ウィンドウにテキストが表示されます。

   次に、アプリのタイトルを含むヘッダーを追加します。

6. [アプリの詳細] ウィンドウで [ヘッダー] をオンにします。

   

   マップ上部にヘッダーが表示されます。

   

   次に、アプリのテーマを変更します。

7. [テーマとレイアウト] をクリックします。

   

8. [テーマとレイアウト] ウィンドウで [テーマ] をクリックします。
9. モードの選択] で [暗色] を選択します。

   

   マップのヘッダーとボタンが白から黒に変わります。 黒色はこの災害の重大度にマッチした深刻な雰囲気を想起させます。

   これで、アプリの構成が終了しました。次に、アプリを公開します。

10. [テーマ] ウィンドウの下部にある [公開] をクリックします。

    

11. [公開] ウィンドウで、[確認] をクリックします。

    しばらくすると、アプリが公開されます。 [共有] ウィンドウが開き、アプリを共有するためのオプションが表示されます。

12. [共有] ウィンドウで、[起動] をクリックします。

    アプリが新しいブラウザー タブで起動します。

    

13. 必要に応じ、完成したアプリの機能 (スワイプ ツール、計測ツール、概要パネルなど) をテストします。

メタデータの追加

アプリを完成させる最後の手順は、メタデータの追加です。 メタデータとは、アプリの内容について説明した情報です。 すべての ArcGIS Online アイテムにはメタデータが存在します。この情報には、アイテム ページからアクセスできます。

1. アプリを閉じます。 アプリ エディターの上部にあるオプション ボタンをクリックし、[コンテンツ] を選択します。

   

   [Oso Mudslide Before and After] Web マッピング アプリケーションが [コンテンツ] ページに表示されます。 アプリを他のユーザーに表示するには、その前に、アプリとそのアプリの基となるマップの両方が共有される必要があります。 マップはすでに全員と共有しているので、次はアプリを共有します。

2. [Oso Mudslide Before and After] アプリの横にあるボックスをオンにします。

   

3. アイテムのリストの上にある [共有] をクリックします。 [共有] ウィンドウで、[すべての人に公開 (パブリック)] を選択します。
4. [保存] をクリックします。

   アプリが共有されたところで、次はメタデータを追加します。

5. [Oso Mudslide Before and After] Web アプリのタイトルをクリックします。

   詳細ページが表示されます。 サマリーやタグなど、一部のメタデータは、最初にアプリを作成したときに入力しました。ただし、アプリにはまだ、説明と著作権が指定されていません。 また、このアプリには一般的なデフォルトのサムネイルが使用されています。

   最初に、デフォルトのサムネイルを置き換えます。 このサムネイルは、アプリのスクリーン キャプチャ、選択した画像、または Learn ArcGIS サイトから提供される画像と置き換えることができます。

6. サムネイル画像の上にある [サムネイルの編集] をクリックします。

   

7. [サムネイルの作成] ウィンドウの [画像のアップロード] で [参照] をクリックします。
8. サムネイルとして使用するファイルに移動して、そのファイルをダブルクリックします。 [サムネイルの作成] ウィンドウで [保存] をクリックします。

   次に、説明を追加します。

9. アイテム ページで、[説明] の横にある [編集] をクリックします。 次の説明をコピーして貼り付けます。

   このマップは、2014 年に発生したオソの地滑りの影響を受けたエリア (推定) と発生後の映像を示しています。 The Impact Area Boundary layer was created from remote-sensing imagery and provided by FEMA and the NGA. The Post-Event Imagery layer is an image of the Oso mudslide area taken two days after the event.」と入力します。

10. [保存] をクリックします。
11. [利用規約] で、[編集] をクリックして、「None」と入力します。 [保存] をクリックします。
12. ページの端の下にある [著作権 (帰属)] で [編集] をクリックして、「Esri Disaster Response Program, FEMA, NGA, Snohomish County, and Washington Department of Transportation」と入力します。

    これらは、データを最初に作成した組織です。

13. [保存] をクリックします。

    メタデータがアイテム詳細に追加されます。 これでアプリが完成しました。

このチュートリアルでは、2014 年にオソで発生した地滑りに関連する既存の画像レイヤーを取得し、ArcGIS Online の Web マップにそれらをまとめました。 その後、Web AppBuilder を使って Web マップを Web アプリにカプセル化しました。 仕様に合ったユーザー エクスペリエンスを提供するために、ウィジェットを使ってアプリをカスタマイズしました。 その後、マップを共有して、メタデータを追加しました。 これで、作成したアプリを対象の利用者に表示して、災害についてのストーリーを伝えることができます。

他のチュートリアルについては、チュートリアル ギャラリーをご覧ください。

使用許諾

• Aerial Imagery Oso Slide Area タイル レイヤーは、ワシントン州運輸局 (WSDOT) から提供され、Esri 災害対応プログラムによってリホストされています。
• Oso Mudslide Impact Area フィーチャ レイヤーの一部は、Esri Disaster Response Program、FEMA、NGA、および Snohomish County が提供するデータと解析に基づいています。
• ギャラリーの画像は DVIDS から入手しました。
• Topographic の出典: Esri、HERE、Garmin、FAO、NOAA、USGS、Intermap、METI、OpenStreetMap の投稿者、GIS ユーザー コミュニティ
• World Imagery の出典: Esri、Maxar、Earthstar Geographics、GIS ユーザー コミュニティ。