@cieloazul310/ol-gsi-vt

国土地理院ベクトルタイルのOpenLayers用プリセット

@cieloazul310/ol-gsi-vt は、国土地理院が提供するベクトルタイルを OpenLayers で設定不要で手軽に表示するためのパッケージです。ベクトルタイル、最適化ベクトルタイルのそれぞれに通常、淡色の2種類ずつ、計4種類のプリセットレイヤを搭載しています。

GitHub リポジトリ
https://github.com/cieloazul310/ol-gsi-vt

デモ
https://cieloazul310.github.io/ol-gsi-vt

ol-gsi-vt Composer (New!)
https://ol-gsi-vt.vercel.app

機能

2種類のベクトルタイルに対応
- ベクトルタイル (2019年7月29日関東の一部地域、2020年3月19日全国提供開始)
- 最適化ベクトルタイル (2022年9月6日提供開始、2023年8月30日PMTile版提供開始)
設定不要で使用可能
テーマによる配色、タイポグラフィの編集
TypeScriptによる型安全性

インストール

既存の OpenLayers プロジェクトにインストールする方法

npm install @cieloazul310/ol-gsi-vt

npm や yarn で既存の OpenLayers プロジェクトや create-ol-app などで新規作成したプロジェクトにインストールする方法です。

https://openlayers.org/doc/quickstart.html

テンプレートを利用する方法

また、@cieloazul310/ol-gsi-vt パッケージを利用したテンプレートを用意しています。テンプレートを下記コマンドでクローンすることで、設定不要でパッケージを利用することができます。

git clone git@github.com:cieloazul310/ol-gsi-vt-template.git --depth=1

https://github.com/cieloazul310/ol-gsi-vt-template

使い方

import { gsiOptVtLayer } from '@cieloazul310/ol-gsi-vt';

const layer = gsiOptVtLayer();

スタイルの設定なしで国土地理院の最適化ベクトルタイル及びベクトルタイルを利用することができます。

API リファレンス

以下の全ての機能は @cieloazul310/ol-gsi-vt モジュールからインポート可能です。

@cieloazul310/ol-gsi-vt API

レイヤ

gsiOptVtLayer(options?)
gsiVtLayer(options?)
gsiOptVtPaleLayer(options?)
gsiVtPaleLayer(options?)

その他

optVtDefaultAttribution
vtDefaultAttribution

@cieloazul310/ol-gsi-vt-style API

スタイル

gsiOptVtStyle(options?, defaultTheme?)
gsiVtStyle(options?, defaultTheme?)

@cieloazul310/ol-gsi-vt-style-utils API

テーマ

defaultTheme
mergeDefaultTheme(defaultTheme)

Palette

defaultPalette
palePalette
mergeDefaultPalette(paletteOptions?, initialPalette?)

Typography

defaultTypography
mergeDefaultTypogrphy(typographyOptions?, initialTypography?)

zIndex

defaultZIndex

関数

for source-layers

ベクトルタイルのソースレイヤの取捨選択用の定数と関数

gsiOptVtLayerNameCollection
gsiOptVtLayerExclude(layerNameCollection)
gsiVtLayerNameCollection
gsiVtLayerExclude(layerNameCollection)

注記

マニュアル記法で注記のスタイルを記述する際に、地物のフィルタリングと型安全を保つ関数。

annoCodeIsAdress(code)
annoCodeIsAdm(code)
annoCodeIsAirport(code)
annoCodeIsElevation(code)
annoCodeIsGreen(code)
annoCodeIsLandformPoint(code)
annoCodeIsPort(code)
annoCodeIsSchool(code)
annoCodeIsTerrain(code)
annoCodeIsTransp(code)
annoCodeIsVegetation(code)
annoCodeIsWater(code)

その他

zoomToResolution(zoomLevel)
dspPos(dspPos?, arrng?, radius?)

types

最適化ベクトルタイル及びベクトルタイルの地物の型定義

GsiOptVTFeatureProperties<VTCode, T>
GsiVTFeatureProperties<FTCode, T>

レシピ

淡色プリセットを使う
テーマを変更して配色を変える
表示するソースレイヤを選択する
表示しないソースレイヤを選択する
マニュアルでスタイルを設定する

ベクトルタイルの仕様

地理院地図Vector（仮称）提供実験
https://github.com/gsi-cyberjapan/gsimaps-vector-experiment

最適化ベクトルタイル試験公開
https://github.com/gsi-cyberjapan/optimal_bvmap

国土地理院によるベクトルタイルは提供実験及び試験公開であるため、今後仕様変更や公開終了の可能性があります。留意してください。