@cieloazul310/ol-gsi-vt-utils

@cieloazul310/ol-gsi-vt-utils API

Theme

@cieloazul310/ol-gsi-vt テーマは、配色設定である palette、注記の文字の設定である typography、地物描写の階層の設定である zIndex からなります。

type Theme = {
  palette: Palette;
  typography: Typography;
  zIndex: ZIndex;
};

<function> useDefaultTheme

const defaultTheme = useDefaultTheme();

ol-gsi-vtのデフォルトのテーマを返す関数
Source

deprecated <Object> defaultTheme

(非推奨) パッケージのプリセットのテーマ設定
Source

<function> mergeDefaultTheme(defaultTheme?)

const merge = mergeDefaultTheme();

const palette = definePalette({
  background: "#ffe",
});

const myTheme = merge({ palette });

自分で設定したテーマを、デフォルトのテーマにマージする関数を生成する関数。
Source

argument

<Object> defaultTheme? Theme

returns

<function>
(themeOptions?: <Object> ThemeOptions) => <Object> Theme

import {
  mergeDefaultTheme,
  useDefaultTheme,
  palePalette,
} from '@cieloazul310/ol-gsi-vt';

// パッケージのデフォルトテーマをマージ先のデフォルトテーマとする関数
const mergeToDefaultTheme = mergeDefaultTheme();
const myTheme = mergeToDefaultTheme({
  palette: {
    background: '#fff',
  },
});

// 淡色パレットによるテーマをマージ先のデフォルトテーマとする関数
const mergeToPaleTheme = mergeDefaultTheme({
  ...useDefaultTheme(),
  palette: usePalePalette(),
});
const myPaleTheme = mergeToPaleTheme({
  palette: {
    road: {
      highway: { 
        main: '#0f0',
        edge: '#0a0',
      },
    },
  },
});

Palette

Source

type Palette = {
  /** 注記レイヤーの文字色 */
  anno: {
    /** テキスト */
    text: {
      main: string;
      light: string;
    };
    /** 水域関連の文字色 */
    water: string;
    /** 山岳関連の文字色 */
    terrain: string;
    /** 交通関連の文字色 */
    transp: string;
    /** 森林・緑地・公園関連の文字色 */
    green: string;
  };
  /** レイヤーの背景 */
  background: string;
  /** 境界の色 */
  boundary: {
    main: string;
    light: string;
  };
  /** 建物の色 */
  building: {
    stroke: string;
    fill: string;
  };
  /** 等高線の色 */
  contour: {
    main: string;
    light: string;
  };
  /** テキストの文字縁など */
  contrast: string;
  /** 等深線 */
  isbt: string;
  /** 鉄道関連 */
  rail: {
    /** 駅 */
    station: {
      main: string;
      light: string;
    };
    /** 新幹線 */
    shinkansen: string;
    /** JR */
    jr: string;
    /** JR以外 */
    shitetsu: string;
  };
  /** 道路の色
   * `main`は道路中心線、`edge` は道路縁
   */
  road: {
    /** 高速道路 */
    highway: {
      main: string;
      edge: string;
    };
    /** 国道 */
    national: {
      main: string;
      edge: string;
    };
    /** 都道府県道 */
    pref: {
      main: string;
      edge: string;
    };
    /** 一般道 */
    basic: {
      main: string;
      edge: string;
    };
    /** z16以上の道路縁 */
    edge: string;
  };
  /** 航路 */
  searoute: string;
  /** ダムなどの構造物 */
  structure: string;
  /** 地形面 */
  tpgphArea: {
    /** 湿地 */
    wetland: string;
    /** 万年雪 */
    firn: string;
    /** 砂礫地 */
    sand: string;
  };
  /** 国道番号・高速道路番号 */
  transp: {
    /** 高速道路番号の背景色 */
    highway: string;
    /** 国道番号の背景色 */
    national: string;
  };
  /** 火山 */
  volcano: string;
  /** 水域・河川 */
  waterarea: string;
  /** 海岸線・水涯線 */
  waterline: string;
};

Typography

Source

type Typography = {
  fontFamily: string;
  fontSize: {
    /** default to '10px' */
    xs: string;
    /** default to '12px' */
    sm: string;
    /** default to '14px' */
    md: string;
    /** default to '18px' */
    lg: string;
    /** default to '24px' */
    xl: string;
  };
  /** Canvas フォント設定を生成
   * https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/font
   */
  toString: (
    fontSize?: keyof Typography['fontSize'] | string,
    options?: {
      italic?: boolean;
      bold?: boolean;
      fontFamily?: string;
      fontWeight?: string | number | number;
    }
  ) => string;
};

