Googleの空中写真に等高線を重ねて表示する方法について、以前は農研機構さんの地図画像配信サービスWMSを利用して表示する方法を紹介していましたが、同サービスが終了したため、新しく国土地理院さんのベクトルタイル提供実験を利用する方法を紹介します。
ここで利用する地図タイルは通常のjpegやpng形式の画像タイルとは異なり、GeoJson形式のベクトルタイルです。GeoJson形式のタイルも画像形式のタイルとほぼ同様の方法で表示できますが、線の色等表示の仕方がカスタマイズできる点が異なります。
国土地理院ベクトルタイルの一覧は以下のGitHub上の国土地理院ベクトルタイル提供実験レポジトリで公開されています。
https://github.com/gsi-cyberjapan/vector-tile-experiment
上記サイトで紹介されているタイルのうち、今回は下図の「基盤地図情報_基本項目」のタイルを使用します。ここにはタイルのURLのテンプレート、対応ズームレベルが18のみであることが等が示されています。これから作成する地図タイル設定に入力するため、URLのうち以下の部分をコピーしておきます。
https://cyberjapandata.gsi.go.jp/xyz/experimental_fgd
地図タイル設定の作成に入ります。メニューの「地図タイル」の「地図タイル設定の新規作成」を選択します。地図タイルサイトのURLを入力してくださいの画面になるので、先ほどコピーしたURL（/{z}/{x}/{y}.geojsonの部分は除いて下さい）を入力し、OKをクリックします。
クエリパラメータ入力画面になるので、何もいれずにOKをクリックします。
タイル画像形式を指定の画面になるので、geojsonを選択してOKをクリックします。
タイルの起点を指定の画面になるので、北西を選択してOKをクリックします。
ディレクトリ構造の指定の画面になるので、/z/x/yを選択してOKをクリックします。
キャッシュフォルダ名入力画面になるので、好みで適当な名前を入力します。
地図タイルの最小続いて最大ズームレベル入力画面になります。対象の地図タイルはズームレベル18のタイルしかないので、最小、最大どちらも18を入力します。
ズームレベルオフセット入力画面になります。最小、最大ズームレベルともに18を設定しているため、そのままだと、地図のズームレベルが18で地図タイルが表示され、19以上ではレベル18の地図タイルが拡大表示になり、17以下では地図タイルは表示されません。ズームレベルオフセットを指定すると地図のズームレベルにオフセットを加えたレベルの地図タイルが表示されます。ズームレベルオフセットに2を指定すると、地図のズームレベルが16の時に2を加えたレベル18の地図タイルが表示され、17以上ではその拡大表示になるため、ズームレベル16以上で地図タイルが表示できるようになります。ズームレベルオフセットは3まで指定できるので、その場合ズームレベル15から表示できるようになりますが、表示する地図タイル数がかなり多くなり表示がとても遅くなることが多いのでとりあえず2にしておきます。（必要に応じてあとで変更は可能です。）
タイル取得有効エリアの設定画面になります。ここは設定せずにOKをクリックします。特定のエリアでしかこの地図タイルを表示する必要がない場合等は、エリア設定をするとエリア外の地図タイルの取得を行わないので地図タイルサーバーへの負荷を低減できます。
GeoJson用の設定画面になります。GeoJsonタイルではjpeg等の画像タイルと異なり、ベクトルデータのためデータタイプ別の表示の有無やラベル表示の有無、線の色等がカスタマイズできます。カスタマイズは後で行うことにして、とりあえずここはそのままにしてOKをクリックします。
設定名入力画面になるので好みの名前を付けてOKをクリックすると地図タイル設定が保存されます。
メニューの「地図タイル」の「表示地図タイル選択」で作成した地図タイル設定が表示されるので、これにチェックを入れてOKをクリックします。
とりあえずこで地図タイルが表示されますが、全て赤線で、また中央付近にラベルとおぼしき文字が表示されています。
GeoJsonタイルのデータ中の地物（等高線や道路の線等）はShapeFileの地物と同様に様々な属性（プロパティ）が付けられている場合があります。（見えにくいですが上図の地図中央付近に表示されているラベルがそれらの属性とその値です。）今回使用している地図タイルには「class」属性に地物の種類の情報が入っています。以下がこの地図タイルでの地物の種類と値の一覧です。
地物の種類 値
測量の基準点 GCP
標高点 ElevPt
等高線 Cntr
DEM区画 DEM
DEM構成点 DEMPt
DGHM区画 DGHM
DGHM構成点 DGHMPt
行政区画界線 AdmBdry
町字界線 CommBdry
行政区画代表点 AdmPt
町字の代表点 CommPt
行政区画 AdmArea
街区線 SBBdry
街区の代表点 SBAPt
街区域 SBArea
海岸線 Cstline
水涯線 WL
水域 WA
水部構造物線 WStrL
水部構造物面 WStrA
河川区域界線 RvrMgtBdry
河川堤防表肩法線 LeveeEdge
建築物の外周線 BldL
建築物 BldA
道路縁 RdEdg
道路構成線 RdCompt
道路域分割線 RdASL
道路域 RdArea
道路区分面 RdSgmtA
道路区域界線 RdMgtBdry
軌道の中心線 RailCL
この「class」属性の値で表示する色を変えるように設定を変更します。
メ ニューの「地図タイル」の「地図タイル設定の編集」を選択し、先ほど作成した地図タイル設定をクリックします。
新規作成時と同様の画面が出ますので、OKをクリックしてGeoJson用の設定画面まで進みます。GeoJson用の設定画面で「レベルを表示する」、「画面中央の1ラベルだけを表示する」、「国土地理院のスタイル定義」の項目をオフにし、「色分けに使用するプロパティ設定」にclassを入力してOKをクリックします。これを同じ設定名で上書き保存します。
地図タイルの表示が地物の種類ごとに色分けされた表示に変わります。各種類の色はランダムに決定されるので、次に好みの配色に編集します。
メニューの「地図タイル」の→「geojsonタイル配色編集」を選択し、先ほどの地図タイル設定をクリックします。
配色ファイル編集画面になります。地図タイルのこれまでに表示された地物のclass属性に含まれる値が自動でリストアップされ、各値にランダムに色が割り当てられた状態になっています。このリストは地図表示時に表示された地物にこれら以外の値があると、その値に新たに色が割り当てられてリストの下に追加されていく仕組みになっています。
Cntr（等高線）の色を変更する場合は、値の左の色のついたボタンをクリックします。
カラーピッカーが表示されるので、好みの色を指定しOKをクリックします。
ここではCntr（等高線）、WL（水涯線）、RdEdg（道路縁）の3項目の色を変更しました。他の値は全て灰色にしたい場合は、どれか1項目を灰色にした後で、そのボタンを長押しします。
色コピー・ペーストが表示されるので、コピーをクリックします。
それ以外のボタンについて長押しして色コピー・ペーストのペーストをクリックすると同じ灰色になります。
上3項目の色を選び、他は灰色の設定にしました。ファイル保存をクリックします。
色指定タイプ：「個別」で保存しますの表示がでるのでOKをクリックします。
地図タイルを表示すると、指定の配色に変わっています。以上で設定完了です。
なお、この後、あちこち地図タイルを表示していると、配色設定に新たな値が追加されていくので適宜編集する必要があります。
