Vector Tile Style Editor を使ってオリジナルのベースマップを作製してみよう!
はじめに
ベースマップはマップの表示位置や周辺環境を視覚的に提供する役割を持ち、マップ自体の見やすさや美しさに大きな影響を与えます。ベースマップは表示の高速化のためマップ タイル形式で配信されています。このうちベクター タイル形式のベースマップを Vector Tile Style Editor でカスタマイズしてみましょう。
ベクター タイル形式のベースマップとは
ベクター タイル形式のベースマップは、地図上に示してある路線や建物など地物の情報が、ポイントやポリライン、ポリゴンを表示するような、図形（ベクター）形式のデータで構成・表現されたベースマップです。
対照的なものとして、ArcGIS Online で配信している“海洋図“や“ラベル付き衛星画像“の背景地図は、画像（ラスター）形式で構成・表現されています。
ベクター タイル形式は画像ではないため、どこまで詳細にズームを行っても解像度に限界がなくきれいに表示されます。地図の表示ラベルが地図の回転に合わせて読みやすい位置に回転することもベクター タイル形式の利点です。ベクター タイル形式は、地物を表すデータと表示スタイルが分かれているため、例えば道路や河川といったデータ毎の配色をデータはそのままにカスタムすることが可能であり、ベクターデータを再作成する必要がありません。
ベクター タイル形式を詳しく知りたい場合は、ESRIジャパンが運営する ArcGIS ブログの「ベクター タイル大解剖！ 基礎編」の記事も是非ご参照ください。
ArcGIS Vector Tile Style Editor の概要と起動方法
ArcGIS Vector Tile Style Editor は、ベクター タイル レイヤーのスタイルを設定するためのオンライン スタイル エディターです。ここでは新たにタイルを作成するのではなく、ベクター タイルのスタイルを変更するため、作成されたファイルのサイズが小さいことが利点です。ArcGIS Online や ArcGIS Location Platform を利用する際に、容量を削減するために役立ちます。
起動するにはまず ArcGIS Online にログインをします。アプリ ランチャーを開き、Vector Tile Style Editor のアイコンをクリックすることで起動します。
[+新規スタイル] ボタンをクリックすると作成が開始されます。Vector Tile Style Editor では Esri の提供する合計 70 種類以上ものベースマップからカスタマイズを始めることができます。カスタマイズを始めたいベースマップをクリックして始めましょう。
もしベースマップをカスタマイズする方針が決まっているのであれば、元にするベースマップの選択を適切に行うとよりよくカスタマイズできます。例えば、Light Gray Canvas のような Canvas マップや Human Geography は、独自のカラー パレットを開発したい場合に向いています。しかし、細部が削ぎ落とされており、表示したいものによっては十分ではないかもしれません。一方で、Street と Topographic は特に大きな縮尺では内容が豊富ですが、シンボルやラベルを調整する作業の負担が大きくなってしまいます。Colored Pencil や Nova のような地図は、独自性が強いためカスタマイズすることが難しくなるかもしれません。
今回は例として Lite Gray Canvas で開始します。Vector Tile Style Editor を起動して、左下のアイコンからメニュー バーを展開すると以下のような画面になります。このアプリケーションでは 1 つの大きなマップと 3 つのミニマップでマップ画面が構成されています。デフォルトではズームが 5、9、14 の設定になっているので、変更した対象がズーム レベルによってどのように変わるかを見ながら作業を進めることができます。ミニマップが不必要であれば、右下の [ミニマップを非表示] から非表示にしましょう。
詳しい説明については参考資料の Customizing Esri's Vector Basemaps シリーズや、Esri community ブログ記事「ベクター タイル形式の背景地図をカスタムしてオリジナル配色の背景地図を表現しよう」を利用してみてください。
ここからは実際に作成したベクター タイル レイヤーを元にいくつかの機能を紹介していこうと思います。
例 1 海岸線の再表示
Canvas マップは表示されるものが絞られている特徴があり、カスタマイズしやすいことが特徴です。しかし、少し情報量が少なく物寂しいと感じたことはないでしょうか。ここでは非表示となっている情報を再表示させる一例として、JSON の編集から海岸線を表示させてみましょう。以下の図で示している Vector Basemaps Reference Document には Esri の提供するベクター タイル レイヤーに含まれるレイヤーのリストが記述されています。このドキュメントからズーム レベルが 0 から 9 の間で海岸線が表示可能ということがわかります。
海岸線が表示されている一例として World Topographic Map があります。このマップの情報を参考に、海岸線に該当する JSON の記述をコピーし転記することで海岸線のシンボル設定を作成することができます。ここでは海岸線の色を黒とし、幅を太くしました。
例 2 高速道路をメインとしたベースマップ
ベースマップは様々な情報を表示することも、操作レイヤーとして追加される情報を見やすくするための背景としての役割を果たすともできます。例えば、観光地へのアクセスを紹介するために幹線道路のみ表示したい、鉄道アクセスを重視したいので線路と駅と幹線道路のみ表示したいような場合です。このような時にはベースマップとして表示したい情報だけを表示させるように、カスタマイズしてみます。ここでは以下の Lite Gray Canvas Baseから始めます。
ここでは道路がより目立つベースマップを作るために主に以下のような変更を加えます。
・陸地の色、海や河川の色を変更
・小さな河川や湖など不要な地物を非表示
・道路は高速道路以外を非表示にし、道路幅を太く変更、黒いふちを追加
これらの変更を行ったベースマップは以下のようになります。
例 3 自作のアイコン素材を導入し、背景や地物のデザインをカスタマイズ
ArcGIS Vector Tile Style Editor はデフォルトに存在する素材以外に自分で作成した素材を使ってベースマップをカスタマイズすることができます。ここでは、道路を中心としたローカルなベースマップをテーマにカスタマイズを進めます。Lite Gray Canvas に以下のような変更を加えます。
・例 2 と同様に表示に不必要な地物を非表示に設定
・高速道路の色、太さ、ラベルを変更
・[レイヤー スタイルの編集] から道路の種類ごとに太さや輪郭を設定する
・[アイコンとパターンの編集] から使用したいアイコンを登録
・[レイヤー スタイルの編集] から陸地（Land）、駅（Rail station）、線路（Railroad）に登録したアイコンを適用し、大きさなどを調整
これらの変更を行ったベースマップは以下のようになります。
ここでは駅のポイントが線路ラインの上に重なるようにしていますが、地物ごとに表示の上下を調整したい場合は [レイヤー スタイルの編集] 内の [描画順に並び替え] 機能が利用できます。以下の画像は継ぎ目が目立ちにくいデザインのアイコン素材を陸地である Land に適用したものになります。
作成したベースマップを ArcGIS 開発者製品で表示してみよう
Esri Developer 内 Display a custom basemap style 記事では作成したベクター タイル レイヤーを ArcGIS Maps SDK for JavaScript を利用して表示しています。ここでは、この記事に従ったやり方を紹介します。
- Display a map チュートリアルで作成したコードを用意します。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.30/"></script>
<script>
require(["esri/config", "esri/Map", "esri/views/MapView"], function(esriConfig, Map, MapView) {
esriConfig.apiKey = "YOUR_ACCESS_TOKEN";
const map = new Map({
basemap: "arcgis/topographic" // basemap styles service
});
const view = new MapView({
map: map,
center: [-118.805, 34.027], // Longitude, latitude
zoom: 13, // Zoom level
container: "viewDiv" // Div element
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
- API キーを入手し埋め込みます。API キーの取得方法については開発リソース集の API キーの取得をご参照ください。
esriConfig.apiKey = "YOUR_ACCESS_TOKEN";
const map = new Map({
basemap: "arcgis/topographic" // basemap styles service
});
- モジュールを読み込みます。
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/VectorTileLayer",
"esri/layers/TileLayer",
], function (esriConfig, Map, MapView, Basemap, VectorTileLayer, TileLayer) {
- ベクター タイル レイヤーを作成します。
esriConfig.apiKey = "API キー";
const vectorTileLayer = new VectorTileLayer({
portalItem: {
id: "アイテム ID" //
},
opacity: 0.75
});
const basemap = new Basemap({
baseLayers: [
vectorTileLayer
]
});
const map = new Map({
basemap: basemap, // basemap プロパティを"arcgis/topographic"から変更
});
- 初期位置とズーム レベルを変更します。
const view = new MapView({
container: "viewDiv",
map: map,
center: [138.63530511883, 36.344285223713], // 例として軽井沢駅の緯度経度を設定
zoom: 15
});
});
実行した結果は以下の画像のようになります。
最後に
今回は Vector Tile Style Editor を使ってベースマップをカスタマイズしました。特に自身でデータを用意する必要がなく地図の表現を工夫できます。色やフォントを変えることはもちろん、例えば大きい幹線道路のみ太くしたり、小さな河川のみ色を変更したりと対象によっては細かく地物を指定してカスタマイズできます。ベースマップは ArcGIS Pro で地図を作成する時だけでなく、ArcGIS Field Maps や ArcGIS StoryMaps のような ArcGIS Apps を使用する時にも役に立つのでぜひ活用してみてください。
関連リンク集
・Design custom basemaps with the new ArcGIS Vector Tile Style Editor（ESRI ArcGIS Blog）
・ArcGIS API for JavaScript（ESRIジャパン製品ページ）
・Customizing Esri's Vector Basemaps シリーズ (リンクはパート 1)
・ベクター タイル形式の背景地図をカスタムしてオリジナル配色の背景地図を表現しよう (Esri community ブログ)
・ArcGIS Vector Tile Style Editor Documentation
・Esri Vector Basemap Reference Document (v2)
・Display a custom basemap style (Esri Developer 内チュートリアル)