typography.toString(fontSize?, options?)

TextStyleクラスの font オプションに指定できる文字列を生成するための関数。

import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Text from 'ol/style/Text';
import type {
  GsiOptVtStyleOptions, 
  GsiOptVTFeatureProperties,
} from '@cieloazul310/ol-gsi-vt';

const style: GsiOptVtStyleOptions = {
  Anno: (feature, resolution, { palette, typography }) => {
    const { vt_code, vt_text } = feature.getProperties() as GsiOptVTFeatureProperties<number, {
      vt_text?: string;
    }>;
    if (!vt_text) return new Style();
    
    // vt_code 140: 都道府県
    if (vt_code === 140)
      return new Style({
        text: new Text({
          text: vt_text,
          font: typography.toString('xl', { bold: true }),
          // => '24px system-ui, -apple-system, sans-serif'
          fill: new Fill({ color: palette.anno.text.main }),
          stroke: new Stroke({ color: palette.contrast, width: 4 }),
        }),
      });
    
    if (vt_code === 110)
      return new Style({
        text: vt_text,
        font: typography.toString('lg', { bold: true, italic: true }),
        // => 'italic bold 18px system-ui, -apple-system, sans-serif'
        fill: new Fill({ color: palette.anno.text.main }),
        stroke: new Stroke({ color: palette.contrast, width: 3 }),
      });
    
    return new Style();
  },
};

zIndex

Source

type ZIndex = {
  /** 水域 (default to 0) */
  waterarea: number;
  /** 海岸線・水涯線 (default to 1) */
  waterline: number;
  /** 地形面 (default to 2) */
  tpgphArea: number;
  /** 等高線 (default to 3) */
  contour: number;
  /** 航路 (default to 4) */
  searoute: number;
  /** 道路の背景 (default to 100) */
  roadBg: number;
  /** 鉄道の背景 (default to 150) */
  railwayBg: number;
  /** 建物の基準面 (default to 150) (lvOrder属性に依存) */
  building: number;
  /** 道路の基準面 (default to 150) (lvOrder属性に依存) */
  road: number;
  /** 鉄道の基準面 (default to 160) (lvOrder属性に依存) */
  railway: number;
  /** 駅 (default to 200) */
  station: number;
  /** 送電線 (default to 250) */
  pwrTrnsmL: number;
  /** 境界線 (default to 500) */
  boundary: number;
  /** 標高点 (default to 600) */
  elevation: number;
  /** 国道番号・高速道路番号 (default to 700)「 */
  transp: number;
  /** 注記の基準 (default to 800) */
  label: number;
  /** 記号の基準 (default to 900) */
  symbol: number;
  /** 注記の最上位 (default to 1000) */
  highest: number;
};

関数

For source-layers

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

<Array> gsiOptVtLayerNameCollection

最適化ベクトルタイルの全てのソースレイヤー名を格納した配列
Source

<function> defineOptVtLayers(GsiOptVTLayerName[])

最適化ベクトルタイルのソースレイヤーを指定するためのヘルパー関数
Source

<function> gsiOptVtLayerExclude(GsiOptVTLayerName[])

最適化ベクトルタイルのソースレイヤーから指定のソースレイヤーを取り除く関数
Source

import { 
  gsiOptVtLayerNameCollection,
  defineOptVtLayers,
  gsiOptVtLayerExclude,
} from '@cieloazul310/ol-gsi-vt';

console.log(gsiOptVtLayerNameCollection);
// => ['AdmArea', 'AdmBdry', 'Anno', 'BldA', 'Cntr', 'Cstline', 'Isbt', 'PwrTrnsmL', 'RailCL', 'RailTrCL', 'RdEdg', 'RdCompt', 'RdCL', 'RvrCL', 'SpcfArea', 'StrctLine', 'StrctArea', 'TpgphArea', 'TpgphLine', 'WA', 'WL', 'WStrA', 'WStrL', 'WRltLine']

console.log(defineOptVtLayers(["Anno", "StrctLine"]));
// => ["Anno", "StrctLine"]

