@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
機能
- 2種類のベクトルタイルに対応
- ベクトルタイル (2019年7月29日関東の一部地域、2020年3月19日全国提供開始)
- 最適化ベクトルタイル (2022年9月6日提供開始開始)
- 設定不要で使用可能
- テーマによる配色、タイポグラフィの編集
- TypeScriptによる型安全性
インストール
OpenLayers プロジェクトにインストール
yarn add @cieloazul310/ol-gsi-vt
既存の OpenLayers プロジェクトやcreate-ol-app などで新規作成したプロジェクトにインストール。
https://openlayers.org/doc/quickstart.html
テンプレートを利用
OpenLayers プロジェクトの TypeScript テンプレートをクローン
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();
スタイルの設定なしで国土地理院の最適化ベクトルタイル及びベクトルタイルを利用することができます。
パッケージ
@cieloazul310/ol-gsi-vt
メインパッケージ。4種類のレイヤと以下の2つのパッケージが含まれる。
@cieloazul310/ol-gsi-vt-style
最適化ベクトルタイル及びベクトルタイルのプリセットのスタイルを定義したパッケージ。
@cieloazul310/ol-gsi-vt-style-utils
テーマや型定義、注記の地物コードのフィルタリングなどの関数を搭載したパッケージ。
API
@cieloazul310/ol-gsi-vt API
- gsiOptVtLayer(options?)
- gsiVtLayer(options?)
- gsiOptVtPaleLayer(options?)
- gsiVtPaleLayer(options?)
gsiOptVtLayer(options?)
最適化ベクトルタイルのレイヤを生成する関数
Source
import { gsiOptVtLayer } from '@cieloazul310/ol-gsi-vt';
const layer = gsiOptVtLayer();
options
-
layers?:
GsiOptVTLayerName[]
描写する最適化ベクトルタイルのソースレイヤ名を配列で記述 -
styles?:
GsiOptVTLayerStyleOptions
マニュアル記法によるスタイリングを実装するオブジェクト
参照: @cieloazul310/ol-gsi-vt-style API -
theme?:
ThemeOptions
-
palette?:
PaletteOptions
-
typography?:
Partial<Typography>
-
zIndex:
Partial<Typography>
-
palette?:
-
attribution?:
string | string[]
出典、帰属を記述 -
declutter?:
boolean
地図の点データが重ならないようにする (default totrue
) -
background?:
boolean
地図に背景色を設定する (deafult totrue
) -
...and VectorTileLayer options
returns
VectorTileLayer Class
gsiVtLayer(options?)
ベクトルタイルのレイヤを生成する関数
Source
import { gsiVtLayer } from '@cieloazul310/ol-gsi-vt';
const layer = gsiVtLayer();
options
-
layers?:
GsiVTLayerName[]
描写するベクトルタイルのソースレイヤ名を配列で記述 -
styles?:
GsiVTLayerStyleOptions
マニュアル記法によるスタイリングを実装するオブジェクト
参照: @cieloazul310/ol-gsi-vt-style API -
theme?:
ThemeOptions
-
palette?:
PaletteOptions
-
typography?:
Partial<Typography>
-
zIndex:
Partial<Typography>
-
palette?:
-
attribution?:
string | string[]
出典、帰属を記述 -
declutter?:
boolean
地図の点データが重ならないようにする (default totrue
) -
background?:
boolean
地図に背景色を設定する (deafult totrue
) -
...and VectorTileLayer options
returns
VectorTileLayer Class
gsiOptVtPaleLayer(options?)
最適化ベクトルタイルの淡色レイヤを生成する関数
Source
import { gsiOptVtPaleLayer } from '@cieloazul310/ol-gsi-vt';
const layer = gsiOptVtPaleLayer();
options
-
layers?:
GsiOptVTLayerName[]
描写する最適化ベクトルタイルのソースレイヤ名を配列で記述 -
styles?:
GsiOptVTLayerStyleOptions
マニュアル記法によるスタイリングを実装するオブジェクト
参照: @cieloazul310/ol-gsi-vt-style API -
theme?:
ThemeOptions
-
palette?:
PaletteOptions
-
typography?:
Partial<Typography>
-
zIndex:
Partial<Typography>
-
palette?:
-
attribution?:
string | string[]
出典、帰属を記述 -
declutter?:
boolean
地図の点データが重ならないようにする (default totrue
) -
background?:
boolean
地図に背景色を設定する (deafult totrue
) -
...and VectorTileLayer options
returns
VectorTileLayer Class
gsiVtLayer(options?)
ベクトルタイルの淡色レイヤを生成する関数
Source
import { gsiVtPaleLayer } from '@cieloazul310/ol-gsi-vt';
const layer = gsiVtPaleLayer();
options
-
layers?:
GsiVTLayerName[]
描写するベクトルタイルのソースレイヤ名を配列で記述 -
styles?:
GsiVTLayerStyleOptions
マニュアル記法によるスタイリングを実装するオブジェクト
参照: @cieloazul310/ol-gsi-vt-style API -
theme?:
ThemeOptions
-
palette?:
PaletteOptions
-
typography?:
Partial<Typography>
-
zIndex:
Partial<Typography>
-
palette?:
-
attribution?:
string | string[]
出典、帰属を記述 -
declutter?:
boolean
地図の点データが重ならないようにする (default totrue
) -
background?:
boolean
地図に背景色を設定する (deafult totrue
) -
...and VectorTileLayer options
returns
VectorTileLayer Class
その他
- optVtDefaultAttribution
- vtDefaultAttribution
optVtDefaultAttribution
最適化ベクトルタイルレイヤのデフォルトのアトリビューション
Source
equal to '<a href="https://github.com/gsi-cyberjapan/optimal_bvmap" target="_blank" rel=”noopener noreferrer”>国土地理院最適化ベクトルタイル</a>'
vtDefaultAttribution
ベクトルタイルレイヤのデフォルトのアトリビューション
Source
equal to '<a href="https://github.com/gsi-cyberjapan/gsimaps-vector-experiment" target="_blank" rel=”noopener noreferrer”>国土地理院ベクトルタイル提供実験</a>'
``
@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>
Tips
- 淡色プリセットを使う
- テーマを変更して配色を変える
- 表示するソースレイヤを選択する
- 表示しないソースレイヤを選択する
- マニュアルでスタイルを設定する
ベクトルタイルの仕様
地理院地図Vector(仮称)提供実験
https://github.com/gsi-cyberjapan/gsimaps-vector-experiment
最適化ベクトルタイル試験公開
https://github.com/gsi-cyberjapan/optimal_bvmap
国土地理院によるベクトルタイルは提供実験及び試験公開であるため、今後仕様変更や公開終了の可能性があります。留意してください。