開発の手順 (CDN)

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

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

セットアップ

ArcGIS Maps SDK for JavaScript をアプリに取り込むには、複数の方法があります。 最も一般的な方法は、ArcGIS CDN を使用することです。ファイルは最適化されたクラウド キャッシング経由でダウンロードされるため、アプリケーションをローカルでビルドする必要はありません。 また、アプリケーションを毎回再構築する必要がないため、SDK の新しいバージョンへのアップデートも簡単です。

コンポーネント

コンポーネントについては、HTML に以下のタグを使用して、アプリケーションに CSS とライブラリを追加します。

  <!-- Load Map Components from CDN-->
  <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.30/"></script>
  <script type="module" src="https://js.arcgis.com/map-components/4.30/arcgis-map-components.esm.js"></script>

ArcGIS Online または ArcGIS Enterprise のポータルの WebMap を使用する場合は、arcgis-map タグを HTML に追加し、オプションの item-id を割り当てます。ステップバイステップの手順については、チュートリアルを参照してください。

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

それが完了したら

  • basemap、center、zoom などのプロパティを設定します。
  • arcgisViewReadyChange イベントを使用して、ビューの準備ができたとき、またはビューのマップやシーンが置き換えられたときを監視します。
  • コア API を使用してカスタム JavaScript ロジックを追加します - ステップバイステップの手順については、チュートリアルを参照してください。
const mapElem = document.querySelector("arcgis-map");
mapElem.addEventListener("arcgisViewReadyChange", (event) => {
  const { view, map } = event.target;
});

API

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

<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.30/"></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]
});