ベースマップ

出典：Mapping APIs and location services - Basemaps

ベースマップとは？

ベースマップはベースマップレイヤーとも呼ばれ、マップとシーンの全体的なビジュアルを提供するレイヤーです。ベースマップには通常は大陸、湖沼、行政境界、道路、都市、地名などの地理的な特徴やラベルが含まれます。ベースマップの最も一般的なデータソースは、ベースマップサービスとデータサービスです。

ベースマップレイヤーを使って以下のようなことができます。

マップとシーンの両方で、世界中のさまざまな地理データの表示
ArcGIS streets、navigation、light gray canvas、OSM streets などのベースマップの表示
自身で指定した色、字体、フォントを使用したベースマップの表示
街路やナビゲーションのベクタータイルレイヤーの表示
衛星画像や陰影起伏図用のマップタイルレイヤーの表示
独自のデータを独自の空間参照で表示

ベースマップの仕組み

ベースマップレイヤーは、マッピングアプリケーションの視覚的な基礎を提供します。ベースマップレイヤーは、一般的にグローバルなデータを含み、マップやシーンに追加される最初のレイヤーです。マップを表示する場合、ベースマップレイヤーが最初に描画され、次にデータレイヤー、グラフィックスレイヤーの順に描画されます。

ベストプラクティス：ほとんどの場合、アプリケーションはフィーチャの選択やポップアップの表示など、ベースマップレイヤーとのやり取りを許可していません。ベースマップレイヤー上にあるデータレイヤーを使用してマップ内のフィーチャの表示や操作をすることができます。

データソースの種類

ベースマップの一般的なデータソースは、ベースマップサービスとデータサービスの 2 つです。

ベースマップサービス

ベースマップサービスは、ベースマップレイヤーのデータを提供する Esri がホストするサービスです。ベースマップサービスには、ベースマップスタイルサービスと静的ベースマップタイルサービスが含まれます。

ベースマップスタイルサービス

ベースマップスタイルサービスは、世界中のベースマップスタイルとデータを提供するロケーションサービスです。各ベースマップスタイルには、地理的なフィーチャとラベルの視覚的なプロパティに固有のセットがあります。このサービスには ArcGIS と OSM のスタイルが含まれます。デフォルトのベースマップスタイルには、streets、navigation、light gray canvas、imagery などがあります。各スタイルのデータは、ArcGIS でホストされているベクタータイルレイヤーとマップタイルレイヤーを通じて提供され、Web メルカトル空間参照に格納されます。このサービスでは、場所、ローカル言語、worldview を表示することもできます。

サービスを利用するための手順は以下の通りです。

スタイルを選択します。
サービスの URL とスタイルを参照します。
- URL : https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/{STYLE_TYPE}/{STYLE}
- スタイルの種類 : ArcGIS または OSM
- スタイルの例 : streets、imagery、navigation、topography、light gray canvas、outdoors など
ベースマップを API で表示します。以下のコード例をご参照ください。

例 : ArcGIS API for Python

from arcgis import GIS

gis = GIS(api_key="YOUR_API_KEY")
map = gis.map()
map.basemap = "streets-navigation-vector"

API リファリンスへ

ArcGIS Maps SDKs は、各スタイルにアクセスするための列挙型またはヘルパークラスを提供します。また、正しい Esri とデータの帰属も表示されます。ただし、オープンソースライブラリを使用する場合は、サービスを直接参照する必要があり、帰属の表示を行う必要がある場合があります。

ArcGIS REST API : さまざまなスタイルと機能の詳細についてはベースマップスタイルサービスを参照してください。

静的ベースマップタイルサービス

静的ベースマップタイルサービスは、世界の範囲のラスターベースマップタイルを提供するロケーションサービスです。各ベースマップスタイルには、地理的なフィーチャとラベルの視覚的なプロパティに固有のセットがあります。このサービスは、streets、navigation、outdoor、light gray canvas など、デフォルトのベースマップスタイルをサポートしています。タイルは Web メルカトル空間参照で 512 x 512 の .png ファイルとして提供されます。またこのサービスは、英語以外の言語での地名ラベル表示もサポートしています。

