開発の手順 (CDN)

出典 : ArcGIS Maps SDK for JavaScript - Get started with CDN

コード : Map コンポーネントを表示するチュートリアル、または マップ コンポーネントの導入-2D マップの作成 サンプルから始めましょう。

セットアップ

ArcGIS Maps SDK for JavaScript をアプリに組み込む方法はいくつかあります。最も一般的な方法は、ArcGIS CDN を使用することです。ファイルは最適化されたクラウドキャッシュを介してダウンロードされるため、アプリケーションをローカルでビルドする必要がありません。また、SDK の新しいバージョンに更新するのも簡単で、その都度アプリケーションを再ビルドする必要がありません。

コンポーネント

ArcGIS Maps SDK for JavaScript のコンポーネントは、Calcite Design System と SDK のコア API に依存しています。まず Calcite とコア API を読み込む必要があります。

Calcite を読み込むには、スタイルシート リンクとスクリプト タグを含めて Calcite コンポーネントをインポートします。

<!-- Load Calcite -->
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>

次に、SDK のコア API を読み込むには、スタイルシート リンクとスクリプト タグを含めます。

<!-- Load the ArcGIS Maps SDK for JavaScript core API -->
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/4.31/esri/themes/dark/main.css"/>
<script src="https://js.arcgis.com/4.31/"></script>

次に、Map コンポーネント パッケージやその他のコンポーネント パッケージを読み込むには、スクリプト タグ（必要に応じて関連する CSS も）を含めます。

<!-- Load map components -->
<script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>

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

<style>
  html,
  body {
    margin: 0;
  }

  arcgis-map {
    display: block;
    height: 100vh;
  }
</style>

次に、HTML に arcgis-map コンポーネントを追加し、ArcGIS Online または ArcGIS Enterprise ポータルから WebMap を使用する場合はオプションの item-id を割り当てます。item-id が追加されない場合、デフォルトのベースマップは topo-vector になります。詳細な手順については、チュートリアルを参照してください。

<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

それが完了したら、次のことができます：

  • プロパティを設定する（例：ベースマップ、中心、ズーム）
  • 変更を監視する（例：arcgisViewReadyChange イベントを使用してビューが準備完了になったときや、ビューのマップまたはシーンが置き換えられたときに監視）
  • コア API を使用してカスタム JavaScript ロジックを追加する。詳細な手順については、チュートリアルを参照してください。
const mapElem = document.querySelector("arcgis-map");
mapElem.addEventListener("arcgisViewReadyChange", (event) => {
  console.log('Map component is ready', event);

  // Set the zoom property
  mapElem.zoom = 10;
});

API

API の AMD モジュールには、以下のスクリプトタグを使用します :

<link rel="stylesheet" href="https://js.arcgis.com/4.31/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.31/"></script>

HTML に div を追加し、id を割り当てます：

<div id="viewDiv"></div>

それが完了したら、マップを初期化し、カスタム機能を追加し始めることができます :

const map = new Map({
  basemap: "topo-vector"
});

const view = new MapView({
  container: "viewDiv", // reference to the div id
  map: map,
  zoom: 4,
  center: [15, 65]
});