技術 Tips 集
ArcGIS Maps SDK for JavaScript
開発の手順

開発の手順

出典：ArcGIS Maps SDK for JavaScript - Get Started

ArcGIS Maps SDK for JavaScript には、コア API と、API の機能をすぐに使用できる UI 要素にカプセル化する Web コンポーネント ライブラリーのセットが含まれています。アプリケーションのニーズに応じて、6 つのコンポーネント ライブラリー（Map、Charts、AI（ベータ版）、Embeddable）、Coding、Commonのどれからでもコンポーネントを使用することができます。

SDK は、一貫性とアクセシビリティーを備えたユーザー エクスペリエンスを実現するため、Esri の Calcite Design System とも統合されています。Calcite は、豊富な Web コンポーネント、アイコン、カラー スキーム、デザイン パターンを含む完全な UI ツールキットを提供します。

JavaScript Maps SDK の使用を開始する最適な方法は、目的と要件によって異なります。

  • ローカル パッケージをインストールせずに、純粋な JavaScript と HTML でアプリを構築する場合 — ArcGIS CDNを使用したアプリの作成を参照
  • テンプレートからプロジェクトを作成する場合 — npm を使用したアプリの作成を参照

前提条件

ArcGIS Maps SDK for JavaScript を使用してコンテンツ、サービス、または組織にアクセスするには、ArcGIS Location Platform アカウント、ArcGIS Online アカウント、または ArcGIS Enterprise アカウントが必要です。必要なアカウントの種類、ユーザータイプ、およびロールは、アクセスする必要があるリソースと実行したい操作によって異なります。

アカウントをお持ちでない場合は、以下のいずれかのオプションを選択してください

ArcGIS アカウント：ArcGIS Location Platform または ArcGIS Online アカウントが必要です。

アクセス トークン

アプリケーションが認証に ArcGIS アイデンティティーのみを使用している場合は、このセクションをスキップできます。詳細については、セキュリティと認証に関するドキュメントを参照してください。

ベースマップ、ジオコーディング、ルート検索などの ArcGIS サービスにアクセスするには、アクセス トークンが必要です。ポータルにアクセスし、特定のニーズに合わせてカスタム権限とリファラーを設定したアクセス トークンを作成してください。チュートリアルやサンプルでは、指示で必要とされる場合にアクセス トークンを含めてください。グローバル API キーを使用できるほか、特定のクラスに対してより細かい設定が可能な API キーも使用できます。

詳細については、API キーの作成チュートリアルをご覧ください。

ArcGIS CDN を使用してアプリを作成

このセクションでは手動設定について説明します。スターター プロジェクトをご希望の場合は、CDN テンプレートをご利用ください。

JavaScript Maps SDK は、ArcGIS CDN を使用して、標準的な JavaScript および HTML アプリケーションに統合できます。このアプローチは最適化されたクラウド キャッシュを活用し、ローカル ビルドの要件を排除し、最新の SDK バージョンへの更新を容易にします。

セットアップ

開始するには、基本的な HTML ファイルの <head> セクションに ArcGIS CDNの <script> を含めてください。アプリケーションにコア API ライブラリー、すべてのコンポーネント パッケージ、および CSS を追加するためのメインのエントリー ポイントです。 CDN は MAJOR.MINOR 形式で提供され、パッチ固有のバージョンは MAJOR.MINOR.PATCH 形式で提供されます。最新のパッチ バージョンについてはリリース ノートを参照してください。

index.html
<!-- CDNからArcGIS Maps SDK for JavaScriptを読み込む -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>

CSSの設定

カスタム CSS を追加して、コンポーネントがアプリケーションに表示されるようにします。これは、CDN から ArcGIS ライブラリーをインポートした後、<head> セクションの最後の項目である必要があります。

index.html
<style>
  html,
  body {
    height: 100%;
    margin: 0;
  }
</style>

Calcite モードで明るいまたは暗いテーマを選択してください。

まだ SDK のコンポーネントに移行しておらず、ウィジェットを使用している場合は、今すぐコンポーネントへの移行をご検討ください。ウィジェットを使用する場合、および／または MapView または SceneView をプログラムで初期化する場合、コア API の CSS スタイルシートを手動で含める必要があります。

index.html
<!-- ウィジェット用の CSS を読み込みます -->
<link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />

レイアウトの作成

HTMLの <body> 要素に 2D Map コンポーネントまたは 3D Scene コンポーネントを追加し、ArcGIS Online または ArcGIS Enterprise ポータルから WebMap または WebScene を使用する場合は、オプションの item-id を割り当てます。Map または Scene のスロットを使用して、マップやシーン内でズームなどの他のコンポーネントを配置します。

