FAQ
ArcGIS Maps SDK for JavaScript : ArcGIS Online で作成した WebMap を表示する
ナレッジ番号:5631 | 登録日:2023/09/28 | 更新日:2024/11/21
概要
ArcGIS Maps SDK for JavaScript では、ArcGIS Online の MapViewer で作成した Web マップをそのまま利用できます。ArcGIS Online の MapViewer を使用すると、迅速かつ簡単に Web アプリケーションを作成して共有できます。Web マップには、ArcGIS Server のマップサービス、イメージサービス、フィーチャサービス、KML、OGC Webサービスなどを含めることができます。また、カンマ区切りで値が格納されているテーブル(.csvまたは.txt)や GPS データの交換フォーマット(.gpx)で格納されたデータを追加することもできます。さらに、Web マップでは、属性表示に使用するポップアップの構成や、ベースマップ、初期表示範囲の指定なども MapViewer で行うことが可能で、ArcGIS Maps SDK for JavaScript で Web マップを利用した際に、それらの設定を引き継いだ状態で使用することができます。
また、ArcGIS Maps SDK for JavaScript はデフォルトで ArcGIS Online を参照しています。Portal for ArcGIS に接続したい場合は、別途設定が必要になりますが、ArcGIS Online のアイテムを使用して ArcGIS Maps SDK for JavaScript を利用する場合、前提の設定は必要ありません。Web アプリケーションでの利用
ArcGIS Online の Web マップからマップを作成
ArcGIS Online の Web マップを使用してマップを作成する場合、ArcGIS Maps SDK for JavaScript では、PortalItem クラスを使用します。最初に必要なモジュールをインポートし、Web マップ ID を使って新しい PortalItem インスタンスを作成します。次に、WebMap クラスのインスタンスを作成し、portalItem プロパティに 作成した PortalItem インスタンスを設定します。
Web マップ ID から作成
ArcGIS Online の Web マップ ID を使用してマップを作成するため、まず Web マップの詳細ページに移動します。Web マップ ID は、詳細ページ URL の最後の値です。例えば、Topographic マップの詳細ページ URL が「https://www.arcgis.com/home/item.html?id=67372ff42cd145319639a99152b15bc3」の場合、Web マップ ID は「67372ff42cd145319639a99152b15bc3」になります。
サンプルコード:require([ "esri/portal/PortalItem", "esri/WebMap", "esri/views/MapView" ], function(PortalItem, WebMap, MapView) { // Web マップの ID を変数に格納 const webMapId = "67372ff42cd145319639a99152b15bc3" // WebマップIDを使って新しいPortalItemを作成する const portalitem = new PortalItem({ id: webMapId }); // PortalItemから新しいWebMapインスタンスを作成する const webMap = new WebMap({ portalItem: portalitem }); // WebMapを使ってMapViewを作成する const view = new MapView({ container: "mapDiv", map: webMap }); });
ArcGIS Online のアイテムを使う際の認証
ArcGIS Online のアイテム(Web マップなど)を Web アプリケーションで使用する際の認証は、以下のポイントに注意して行います。- パブリックなアイテムの場合: パブリックなアイテムは認証を必要としません。アイテムの詳細情報はログインなしでアクセス可能です。
- 非パブリックなアイテムの場合: ユーザーがログインしている場合、SDK は ArcGIS Online に対して自動的に認証します。
Portal.authModeプロパティでサインインのタイミングを指定
- anonymous : サインインしない。アクセス制限されたコンテンツを使用する際に、エラーが返される。
- auto : アクセス制限されたコンテンツを使用する際に、サインインダイアログが表示される(デフォルト)
- immediate : Portal クラスのロード時にサインインする。
// Portal のインスタンスを作成 const portalSite = new Portal(); // 認証処理 portalSite.authMode = “immediate”; // ロード時にサインイン portalSite.load().then(function() { //ロード(サインイン) user = portalSite.user; // サインインしたユーザー user.fetchItems(params); // 指定したフォルダーのアイテムを取得 });
メタデータ
種類
製品