Nadie Programa más

    @cieloazul310/ol-gsi-vt
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    @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種類のベクトルタイルに対応
    • 設定不要で使用可能
    • テーマによる配色、タイポグラフィの編集
    • 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

    npm version

    メインパッケージ。4種類のレイヤと以下の2つのパッケージが含まれる。

    @cieloazul310/ol-gsi-vt-style

    npm version

    最適化ベクトルタイル及びベクトルタイルのプリセットのスタイルを定義したパッケージ。

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

    npm version

    テーマや型定義、注記の地物コードのフィルタリングなどの関数を搭載したパッケージ。

    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>

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

    • attribution?: string | string[] 出典、帰属を記述

    • declutter?: boolean 地図の点データが重ならないようにする (default to true)

    • background?: boolean 地図に背景色を設定する (deafult to true)

    • ...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>

      参照: @cieloazul310/ol-gsi-vt-style-utils API

    • attribution?: string | string[] 出典、帰属を記述

    • declutter?: boolean 地図の点データが重ならないようにする (default to true)

    • background?: boolean 地図に背景色を設定する (deafult to true)

    • ...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>

      参照: @cieloazul310/ol-gsi-vt-style-utils API

    • attribution?: string | string[] 出典、帰属を記述

    • declutter?: boolean 地図の点データが重ならないようにする (default to true)

    • background?: boolean 地図に背景色を設定する (deafult to true)

    • ...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>

      参照: @cieloazul310/ol-gsi-vt-style-utils API

    • attribution?: string | string[] 出典、帰属を記述

    • declutter?: boolean 地図の点データが重ならないようにする (default to true)

    • background?: boolean 地図に背景色を設定する (deafult to true)

    • ...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

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

    ベクトルタイルの仕様

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

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

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

    Install

    npm i @cieloazul310/ol-gsi-vt

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    30.4 kB

    Total Files

    30

    Last publish

    Collaborators

    • cieloazul310