ベースマップ

出典: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 を表示することもできます。

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

  1. スタイルを選択します。

  2. サービスの URL とスタイルを参照します。

  3. ベースマップを 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 ファイルとして提供されます。またこのサービスは、英語以外の言語での地名ラベル表示もサポートしています。

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

  1. ベースマップ スタイルを選択します。

  2. サービスの URL とスタイルを参照します。

  3. ベースマップを 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 メルカトル以外の空間参照を必要とする小規模な地域やエリアのデータを表示する場合にも使用します。

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

  1. ホスト レイヤーおよびデータ サービスを検索または作成します。

  2. レイヤーのアイテム ID またはサービス URL を取得します。例 :

  3. ベースマップを 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 つを使用します。すべてのスタイルについては、ベースマップ スタイル サービス を参照してください。

ステップ

  1. マップを作成します。
  2. ベースマップ スタイル サービスからスタイルを参照します。
  3. ベースマップをマップに追加します。
例 : 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,
  },
})

チュートリアルヘ

ArcGIS/Streets

ArcGIS/Navigation

ArcGIS/Topographic

ArcGIS/Outdoor

ArcGIS/Light gray canvas

ArcGIS/Imagery

OSM/Standard

OSM/Navigation

OSM/Blueprint

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

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

ステップ

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

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

この例では、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 は、navigationstreetscommunity など一部の ArcGIS ベースマップ スタイルでのみ使用できます。OSM スタイルはサポートされていません。

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

ステップ

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

この例では、 arcgis/light-gray のマップ スタイルを使用し、境界線とラベルの worldviewmorocco に設定しています。すべての 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 を参照してください。

ステップ

  1. マップを作成します。
  2. 静的ベースマップ スタイル サービスからスタイルを参照します。
  3. ベースマップをマップに追加します。
例 : 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
});

ArcGIS/Streets

ArcGIS/Navigation

ArcGIS/Outdoor

ArcGIS/Light gray canvas

ArcGIS/Dark gray canvas

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

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

ステップ

  1. マップを作成します。
  2. 静的ベースマップ タイル サービスからスタイルを参照し、language パラメーターを渡します。
  3. ベースマップをマップに追加します。
例 : 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 を参照する必要があります。

ステップ

  1. ホスト レイヤーのアイテム ID を検索します。
  2. ベースマップを作成し、そのレイヤーをベース レイヤーとして追加します。
  3. マップを作成し、ベースマップを使用します。
例 : 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]
  }); 
チュートリアルへ