Stamen Toner風

Stamen Maps の Toner 風の地図をパレットとマニュアル記法によって生成する例です。

Example code

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 {
  gsiOptVtLayer,
  definePalette,
  defineOptVtLayers,
  defineOptVtLayerStyle,
  annoCodeAddress,
  type GsiOptVTFeatureProperties,
} from "@cieloazul310/ol-gsi-vt";

const palette = definePalette({
  waterarea: "#000",
  waterline: "#000",
  road: {
    highway: {
      edge: "#fff",
      main: "#333",
    },
    national: {
      edge: "#fff",
      main: "#333",
    },
    pref: {
      edge: "#fff",
      main: "#333",
    },
    basic: {
      edge: "#fff",
      main: "#333",
    },
    edge: "#000",
  },
  rail: {
    shinkansen: "#000",
    jr: "#333",
    shitetsu: "#333",
    station: {
      main: "#000",
      light: "#000",
    },
  },
  boundary: { main: "#000", light: "#000" },
  background: "#fff",
});

const layers = defineOptVtLayers([
  "WA", // 水域
  "RdCL", // 道路中心線
  "RailCL", // 鉄道中心線
  "RdCompt", // 道路構成線
  "RdEdg", // 道路縁
  "RailTrCL", // 軌道の中心線
  "Anno", // 注記
  "Cstline", // 海岸線
  "AdmBdry", // 行政区画線
]);

const styles = defineOptVtLayerStyle({
  Anno: (feature, resolution, { typography, zIndex }) => {
    const { vt_text, vt_code } =
      feature.getProperties() as GsiOptVTFeatureProperties<
        number,
        {
          vt_text?: string;
        }
      >;
    if (!vt_text) return new Style();
    if (
      ![
        ...annoCodeAddress, // 地名・住所関連の地物コード
        321, // 湖、沼、池、浦等
        411, // 道路名
        412, // 道路施設（IC、PA、道の駅等）
        422, // 鉄道駅名
        441, // 空港名
        532, // 史跡名勝天然記念物
        534, // 公園
        631, // 大学・大学院
        2941, // インターチェンジ
        2942, // ジャンクション
        2943, // サービスエリア
        2944, // パーキングエリア
        2945, // スマートインターチェンジ
        6341, // 史跡・名勝・天然記念物
        6371, // 空港
      ].includes(vt_code)
    )
      return new Style();

    return new Style({
      text: new Text({
        text: vt_text,
        stroke: new Stroke({ width: 4, color: "#fff" }),
        fill: new Fill({ color: "#000" }),
        font: typography.toString("md", {
          bold: true,
          italic: true,
        }),
      }),
      zIndex: zIndex.label,
    });
  },
});

const layer = gsiOptVtLayer({
  theme: {
    palette,
  },
  layers,
  styles,
});

export default layer;

解説

このレイヤでは以下の3つの設定を行なっています。

  1. 描写するレイヤを選択
  2. パレットによる調製で色を変更
  3. マニュアル記法で注記(Anno)レイヤのスタイル変更

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

描写するレイヤを選択します。ヘルパー関数defineOptVtLayersを用いることでエディタの補完機能を働かせることができます。

const layers = defineOptVtLayers([
  "WA", // 水域
  "RdCL", // 道路中心線
  "RailCL", // 鉄道中心線
  "RdCompt", // 道路構成線
  "RdEdg", // 道路縁
  "RailTrCL", // 軌道の中心線
  "Anno", // 注記
  "Cstline", // 海岸線
  "AdmBdry", // 行政区画線
]);

2. パレットによる調整で色を変更

次にStamen MapsのTonor風にするためにパレットを設定します。

const palette = definePalette({
  waterarea: "#000",
  waterline: "#000",
  road: {
    highway: {
      edge: "#fff",
      main: "#333",
    },
    national: {
      edge: "#fff",
      main: "#333",
    },
    pref: {
      edge: "#fff",
      main: "#333",
    },
    basic: {
      edge: "#fff",
      main: "#333",
    },
    edge: "#000",
  },
  rail: {
    shinkansen: "#000",
    jr: "#333",
    shitetsu: "#333",
    station: {
      main: "#000",
      light: "#000",
    },
  },
  boundary: { main: "#000", light: "#000" },
  background: "#fff",
});

3. マニュアル記法で注記(Anno)レイヤのスタイル変更

この例では以下の3つのことを行なっています。

  1. テキストを持たない地物を除外
  2. 選択した地物以外を除外
  3. 選択した地物の文字の色・スタイルを記述
const styles = defineOptVtLayerStyle({
  Anno: (feature, resolution, { typography, zIndex }) => {
    const { vt_text, vt_code } =
      feature.getProperties() as GsiOptVTFeatureProperties<
        number,
        {
          vt_text?: string;
        }
      >;
    
    // 1. テキストを持たない地物を除外
    if (!vt_text) return new Style();
    
    // 2. 選択した地物以外を除外
    if (
      ![
        ...annoCodeAddress, // 地名・住所関連の地物コード
        321, // 湖、沼、池、浦等
        411, // 道路名
        412, // 道路施設（IC、PA、道の駅等）
        422, // 鉄道駅名
        441, // 空港名
        532, // 史跡名勝天然記念物
        534, // 公園
        631, // 大学・大学院
        2941, // インターチェンジ
        2942, // ジャンクション
        2943, // サービスエリア
        2944, // パーキングエリア
        2945, // スマートインターチェンジ
        6341, // 史跡・名勝・天然記念物
        6371, // 空港
      ].includes(vt_code)
    )
      return new Style();

    // 3. 選択した地物の文字の色・スタイルを記述 (パレットの設定は無視される)
    return new Style({
      text: new Text({
        text: vt_text,
        stroke: new Stroke({ width: 4, color: "#fff" }),
        fill: new Fill({ color: "#000" }),
        // Canvas用のfont設定の文字列を返す関数
        font: typography.toString("md", {
          bold: true,
          italic: true,
        }),
      }),
      // ラベルのzIndexを取得
      zIndex: zIndex.label,
    });
  },
});

地物コードは以下のリポジトリに掲載されている。

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

ol-gsi-vt