はじめに

本 FAQ では ArcGIS Online で用意されているベースマップと、それ以外にカスタムしたベースマップを使用したい場合に、Web アプリケーションにカスタムのベースマップを設定する方法について説明します。ArcGIS Enterprise に公開されているベースマップの URL をご利用いただく場合もご参考にしていただけます。

ArcGIS Online で提供するベースマップの設定方法

インターネットに接続できる環境であれば、Web アプリケーションのマップに設定するベースマップには ArcGIS Online が提供するサービスが利用できます。
Map クラスの basemap プロパティに、決められた文字列を設定することで簡単にマップにベースマップを追加することができます。
サンプルコード：

const map = new Map({
  basemap: "topo-vector"
});

本 FAQ では ArcGIS Online で用意されているもの以外を使用したい場合やインターネットに接続できない環境の場合などに、Web アプリケーションにカスタムのベースマップを設定する方法について、説明します。

カスタム ベースマップの設定方法

まず、カスタムのベースマップを設定するには Basemap クラスを使用して、あらかじめベースマップとして使用できるようにしておきます。
Basemap クラスを設定できましたら、Map クラスの basemap プロパティに Basemap のインスタンスを割り当てることで独自のベースマップをマップに使用できるようになります。下記に MapImageLayer をカスタムのベースマップとして設定するコードの例をご紹介します。今回は MapImageLayer を使用していますが、そのほかキャッシュが作成されている TileLayer や VectorTileLayer も使用することができます。また、ベースマップで使用するレイヤーを定義する baseLayers には複数のレイヤーを組み合わせて設定することができます。
※ 今回カスタムで設定しているベースマップは、米国 Esri 社がホストしているサンプル サーバーのデータを使用しています。
サンプルコード：

// Basemap クラスの作成
let SampleWorldCitiesBasemap = new Basemap({
    // ベースマップを構成するレイヤーの設定
    baseLayers: [
        // ベースマップに使用する MapImageLayer クラスの作成
        new MapImageLayer({
            url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer",
            title: "SampleWorldCities"
        })
    ],
    title: "SampleWorldCities",
    id: "SampleWorldCities"
});

// Map クラスの作成
const mapMain = new Map({
    // 作成した Basemap の適用
    basemap: SampleWorldCitiesBasemap,
});

こちらの機能を使用することでデフォルトで用意されているマップ以外を使用したい場合やインターネットに接続できず ArcGIS Enterprise に公開されているデータを使用したい場合、Web アプリケーションに独自のベースマップを設定することができるようになります。

ベースマップ レイヤーの表現

ベースマップに設定する TileLayer や VectorTileLayer の元のデータに対して、さまざまなエフェクトを設定した表現が可能となっています。
[レイヤー ブレンディング] と [レイヤーのエフェクト] の2つを紹介します。
この2つは同時に設定することができますし、opacity など他にも可能な表現と組み合わせて使用することもできます。

レイヤー ブレンディング 

レイヤー ブレンディングは 2 つ以上のレイヤーを合成する Photoshop のような機能をブラウザーでマップに対して動的に行うことができます。レイヤー重なりを単なる不透明度を設定で表現するのではなく、ブレンディングを使用することでマップの表示設定をさらに細かく制御することもできます。
各レイヤーの色とテクスチャを組み合わせてマップ上に表示する方法を細かく調整できますブレンディングの設定はベースマップに設定している各 Layer の blendmode から設定することができます。
例えば、blendmode を multiply と設定した場合、複数のレイヤーの色を掛け合わせて、重なっているレイヤーの最も暗い部分を強調するような表現が可能です。
サンプルコード：

const map = new Map({
  basemap: {
    baseLayers:[
      new VectorTileLayer({
        url: "url",
      }),
      new TileLayer({
        url: "url",
        // ブレンディングの設定
        blendMode: "multiply"
      })
    ]
  }
});

レイヤーのエフェクト

effect は CSS フィルターのような機能をベースマップに設定しているレイヤーに適用して、地図の表現を大幅に向上させることができます。
例えば drop-shadow を使用することでレイヤーに対して影を落とすような表現が可能となります。
サンプルコード：

const map = new Map({
    basemap: {
        baseLayers: [
            new TileLayer({
                url: "url",
                // レイヤーの effect の設定
                effect: [{
                        scale: 36978595,
                        value: "drop-shadow(3px, 3px, 4px)"
                    },
                    {
                        scale: 18489297,
                        value: "drop-shadow(2px, 2px, 3px)"
                    },
                    {
                        scale: 4622324,
                        value: "drop-shadow(1px, 1px, 2px)"
                    }
                ];
            })
        ]
    }
});

※赤色のポリゴンのレイヤーに対して、影をつけています。
 

空間参照の定義

マップにおいての空間参照の定義は、ベースマップの空間参照がマップ自体の空間参照として使用されます。つまり、ベースマップに設定している空間参照が「平面直角座標系 第 9 系」の場合は、マップの空間参照は「平面直角座標系 第 9 系」になります。
また、カスタムのベースマップを設定後、後から追加した操作レイヤー (フィーチャ レイヤーやマップ イメージ レイヤー) の空間参照がベースマップと異なるものであった場合、操作レイヤーはベースマップの座標系に自動で投影変換をされます。

参考情報

ArcGIS API for JavaScript | Display a custom basemap style
ArcGIS API for JavaScript | Custom Basemap
GIS アプリと空間参照 – Esri Community