はじめに
インターネットに接続できる環境であれば、Web アプリケーションのマップに設定するベースマップには ArcGIS Online が提供するサービスが利用できます。Map クラスの basemap プロパティに、決められた文字列を設定することで簡単にマップにベースマップを追加することができます。
サンプルコード：
const map = new Map({
basemap: "topo-vector"
});
本ブログでは 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 の元のデータに対して、さまざまなエフェクトを設定した表現が可能となっています。
1 つ目がレイヤー ブレンディングです。レイヤー ブレンディングは 2 つ以上のレイヤーを合成する Photoshop のような機能をブラウザーでマップに対して動的に行うことができます。
レイヤー重なりを単なる不透明度を設定で表現するのではなく、ブレンディングを使用することでマップの表示設定をさらに細かく制御することもできます。各レイヤーの色とテクスチャを組み合わせてマップ上に表示する方法を細かく調整できますブレンディングの設定はベースマップに設定している各 Layer の blendmode から設定することができます。例えば、blendmode を multiply と設定した場合、複数のレイヤーの色を掛け合わせて、重なっているレイヤーの最も暗い部分を強調するような表現が可能です。
サンプルコード：
const map = new Map({
basemap: {
baseLayers:[
new VectorTileLayer({
url: "url",
}),
new TileLayer({
url: "url",
// ブレンディングの設定
blendMode: "multiply"
})
]
}
});
サンプルアプリケーションについてはこちら を参考ください。
2 つ目が Layer の effect です。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)"
}
];
})
]
}
});
サンプルアプリケーションはこちらを参考ください。
また、blendmode や effect、opacity などのレイヤーの表現は組み合わせて使用することができ、元のレイヤーを編集することなく、こちらのようにコード上でさまざまな表現が可能となっています。
空間参照の定義
マップにおいての空間参照の定義は、ベースマップの空間参照がマップ自体の空間参照として使用されます。
つまり、ベースマップに設定している空間参照が「平面直角座標系 第 9 系」の場合は、マップの空間参照は「平面直角座標系 第 9 系」になります。また、カスタムのベースマップを設定後、後から追加した操作レイヤー (フィーチャ レイヤーやマップ イメージ レイヤー) の空間参照がベースマップと異なるものであった場合、操作レイヤーはベースマップの座標系に自動で投影変換をされます。そのほか ArcGIS API for JavaScript での空間参照の詳細についてはこちらでも解説していますので、併せてご参考ください。