console.log(gsiOptVtLayerExclude(['Anno', 'StrctLine', 'StrctArea']));
// => ['AdmArea', 'AdmBdry', 'BldA', 'Cntr', 'Cstline', 'Isbt', 'PwrTrnsmL', 'RailCL', 'RailTrCL', 'RdEdg', 'RdCompt', 'RdCL', 'RvrCL', 'SpcfArea', 'TpgphArea', 'TpgphLine', 'WA', 'WL', 'WStrA', 'WStrL', 'WRltLine']

<Array> gsiVtLayerNameCollection

ベクトルタイルの全てのソースレイヤー名を格納した配列
Source

<function> defineVtLayers(GsiVTLayerName[])

ベクトルタイルのソースレイヤーを記述するためのヘルパー関数
Source

<function> gsiVtLayerExclude(GsiVTLayerName[])

ベクトルタイルのソースレイヤーから指定のソースレイヤーを取り除く関数
Source

注記

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

const style = defineOptVtLayerStyle({
  Anno: (feature, resolution, theme) => {
    const { vt_code } = 
      feature.getProperties() 
      as GsiOptVTFeatureProperties<
        number, 
        {
          vt_text?: string;
        }
      >;
    // 住所・地名関連以外の地物に空のスタイルを与える
    if (!annoCodeIsAddress(vt_code)) return new Style();
    if (!vt_text) return new Style();
    
    return new Style({
      text: new Text({
        text: vt_text,
      }),
    });
  },
});

annoCodeIsAddress(code)

住所関連の地物を判別するための関数

  • argument: <number> 最適化ベクトルタイルの場合は vt_code、ベクトルタイルの場合は ftCode または annoCtg
  • returns: <Boolean>

Source

annoCodeIsAdm(code)

行政関連施設の地物を判別するための関数
Source

annoCodeIsAirport(code)

空港関連の地物を判別するための関数
Source

annoCodeIsElevation(code)

標高点関連の地物を判別するための関数
Source

annoCodeIsGreen(code)

公園・森林関連の地物を判別するための関数
Source

annoCodeIsLandformPoint(code)

地形(点)の地物を判別するための関数
Source

annoCodeIsPort(code)

港湾関連の地物を判別するための関数
Source

annoCodeIsSchool(code)

学校関連の地物を判別するための関数
Source

annoCodeIsTerrain(code)

山名、地形名関連の地物を判別するための関数
Source

annoCodeIsTransp(code)

交通構造物関連の地物を判別するための関数
Source

annoCodeIsVegetation(code)

植生関連の地物を判別するための関数
Source

annoCodeIsWater(code)

水域関連の地物を判別するための関数
Source

その他

zoomToResolution(zoomLevel)

dspPos(dspPos?, arrng?, radius?)

型定義

TypeScript でマニュアル記法をするときに有用な、最適化ベクトルタイル及びベクトルタイルの地物の型定義のヘルパー

地物の型定義

GsiOptVTFeatureProperties<VTCode*, *T>

最適化ベクトルタイルの地物の属性に型を与える型定義です。ジェネリックス <VTCode, T> の引数を指定せずに使うこともできます。
Source

export type GsiOptVTFeatureProperties<
  VTCode extends number = number,
  T extends Record<string, unknown> = Record<string, unknown>
> = {
  /** レイヤ名 */
  layer: GsiOptVTLayerName;
  /** 地物種別コード */
  vt_code: VTCode;
  /** 階層順 (z11-17) */
  vt_lvorder?: 0 | 1 | 2 | 3 | 4;
  /** ズームレベル17の表示フラグ (z16-17)
   * `0`: ズームレベル16を表示
   * `1`: ズームレベル16,17ともに表示
   * `2`: ズームレベル17を表示
   */
  vt_flag17?: 0 | 1 | 2;
} & T;

const { vt_code } = feature.getProperties() as GsiOptVTFeatureProperties;
// vt_code: number

GsiVTFeatureProperties<FTCode*, *T>

ベクトルタイルの地物の属性に型を与える型定義です。ジェネリックス <FTCode, T> の引数を指定せずに使うこともできます。
Source

export type GsiVTFeatureProperties<
  FTCode extends number = number,
  T extends Record<string, unknown> = Record<string, unknown>
> = {
  /** レイヤ名 */
  layer: GsiVTLayerName;
  /** 地物種別コード */
  ftCode: FTCode;
  /** 道路の階層順 */
  lvOrder?: 0 | 1 | 2 | 3 | 4;
  /** 出典地理情報レベル */
  orgGILvl: string;
} & T;

ol-gsi-vt