水域 + 等高線

ベクトルタイルから、境界線(boundary)、海岸線(coastline)、等高線(contour)、地形表記面(landforma)、河川(river)、水域(water)のソースレイヤーをプリセットで、注記(label)、記号(symbol)のソースレイヤーから地名だけを抜き出して描写した例です。

@cieloazul310/ol-gsi-vt のマニュアル記法という機能を利用しています。

Example code

import Style from "ol/style/Style";
import {
  gsiVtLayer,
  defineVtLayers,
  defineVtLayerStyle,
  annoCodeIsAddress,
  type GsiVTFeatureProperties,
} from "@cieloazul310/ol-gsi-vt";

const layers = defineVtLayers([
  "boundary",
  "coastline",
  "contour",
  "label",
  "lake",
  "landforma",
  "river",
  "symbol",
  "waterarea",
]);

const styles = defineVtLayerStyle({
  label: (feature) => {
    const { ftCode, annoCtg } =
      feature.getProperties() as GsiVTFeatureProperties<
        number,
        { annoCtg?: number }
      >;
    const code = annoCtg ?? ftCode;
    if (!annoCodeIsAddress(code)) return new Style();
    return undefined;
  },
  symbol: (feature) => {
    const { ftCode } = feature.getProperties() as GsiVTFeatureProperties;
    if (!annoCodeIsAddress(ftCode)) return new Style();
    return undefined;
  },
});

const layer = gsiVtLayer({ layers, styles });

export default layer;

解説

1. 描写するレイヤを選択

描写するレイヤを選択するには、gsiVtLayerのlayersオプションに描写するレイヤの配列を渡します。描写するレイヤをgsiVtLayerのオプションの外で定義するためのヘルパー関数defineVtLayersを用意しています。ヘルパー関数を用いることでエディタでレイヤ名を補完することができます。

const layers = defineVtLayers([
  "boundary",
  "coastline",
  "contour",
  "label",
  "lake",
  "landforma",
  "river",
  "symbol",
  "waterarea",
]);

const layer = gsiVtLayer({ layers });

2. マニュアル記法

gsiVtLayerのstylesオプションでは、マニュアルでスタイルを記述してプリセットのスタイルを上書きすることができます。gsiVtLayerのオプションの外でスタイルを定義するためのdefineVtLayerStyleというヘルパー関数を用意しています。レイヤと同様にヘルパー関数を用いることでエディタの補完機能を効かせることができます。

const styles = defineVtLayerStyle({
  label: (feature) => {
    // GsiVTFeatureProperties型で地物のプロパティに型を与える
    const { ftCode, annoCtg } =
      feature.getProperties() as GsiVTFeatureProperties<
        number,
        { annoCtg?: number }
      >;
    
    const code = annoCtg ?? ftCode;
    
    // 住所ではない地物は描写しないため、空のスタイルを返す
    if (!annoCodeIsAddress(code)) return new Style();
    
    // 住所の地物にはプリセット通りのスタイルを与えるため、undefinedを返す
    return undefined;
  },
  symbol: (feature) => {
    // GsiVTFeatureProperties型で地物のプロパティに型を与える
    const { ftCode } = feature.getProperties() as GsiVTFeatureProperties;

    // 住所ではない地物は描写しないため、空のスタイルを返す
    if (!annoCodeIsAddress(ftCode)) return new Style();

    // 住所の地物にはプリセット通りのスタイルを与えるため、undefinedを返す
    return undefined;
  },
});

const layer = gsiVtLayer({ styles });

マニュアル記法ではOpenLayersのスタイル関数と同様に、個別の地物に適用するスタイルを記述します。第1引数にfeature(地物)、第2引数にresolution(地図の解像度)を取り、第3引数にはol-gsi-vt特有のレイヤのthemeを取ります。

マニュアル記法ではOpenLayersのスタイル関数と同様、Style、またはStyleの配列を返り値とします。また以下のようなTipsがあります。

  1. プリセット通りのスタイルを適用する場合、undefinedを返り値にする。
  2. 地物を描写しない場合、空のスタイルnew Style()を返り値にする。

ol-gsi-vt