サービスを利用するための手順は以下の通りです。

ベースマップスタイルを選択します。
サービスの URL とスタイルを参照します。
- URL : https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/{STYLE}
- スタイルの例 : arcgis/navigation、arcgis/streets、arcgis/outdoor、arcgis/light-gray
ベースマップを API で表示します。以下のコード例をご参照ください。

例 : ArcGIS Maps SDK for JavaScript

const basemapStyle = "arcgis/navigation"
// const basemapStyle = "arcgis/streets"
// const basemapStyle = "arcgis/outdoor"
// const basemapStyle = "arcgis/light-gray"
// const basemapStyle = "arcgis/dark-gray"
const basemap = new Basemap({
  baseLayers: [
    new TileLayer({
      url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/${basemapStyle}/static`
    })
  ]
});

const map = new Map({
  basemap: basemap
});

ArcGIS Maps SDKs は、正しい Esri とデータの帰属が表示されます。ただし、オープンソースライブラリを使用する場合は、サービスを直接参照する必要があり、帰属の表示を行う必要がある場合があります。

ArcGIS REST API : サービスパラメーターやアクセス条件の詳細については、Static basemap tiles service を参照してください。

データサービス

フィーチャサービス、ベクタータイルサービス、マップタイルサービスなどのデータサービスは、ArcGIS Online または ArcGIS Enterprise でホストされているデータを含むサービスです。ほとんどの場合、クライアント API でサポートされているデータサービスは、ベースマップのデータソースとして使用できます。データサービスは、ArcGIS のホストレイヤー (アイテム) でアクセスおよび管理できます。

データサービスは通常、ホストされている既存のデータサービスまたは独自のホスト型データサービスを ArcGIS で使用する場合にベースマップに使用します。また、Web メルカトル以外の空間参照を必要とする小規模な地域やエリアのデータを表示する場合にも使用します。

データサービスを利用するための一般的な手順は以下の通りです。

ホストレイヤーおよびデータサービスを検索または作成します。
- ArcGIS Online および ArcGIS Living Atlas of the World で既存のサービスを検索します。
- 独自のデータサービスを作成する方法については、Data hosting を参照してください。
レイヤーのアイテム ID またはサービス URL を取得します。例 :
- レイヤーアイテム : https://www.arcgis.com/home/item.html?id=4d9fb5c0a6344407aec56f47a11482b5
- アイテム ID : 4d9fb5c0a6344407aec56f47a11482b5
- サービス URL : https://services2.arcgis.com/FiaPA4ga0iQKduv3/arcgis/rest/services/State_Geologic_Map_Compilation_%E2%80%93_Geology/FeatureServer/0
ベースマップを API で表示します。ホストレイヤーの表示も参照してください。

例 : ArcGIS Maps SDK for JavaScript

const featureLayer = new FeatureLayer({
    portalItem: {
      id: "4d9fb5c0a6344407aec56f47a11482b5" //  ArcGIS Online 上の State Geologic Map Compilation – Geology を参照
    }
  });
  const basemap = new Basemap({
    baseLayers: [featureLayer]
  });

チュートリアルへ

ArcGIS Maps SDKs は、ホストレイヤーのアイテム ID またはサービス URL を使用してデータサービスにアクセスできます。一方、オープンソースライブラリは、サービス URL を使用してデータサービスにアクセスします。

ベースマップ用に独自のサービスを作成する方法については、Data services > Introduction を参照してください。

コード例 : ベースマップスタイルサービス

ベースマップスタイルの表示

この例では、ベースマップのデータソースとしてベースマップスタイルサービスを使用する方法を示します。そのためには、デフォルトのベースマップスタイルの 1 つを使用します。すべてのスタイルについては、ベースマップスタイルサービスを参照してください。

ステップ

マップを作成します。
ベースマップスタイルサービスからスタイルを参照します。
ベースマップをマップに追加します。

例 : ArcGIS Maps SDK for JavaScript

esriConfig.apiKey = "YOUR_ACCESS_TOKEN"

const map = new Map({
  basemap: "arcgis/streets",
  //basemap: "arcgis/navigation"
  //basemap: "arcgis/topographic"
  //basemap: "arcgis/outdoor"
  //basemap: "arcgis/light-gray"
  //basemap: "arcgis/imagery"
  //basemap: "osm/standard"
  //basemap: "osm/navigation"
  //basemap: "osm/blueprint"
})

const view = new MapView({
  map: map,
  center: [-118.805, 34.027],
  zoom: 12,
  container: "viewDiv",
  constraints: {
    snapToZoom: false,
  },
})

チュートリアルヘ

ローカライズされた地名ラベルの表示

ベースマップスタイルサービスはデフォルトで英語のラベルを表示します。以下の例では、ローカライズされた言語ベースの地名ラベルで OSM スタイルを表示する方法を示します。

ステップ

マップまたはシーンを作成します。
ベースマップスタイルサービス (v2) からスタイルを参照します。
スタイルの URL で、language パラメーターに言語コードを設定します。
ベースマップをマップに追加します。

ローカライズされた地名ラベル (ローカル)

この例では、arcgis/light-gray のマップスタイルを使用します。デフォルトでは地名ラベルはグローバルな地名を表示します。ローカライズされた地名ラベルをレンダリングするには、language パラメーターを local に設定します。ローカライズされたラベルはズームレベル 10 以降でレンダリングされます。

例 : Esri Leaflet

const apiKey = "YOUR_API_KEY";
const map = L.map("map").setView([35.67255187657312, 139.76323442958844], 14);
L.esri.Vector.vectorBasemapLayer("arcgis/light-gray", {
  apikey: apiKey,
  language: 'local',
  version: 2
  }).addTo(map);

チュートリアルへ

言語ベースの地名ラベル (グローバル)

この例では、arcgis/dark-gray マップスタイルを使用しています。language パラメーターに言語コード (ここでは ja) を設定し、全てのズームレベルで地名ラベルがすべて日本語で表示されるようにしています。

例 : Esri Leaflet

const apiKey = "YOUR_API_KEY";
const map = L.map("map").setView([2.35, 48.856], 6);
L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray", {
  apikey: apiKey,
  language: 'ja',
  version: 2
}).addTo(map);

チュートリアルへ

worldview の表示

ベースマップスタイルサービスは、デフォルトのグローバルな worldview を使用して、国の境界線とラベルを表示します。この例では、ある国の特定のビューに基づいてベースマップの境界線とラベルを表示する方法を示します。worldview は、navigation、streets、community など一部の ArcGIS ベースマップスタイルでのみ使用できます。OSM スタイルはサポートされていません。

特定の worlview を選択した場合、その国以外の国際的な方針ではないことに注意してください。

ステップ

マップまたはシーンを作成します。
ベースマップスタイルサービスからベースマップレイヤーを参照します。
スタイルの URL で、サポートされている worldview 名を worldview パラメーターに設定します。
ベースマップをマップに追加します。

この例では、 arcgis/light-gray のマップスタイルを使用し、境界線とラベルの worldview を morocco に設定しています。すべての worldview オプションを見るには、ベースマップスタイルサービスをご覧ください。

例 : MapLible GL JS

const worldView = "morocco" // モロッコの worldview を指定
      const map = new maplibregl.Map({
        container: "map", // div 要素の ID
        style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/light-gray?token=${apiKey}&worldview=${worldView}`,
        zoom: 3,
        center: [-7.09, 31], // 初期位置 [経度, 緯度]
      })

コード例 : 静的ベースマップタイルサービス

静的ベースマップタイルの表示

この例では、静的ベースマップタイルサービスをベースマップのデータソースとして使用する方法を示します。そのためには、デフォルトのベースマップスタイルの 1 つを使用します。すべてのスタイルについては、Static basemap tiles service を参照してください。

ステップ

マップを作成します。
静的ベースマップスタイルサービスからスタイルを参照します。
ベースマップをマップに追加します。

例 : ArcGIS Maps SDK for JavaScript

const basemapStyle = "arcgis/navigation"
// const basemapStyle = "arcgis/streets"
// const basemapStyle = "arcgis/outdoor"
// const basemapStyle = "arcgis/light-gray"
// const basemapStyle = "arcgis/dark-gray"
const basemap = new Basemap({
  baseLayers: [
    new TileLayer({
      url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/${basemapStyle}/static`
    })
  ]
});

const map = new Map({
  basemap: basemap
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-91.2996, 37.1174], // USA (x, y)
  zoom: 4
});

静的ベースマップタイルサービスの言語ラベルの変更

この例では、静的ベースマップタイルサービスを使用するときに言語ラベルを変更する方法を示します。URL エンドポイントに、サポートされている言語コードの language パラメーターを渡すことができます。以下のマップはスイスを中心としており、言語を切り替えるとラベルが変化するのがわかります。

ステップ

マップを作成します。
静的ベースマップタイルサービスからスタイルを参照し、language パラメーターを渡します。
ベースマップをマップに追加します。

例 : ArcGIS Maps SDK for JavaScript

const updateBasemapLanguage = (language) => {
  let basemapLayer = new TileLayer({
    url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/${basemapEnum}/static`
  });

  // Remove existing language interceptor
  if (languageInterceptor) {
    esriConfig.request.interceptors = esriConfig.request.interceptors.filter(interceptor => interceptor !== languageInterceptor);
  }

  languageInterceptor = {
    urls: [basemapLayer.url],
    before({ requestOptions }) {
      requestOptions.query.language = language;
    },
  };
  esriConfig.request.interceptors.push(languageInterceptor);

  map.add(basemapLayer);
  basemapLayer.refresh();
};

コード例 : データサービス

ホストレイヤーの表示

この例では、ベースマップのデータソースとして ArcGIS のデータサービスを使用する方法を示します。データはアメリカ全土の地質を示すホストフィーチャレイヤーです。データサービスを利用するためには、ホストレイヤーのアイテム ID を参照する必要があります。

ステップ

ホストレイヤーのアイテム ID を検索します。
ベースマップを作成し、そのレイヤーをベースレイヤーとして追加します。
マップを作成し、ベースマップを使用します。

例 : ArcGIS Maps SDK for JavaScript

const featureLayer = new FeatureLayer({
    portalItem: {
      id: "4d9fb5c0a6344407aec56f47a11482b5" //  ArcGIS Online 上の State Geologic Map Compilation – Geology を参照
    }
  });
  const basemap = new Basemap({
    baseLayers: [featureLayer]
  });

チュートリアルへ

ルートの検索

ベースマップ

ベースマップとは？

ベースマップの仕組み

データ ソースの種類

ベースマップ サービス

ベースマップ スタイル サービス

例 : ArcGIS API for Python

静的ベースマップ タイル サービス

例 : ArcGIS Maps SDK for JavaScript

データ サービス

例 : ArcGIS Maps SDK for JavaScript

コード例 : ベースマップ スタイル サービス

ベースマップ スタイルの表示

ステップ

例 : ArcGIS Maps SDK for JavaScript

ローカライズされた地名ラベルの表示

ステップ

ローカライズされた地名ラベル (ローカル)

例 : Esri Leaflet

言語ベースの地名ラベル (グローバル)

例 : Esri Leaflet

worldview の表示

ステップ

例 : MapLible GL JS

コード例 : 静的ベースマップ タイル サービス

静的ベースマップ タイルの表示

ステップ

例 : ArcGIS Maps SDK for JavaScript

静的ベースマップ タイル サービスの言語ラベルの変更

ステップ

例 : ArcGIS Maps SDK for JavaScript

コード例 : データ サービス

ホスト レイヤーの表示

ステップ

例 : ArcGIS Maps SDK for JavaScript

データソースの種類

ベースマップサービス

ベースマップスタイルサービス

静的ベースマップタイルサービス

データサービス

コード例 : ベースマップスタイルサービス

ベースマップスタイルの表示

コード例 : 静的ベースマップタイルサービス

静的ベースマップタイルの表示

静的ベースマップタイルサービスの言語ラベルの変更

コード例 : データサービス

ホストレイヤーの表示