index.html
<!-- ベースマップ、範囲、ズームをプログラムで設定する必要はありません -->
<!-- この情報はすべて WebMap から得られます -->
<arcgis-map item-id="02b37471d5d84cacbebcccd785460e94">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-map>

WebMap または WebScene を使用していない場合、代わりに Map コンポーネントまたは Scene コンポーネントでベースマップ、中心点、ズームを手動で設定できます。

コア API モジュールの追加

HTML の <body> 内かつ最下部に配置した <script> タグ内で、コア API を使用してプロパティの設定、変更の監視、カスタム JavaScript ロジックの追加が可能です。スクリプトは <script type="module"> としてマークされていることを確認してください。

コア API のモジュールは、グローバルな $arcgis.import() メソッドを介してロードできます。このメソッドはモジュールパスまたはモジュール パスの配列を受け取り、要求されたモジュールで解決するプロミスを返します。各 API リファレンス ページの上部にモジュール識別子が表示されています。詳細は Graphic を参照してください。

$arcgis.import() メソッドは、CDN 経由で使用する場合に限り ArcGIS Maps SDK for JavaScript 専用であり、標準的な ES モジュール システムのネイティブ機能ではありません。

以下のコードはマップのビューが準備完了になるまで待機します。ビューの準備が整ったら、追加の機能を追加できます。

index.html
<script type="module">
  const Graphic = await $arcgis.import("@arcgis/core/Graphic.js");
  const viewElement = document.querySelector("arcgis-map");
  // ビューの準備が整うまで追加機能の実装を待ってください
  await viewElement.viewOnReady();

  // ...

  // Graphic を作成し、それにジオメトリーとシンボルを追加する
  const pointGraphic = new Graphic({
    geometry: point, // ポイント ジオメトリー
    symbol: markerSymbol, // ポイントを描画するためのシンボル
  });
  viewElement.graphics.add(pointGraphic);
</script>

npm でアプリを作成

ローカル ビルドで作業する場合、JavaScript Maps SDK を手動でインストールするか、@arcgis/create CLI ツールを使用するか、Esri/jsapi-resources GitHub リポジトリーにアクセスしてアプリケーション テンプレートをダウンロードできます。このリポジトリーには、最初のアプリケーションを素早く構築するための様々なテンプレートが含まれています。 これらのテンプレートは、SDK のコア API、コンポーネント、OAuth、および Calcite の操作方法を示しています。

手動インストール

プロジェクトで Map コンポーネントを使用するには、@arcgis/map-components パッケージとその依存関係をインストールしてください。

npm install @arcgis/map-components @arcgis/core @esri/calcite-components
yarn add @arcgis/map-components @arcgis/core @esri/calcite-components
pnpm install @arcgis/map-components @arcgis/core @esri/calcite-components

フレームワークおよびツールのセットアップに関する追加の設定情報については、以下のガイド項目を参照してください。

@arcgis/create の使用

@arcgis/create CLI ツールは、npm init または npx のいずれかを使用して実行できます。開始する前に、Node.js および npm の最新版の長期サポート (LTS) バージョンを使用していることを確認してください。

npm init @arcgis または npx @arcgis/create を実行して、新しいマッピング アプリケーションを素早く作成します。

npx を使用する際、すべての対話型プロンプトをスキップする CLI オプションを渡すこともできます。

# CLI options:
#   -n, --name <name>          Name of the project
#   -t, --template <template>  Template to use

# Vite アプリ テンプレートと SDK 統合
npx @arcgis/create -n my-arcgis-app -t vite

その他のテンプレートには以下が含まれます。

# SDK 統合済み React アプリ テンプレート
npx @arcgis/create -n my-arcgis-app -t react
# SDK 統合済み Angular アプリ テンプレート
npx @arcgis/create -n my-arcgis-app -t angular
# SDK 統合済み Vue アプリ テンプレート
npx @arcgis/create -n my-arcgis-app -t vue
# SDK 統合済み Webpack アプリ テンプレート
npx @arcgis/create -n my-arcgis-app -t webpack
# ArcGIS CDN を使用したバニラ JavaScript の設定
npx @arcgis/create -n my-arcgis-app -t cdn
# SDK のコア API のみ、UI コンポーネントは含まれません
npx @arcgis/create -n my-arcgis-app -t node

追加情報

詳細については、以下の追加リンクをご参照ください。

インストール ガイド