メニュー

サポート

My Esri サイン イン

サポート トップ  >  操作方法  >  表示  >  ArcGIS Maps SDK for JavaScript : マップの表示

FAQ
ArcGIS Maps SDK for JavaScript : マップの表示

ナレッジ番号：5741 | 登録日：2024/03/26 | 更新日：2024/04/22

概要

ArcGIS Maps SDK for JavaScript を使用してマップを表示する方法は、主に 2 つの方法があります。
1 つは Map クラスと MapView クラスを使用する方法であり、2 つ目は WebMap クラスと MapView クラスを使用する方法です。

Map クラスと MapView クラスを使用した方法

Map クラスと MapView クラスを使用した方法を説明します。
※ 3D マップの場合は、Map クラスと SceneView クラスを利用します。

Map クラスは、ArcGIS の地図を定義するためのコアクラスです。地図の基本的な設定、レイヤーの追加、スタイルの指定などマップの管理を行います。
MapView クラスは、地図の表示と操作を管理します。地図の表示領域、ズームレベル、中心位置などのビューの設定を行います。

手順

HTML 
// マップを表示するための HTML 要素を用意します。
<div id="viewDiv" style="width: 100%; height: 500px;"></div>
JavaScript
// マップの作成
const map = new Map({
    basemap: "topo-vector" // ベースマップの設定
});

// マップの表示
const view = new MapView({
    container: "viewDiv", // マップを表示するdiv要素
    map: map, // 使用するマップ
    center: [longitude, latitude], // マップの中心座標
    zoom: 10 // デフォルトのズームレベル
});

上記の手順に従うと、viewDiv という ID を持つ HTML 要素内に地図が表示されます。

WebMap クラスと MapView クラスを使用した方法

WebMap クラスは、ArcGIS Online や Portal for ArcGIS などポータル サイト上で作成した Web マップを表示するためのクラスです。
WebMap クラスではベースマップの定義、追加しているレイヤー、スタイルの定義、ポップアップの設定などマップに関する基本的な設定がポータル サイト上で既に行われており、その設定のまま、Web アプリケーションで表示できる特徴がございます。Web マップ ID は、詳細ページ URL の最後の値です。例えば、Topographic マップの詳細ページ URL が「https://www.arcgis.com/home/item.html?id=67372ff42cd145319639a99152b15bc3」の場合、Web マップ ID は「67372ff42cd145319639a99152b15bc3」になります。
特定の WebMap をロードできたら、MapView クラスを使用して、地図の表示を設定します。
※ 3D マップの場合は、WebScene クラスと SceneView クラスを利用します。

手順  

HTML 
// マップを表示するための HTML 要素を用意します。
<div id="viewDiv" style="width: 100%; height: 500px;"></div>
JavaScript 
// Webマップのロード
const webmap = new WebMap({
    portalItem: {
        id: "WebMap の ID"
    }
});

// マップの表示
const view = new MapView({
    container: "viewDiv", // マップを表示するdiv要素
    map: webmap // 使用するWebマップ
});

上記の手順に従うと、viewDiv という ID を持つ HTML 要素内にポータル サイト上で作成した Web マップが表示されます。

メタデータ

カテゴリ

製品

このナレッジはお役に立ちましたか？