出典 : 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.31/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.31/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.31/arcgis-map-components.esm.js"></script>
ArcGIS Online または ArcGIS Enterprise のポータルの WebMap を使用する場合は、arcgis-map
タグを HTML に追加し、オプションの item-id
を割り当てます。ステップバイステップの手順については、チュートリアルを参照してください。
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>
それが完了したら
arcgisViewReadyChange
イベントを使用して、ビューの準備ができたとき、またはビューのマップやシーンが置き換えられたときを監視します。const mapElem = document.querySelector("arcgis-map");
mapElem.addEventListener("arcgisViewReadyChange", (event) => {
const { view, map } = event.target;
});
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]
});