Nobody Preheats Microwaves

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

    1.0.1 • Public • Published

    @cieloazul310/ol-gsi-vt-style

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

    @cieloazul310/ol-gsi-vt-style は国土地理院が提供するベクトルタイルをOpenLayersで表示するためスタイルパッケージです。

    npm version

    API

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

    gsiOptVtStyle(options?, defaultTheme?)

    最適化ベクトルタイルのプリセットスタイルを生成する関数
    Source

    import VectorTileLayer from 'ol/layer/VectorTile';
    import VectorTileSource from 'ol/source/VectorTile';
    import MVTFormat from 'ol/format/MVT';
    import { gsiOptVtStyle } from '@cieloazul310/ol-gsi-vt-style';
    
    const layer = new VectorLayer({
      source: new VectorTileSource({
        format: new MVTFormat(),
        url: 'https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap-v1/{z}/{x}/{y}.pbf',
        attributions: '<a href="https://github.com/gsi-cyberjapan/optimal_bvmap" target="_blank" rel=”noopener noreferrer”>国土地理院最適化ベクトルタイル</a>',
      }),
      style: gsiOptVtStyle(),
    });

    options?

    • styles?: GsiOptVTLayerStyleOptions マニュアル記法によるスタイリングを実装するオブジェクト

    • theme?: ThemeOptions

      • palette?: PaletteOptions
      • typography?: Partial<Typography>
      • zIndex: Partial<Typography>

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

    defaultTheme?

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

    returns

    StyleFunction
    (feature: FeatureLike, resolution: number) => Style | Style[]

    gsiVtStyle(options?, defaultTheme?)

    ベクトルタイルのプリセットスタイルを生成する関数
    Source

    import VectorTileLayer from 'ol/layer/VectorTile';
    import VectorTileSource from 'ol/source/VectorTile';
    import MVTFormat from 'ol/format/MVT';
    import { gsiVtStyle } from '@cieloazul310/ol-gsi-vt-style';
    
    const layer = new VectorLayer({
      source: new VectorTileSource({
        format: new MVTFormat(),
        url: 'https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf',
        attributions: '<a href="https://github.com/gsi-cyberjapan/gsimaps-vector-experiment" target="_blank" rel=”noopener noreferrer”>国土地理院ベクトルタイル提供実験</a>',
      }),
      style: gsiVtStyle(),
    });

    options?

    • styles?: GsiVTLayerStyleOptions マニュアル記法によるスタイリングを実装するオブジェクト

    • theme?: ThemeOptions

      • palette?: PaletteOptions
      • typography?: Partial<Typography>
      • zIndex: Partial<Typography>

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

    defaultTheme?

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

    returns

    StyleFunction
    (feature: FeatureLike, resolution: number) => Style | Style[]

    スタイルのマニュアル記法

    テーマによる配色やタイポグラフィの設定以外に、マニュアル記法によるスタイリングをサポートしています。

    import Style from 'ol/style/Style';
    import Fill from 'ol/style/Fill';
    import Text from 'ol/style/Text';
    import { gsiOptVTLayer, type GsiOptVTStyleOptions, type GsiOptVTLayerName } from '@cieloazul310/ol-gsi-vt';
    
    const styles: GsiOptVTStyleOptions = {
      // ソースレイヤ名 Anno: 注記
      Anno: (feature, resolution, theme) => {
        const { vt_code, vt_text } = feature.getProperties() as GsiOptVTFeatureProperties;
        // 注記分類コードが 411: 道路名 のとき
        if (vt_code === 411) {
          return new Style({
            text: new Text({
              text: vt_text,
              font: 'italic bold 20px sans-serif',
              fill: new Fill({ color: theme.palette.anno.text.main }),
            })
          });
        }
        // それ以外は空のスタイル
        return new Style();
      },
    };
    
    const layer = gsiOptVtLayer({
      styles,
    });

    StyleOptions のプロパティと値

    • [sourceLayerName]: (feature: FeatureLike, resolution: number, theme: Theme) => Style | Style[] | void

    返り値がないときは、プリセットのスタイルが適用される。つまりマニュアル記法で設定する地物と、プリセットのスタイルを設定する地物を区別することができる。
    最適化ベクトルタイルとベクトルタイルではソースレイヤ名が異なるため注意が必要。

    パッケージ

    @cieloazul310/ol-gsi-vt

    npm version

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

    @cieloazul310/ol-gsi-vt-style

    npm version

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

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

    npm version

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

    ベクトルタイルの仕様

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

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

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

    Install

    npm i @cieloazul310/ol-gsi-vt-style

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    230 kB

    Total Files

    334

    Last publish

    Collaborators

    • cieloazul310